イメージマップを使ったリンクでのクリック動作について

Question

前提・実現したいこと

ご覧頂きありがとうございます。
初歩的なことかもしれませんがつまづいてしまい、お力を貸してください。

htmlの静的なページへ都道府県の画像を設置しています。
イメージマップを使用して都道府県にマウスオーバーすると色が変わるようしています。
さらに、都道府県をクリックしたら各都道府県のページへ遷移します。

スマートフォン実機で見た際、
地図をクリックした時に、ページ遷移の前に地図に色をつけたいです。

発生している問題・エラーメッセージ

Windows/MacおよびPCでのエミュレーターでは希望どおり動作しますが、
スマートフォン実機（iPhone）にて、
現状では地図をクリックすると都道府県の色は変わらないまま、ページ遷移のみします。

該当のソースコード

<img src="japan.png" usemap="#Map">
<map name="Map">
<area shape="rect" coords="0,10,20,30" href="tokyo.html" class="map-tokyo">
</map>

$(".map-tokyo").hover(function() {
	$(".change-map").attr("src","japan-tokyo.png");
	$(this).toggleClass('active');
},function() {
	$(".change-map").attr("src","japan.png");
	$(this).toggleClass('active');
});

試したこと

$(document).on({
    mouseenter: function() {
        $(".change-map").attr("src","japan-tokyo.png");
		$(this).toggleClass('active');
    },
    mouseleave: function() {
        $(".change-map").attr("src","japan.png");
		$(this).toggleClass('active');
    },
    click: function() {
		$.when(
			$(".change-map").attr("src","japan-tokyo.png"),
			$(this).toggleClass('active')
		).done(function(){ 
			window.location.href = 'index.html';
		});
    }
}, '.map-tokyo');

読み込んでから実行する（when/done）を利用してみましたが、
この場合ページ遷移はしますが都道府県の色は変わりませんでした。

よろしくお願い致します。

Comments

[yambejp]

ページが遷移するなら、色が変わるかどうかはわからないのでは？

[tokotokotoko]

ありがとうございます！遷移をするタイムラグの間に色を変えたいと思っているのですが・・そもそも不可能な要望でしょうか。イメージマップの場合リンクが隣り合っているので、遷移前の一瞬で色がアクティブになったほうがわかりやすいと思いました。

Answer 1

miyabi_takatsuk様よりいただいたコードではhrefがundifineになってしまいましたので、
その箇所のみ、

var nextLocation = $(el).attr('href');

となっているところを、

var target = el.target;
var nextLocation = $(target).attr('href');

こう修正をして対応完了いたしました。
ありがとうございました！

Comments

[miyabi_pudding]

動作検証をしておらず、大変に失礼しました・・・。
もしかして、area要素の場合、
.targetが必要なのか！と逆に勉強になりました。
今後、自身のコードを過信せずに、しっかり検証して参ります。

Answer 2

スマホの場合、hoverアクションはありません。
タップかドラッグか、ダブルタップとか、
PCでいう、クリック以降のアクションしかないのです。

なので、タップ時に、ページ遷移を遅延させるのが一番有効かと思います。
クリックした時に、一旦リンクを無効にする処理を追加します。
（PCとはイベントの設定が変わるので、JSを分けるないし、デバイス判別して処理を変えるしかありませんが、ここでは、スマホでの処理方法にとどめます）

<!-- imgとmapにIDを付与しました。 -->
<img src="japan.png" usemap="#Map" id="mapImage">
<map name="Map" id="Map">
<area shape="rect" coords="0,10,20,30" href="tokyo.html" class="map-tokyo">
</map>

$(function(){

$('#Map > area').click(function(el){
  // areaのhrefを取得しておく
  var nextLocation = $(el).attr('href');
  
  // 画像が新しくなり、読み込みが完了した際に実行する関数を定義
  $('#mapImage')[0].onload = function(){
    // 画像が適用され、読み込まれたら実行する
    setTimeout(function(){
      // 少しの間だけ、画像を表示させるために、遅延
      window.location.href = nextLocation;
    }, 500);
  };

  $('#mapImage')[0].src = 'japan-tokyo.png';

  // クリックイベント関数のブロックの最後にreturn falseを実行することによって、ページ遷移処理を無効にできる。
  return false;
});


});

もし上記でうまくいかない場合は、あまり推奨されないですが、下記のように、hrefに、何も実行しないという関数を実行させるのもありです。

<!-- areaのhrefを変更、替わりにdata-hrefにリンク先を記述 -->
<img src="japan.png" usemap="#Map" id="mapImage">
<map name="Map" id="Map">
<area shape="rect" coords="0,10,20,30" href="javascript: void(0);" data-href="tokyo.html" class="map-tokyo">
</map>

$(function(){

$('#Map > area').click(function(el){
  // hrefではなく、data-hrefにリンク先を書いたので、それを取得しておく
  var nextLocation = $(el).attr('data-href');
  
  // 画像が新しくなり、読み込みが完了した際に実行する関数を定義
  $('#mapImage')[0].onload = function(){
    // 画像が適用され、読み込まれたら実行する
    setTimeout(function(){
      // 少しの間だけ、画像を表示させるために、遅延
      window.location.href = nextLocation;
    }, 500);
  };

  $('#mapImage')[0].src = 'japan-tokyo.png';

  // hrefには、無効処理をすでに入れているので、return falseは不要
  // return false;
});


});

Comments

[tokotokotoko]

はじめまして、丁寧なご解説、ありがとうございます。
さっそく試してみたところ、動作は希望のとおり、スマホで見ると地図に色がつきましたが、遷移先が「undefined」になってしまいました。

また、神奈川、千葉と増やしていったときに$('#mapImage')[0]の二箇所を複製してみたところ、遷移先はhrefに入れたものと同じになったのですが、今度は地図に色がつきませんでした。
しかし、いただいたコードであと少しのところまで来た気がします、ありがとうございます！
一度自分の方でも作業を進めてみます。