jQueryでの.hoverによるちらつき

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件

ベストアンサー

原因としては、under_ingの上にover_imgが乗っかってしまっているので、over_imgを表示するとunder_imgからマウスが外れたことになってしまいます。

under_imgにmapをかけるのではなく、over_imgより上に来るような形で透過gifのimgを入れて、そっちにmapをかけるのがいいのではないかと思います。

投稿2015/07/28 06:48

maisumakun

総合スコア145183

urdapple

2015/07/28 07:04

やはりこれなんですよね・・・ console.logで確認すると、ものすごい勢いでhoverのmouseoverとmouseoutの処理を繰り返していますし・・・ただ、実ファイルでは、このエリアが10箇所程あるので、10枚の絵を重ねるしか方法はないのでしょうか？また、display等で見えない状況にした絵のMapが効くのかどうかも不安があります。未だ実験していないのですがちょっとやってみます。取り急ぎありがとうございました。

行動規範の内容に同意します

方法として、maisumakunさんの提示された方法を一歩進めて、上に重ねた方の絵（最初消えているべき絵）にmapを貼り、opacityを変更することで対応しました。

皆さんが提示してくださった方法、とても勉強になりました。
ありがとうございました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;
				opacity: 0;
			}
		</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()
		{
			$(".map_area").hover
			(
				function()
				{
					$(".over_img").css("opacity", "1");
				},
				function()
				{
					$(".over_img").css("opacity", "0");
				}
			);
		});
		</script>
	</head>
	<body>
		<img src="aaa.png" class="under_img" />
		<img src="bbb.png" class="over_img" usemap="#mapping" />
		<map name="mapping">
			<area shape="rect" coords="0, 0, 200, 200" class="map_area" />
		</map>
	</body>
</html>

投稿2015/07/28 07:41

urdapple

総合スコア83

yu-ri

2015/07/28 08:44

解決したようで何よりです。 opacityですが、ブラウザによって挙動がマチマチなのでその点だけ気を付けてくださいね。特に公共系のお仕事で使うと、IE非対応とかでぶーぶー言われます(笑)

行動規範の内容に同意します

色々試して見た結果こんなコードになりました。

javascript
1$(document).ready(function(){
2	$(".over_img").hide();
3	$(".under_img").mousemove(function(e){
4		x = e.offsetX;
5		y = e.offsetY;
6		if ((x >= 100 && x <= 300) && (y >= 100 && y <= 300)) {
7			$(".over_img").show();
8		} else {
9			$(".over_img").hide();
10		}
11	});
12});

参考になりましたら幸いです。

投稿2015/07/28 05:58

yu-ri

総合スコア634

urdapple

2015/07/28 06:18

コレは例で書いたhtmlなんですが、実際のshapeは「poly」で、かなり複雑な形のため、この方法は難しそうです。ありがとうございますm(_ _)m

yu-ri

2015/07/28 06:58 編集

ああ、polyでしたか…。そうなると、hover時に、aaa.pngの中にbbb.pngが既に入っている「ccc.png」を用意して、画像ごと差し替えれば解決かと。 $(document).ready(function(){ $(".map_area").hover( function(){ $(".under_img").attr({src:'ccc.png'}); }, function(){ $(".under_img").attr({src:'aaa.png'}); } ); }); どうせhoverは複数個所が一気にされることはないわけですから、hover単位で画像を作れば何とかなりそうですが、いかがでしょうか。

urdapple

2015/07/28 07:13

おおぉ！ちょっと力技ですけど手っ取り早いかもしれません！今やっている方法がうまく動かなかったら試させてもらいます。ありがとうございますm(_ _)m

行動規範の内容に同意します

本質的な解決方法ではありませんが、最終的に解決したい問題が

「クリッカブルマップの領域をロールオーバーで変化させたい」

ということなのであれば、jQueryプラグインを利用するのも手かと思います。
プラグイン使うならpolyでも何でも領域ごとにロールオーバーで画像差替えできますし
用意する画像はロールオーバー前と後の2枚で済みます。

◎参考サイト

あるいはこういったプラグインが何をしているのか解析して、解決のヒントを見つけるとか。

投稿2015/07/28 07:29

aKusano

総合スコア3763

urdapple

2015/07/28 07:50

あ、解決方法を書いている間に便利そうなプラグインが・・・il||li＿|￣|○il||li 次回は利用させてもらおうと思います！ありがとうございましたm(_ _)m

行動規範の内容に同意します

こんな感じではどうでしょうか？

