html(スタイルシート)にてaaaという絵の上にbbbという絵を重ね、jQueryを用いて上の絵をhideで消した状態にしておきます。
aaaの画像にmapタグを使って、ある領域を囲ってclass名にmap_areaとします。
jQueryでその領域にカーソルが入った時だけhideしておいた絵をshowさせるようにします。
以下のコードでやりたいことは実現できるのですが、領域にカーソルが入った時、マウスが動いていなければ表示されたままで問題がないのですが、マウスを動かし始めると、上にに重なった絵がチラチラと明滅するのをどうにかしたいです。
追記:
読み込み時にチラつくのではなく、エリアへマウスオーバーするとチラつきます。
↓のソースは実際に作ろうとしているページとは違って簡略してあります。実際はmapのshapeがrectではなく、複雑な形のpolyなのでmapを利用しています。
動作確認用のページを用意しました。動作確認ページ
どなたか、方法をご享受いただけますでしょうかm(_ _)m
<html> <head> <!-- スタイルシート --> <style type="text/css"> .under_img { position: absolute; top: 0; left: 0; width: 400px; height: 400px; } .over_img { position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; } </style> <!-- jQuery読み込み --> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".over_img").hide(); $(".map_area").hover( function() { $(".over_img").show(); }, function() { $(".over_img").hide(); } ); }); </script> </head> <body> <img src="aaa.png" class="under_img" usemap="#mapping" /> <img src="bbb.png" class="over_img" /> <map name="mapping"> <area shape="rect" coords="100, 100, 300, 300" class="map_area" /> </map> </body> </html>
回答6件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/28 07:04