0

レスポンシブ スライダーを使用しており、画像上にクリック可能なリンクを作成したいと考えています。

レスポンシブ イメージ マップを作成するこのプラグインを見つけました https://github.com/stowball/jQuery-rwdImageMaps/blob/master/jquery.rwdImageMaps.js

スライドは次のようになります。イメージ マップにリンクがあります。

  <li>
<img src="slide_2.png" usemap="#Image-Maps_5201211121032528"   />
<map id="_Image-Maps_5201211121032528" name="Image-Maps_5201211121032528">
<area shape="rect" coords="282,120,369,153" href="http://canvas.landsend.com/canvas/arrivals/blogger/index3.html"/>
</map> 
    </li>

フッターでプラグインを開始します

  $(document).ready(function(e) {

$('img[usemap]').rwdImageMaps();

});

奇妙な動作が発生しています。ブラウザのサイズを変更するか、コンソールから上記の JavaScript を実行した場合にのみ、イメージ マップ/リンクが表示されます。タイムアウトを設定してコードを実行し、「サイズ変更」機能をドキュメントの準備ができたときにトリガーするように設定してみました。コンソールからこれを実行するか、ブラウザのサイズを変更する以外に、イメージマップを表示するために何も機能していないようです。

2 番目のスライドの赤いボタンの上にあるイメージ マップのデモ

4

1 に答える 1

1

これらのファイル パスが間違っているため、imageMap JS がデモ ページに読み込まれません。

http://www.widget.devserver2012.com/jenamobile/css/shCore.css http://www.widget.devserver2012.com/jenamobile/css/shThemeDefault.css http://www.widget.devserver2012.com/ jenamobile/js/imageMap.js

最初にこれらを修正してみてください。

乾杯、ロブ

于 2012-11-12T16:45:32.750 に答える