Html
1<html>
2    <head>
3        <!-- スタイルシート -->
4        <style type="text/css">
5            .under_img
6            {
7                position: absolute;
8                top: 0;
9                left: 0;
10                width: 400px;
11                height: 400px;
12                z-index : -1;
13            }
14            
15            .over_img, .map_area
16            {
17                position: absolute;
18                top: 100px;
19                left: 100px;
20                width: 200px;
21                height: 200px;
22            }
23        </style>
24        
25        <!-- jQuery読み込み -->
26        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
27        
28        <script type="text/javascript">
29        $(document).ready(function()
30        {
31            $(".over_img").hide();
32            $(".map_area").hover(
33                function()
34                {
35                    $(".over_img").show();
36                },
37                function()
38                {
39                    $(".over_img").hide();
40                }
41            );
42        });
43        </script>
44    </head>
45    <body>
46        <img src="aaa.png" class="under_img" usemap="#mapping" />
47        <img src="bbb.png" class="over_img" />
48				<div class="map_area" />
49    </body>
50</html>

後ろの画像のz-indexを下げて、その上にDIV領域をとって
そのDIVのhoverで表示・非表示の処理をしてます。

投稿2015/07/28 07:01

編集2015/07/28 07:02

MakotoMiyazaki

総合スコア297

urdapple

2015/07/28 07:18

おおおおぉ！できてる！！・・・って思ったんですけど、これだとrect領域じゃないと動かなそうですよね？？追記にも書いたんですが、実際はpolyなので、mapを消すわけにはいかず・・・すいません、でもありがとうございましたm(_ _)m

MakotoMiyazaki

2015/07/28 07:35

すみません。。。追記を見逃していました。。。であれば、maisumakunさんが書かれている通り、透明なgifを重ねてそこにmapを指定するしかなさそうですね。レイヤーを考えると上に乗せる画像背景画像（ここにイベントが設定されている）という状態なので、上に乗せる画像が表示されると、どうしても背景画像のmouseoutが処理されてしまいます。なので判定用透過画像（ここにイベントを設定）上に乗せる画像背景画像としてあげないといけないかと。判定用透過画像の追加は、正直に1枚1枚乗せていくのではなく JSで処理すれば簡単にできそうな気はします。例えば、背景用imgに<class="useOverImage" data-map="#map"> のような属性を追加して、$(".useOverImage")に対して、data("map")のusemapを持つimgを同サイズでaddする、といった感じで。（実際試していないのでうまくいくかわかりませんが…）

urdapple

2015/07/28 07:47

あ、この方法いいかもしれません！！極端な話、透明のイベントドリブン用の絵をのせて、そこにmapすればいいわけですね！実際には多数のpolyがあって、手を加えるの大変そうだったので、やってみます！ですがすみません、先にヒントを頂いた「maisumakun」さんをベストアンサーとさせていただきました。ご了承下さいm(_ _)m

行動規範の内容に同意します

HTML
1        $(document).ready(function()
2        {
3            $(".over_img").hide();

この部分が問題かと思われます。一度、表示が整って表示して（Ready前）、そのあと消しているためちらつきます。HTMLに直接Over_ImgをHideにしておき、初期表示では隠れていて、イベント定義でそのHide定義を消すような方法で実装されてはいかがでしょうか？

-------------コメントに応じて追記１-----------------
デフォルトで消した状態にした後。

HTML
1      $(document).ready(function()
2        {
3//            $(".over_img").hide();  ここと
4            $(".map_area").hover(
5                function()
6                {
7                    $(".over_img").show();
8                },
9                function()
10                {
11//                    $(".over_img").hide();　ここを消す
12                }
13            );
14        });

でもだめですかね？原因自体はHide処理でちらついてるのは間違いなさそうだったので。

投稿2015/07/28 06:07

編集2015/07/28 06:44

tenraku

総合スコア148

urdapple

2015/07/28 06:22

質問がわかりにくかったかもしれません。すみませんm(_ _)m 画面表示のその「読み込み時」だけにちらつくのではなく、マウス「hover時」にちらつくんです。ちなみにover_imgにdisplay:noneを設定してjQueryで消すのではなく、cssで最初から消しておいても状況は変わらず、マウスを乗せるとチラつきます。

urdapple

2015/07/28 06:59

ありがとうございます。 hoverのhide処理を消してしまうと、表示されたらそのままになってしまいます。 mouseoutしたらまた非表示に戻したいので、hoverのmouseout処理に変わる何かが必要になります。よろしくお願いしますm(_ _)m

tenraku

2015/07/28 08:22

結局、Hide処理を消すという方法ではなく、トリガを変える別の回答者の方がよさそうですね。お目汚し失礼しましたー

行動規範の内容に同意します

あなたの回答