前提・実現したいこと
ご覧頂きありがとうございます。
初歩的なことかもしれませんがつまづいてしまい、お力を貸してください。
htmlの静的なページへ都道府県の画像を設置しています。
イメージマップを使用して都道府県にマウスオーバーすると色が変わるようしています。
さらに、都道府県をクリックしたら各都道府県のページへ遷移します。
スマートフォン実機で見た際、
地図をクリックした時に、ページ遷移の前に地図に色をつけたいです。
発生している問題・エラーメッセージ
Windows/MacおよびPCでのエミュレーターでは希望どおり動作しますが、
スマートフォン実機(iPhone)にて、
現状では地図をクリックすると都道府県の色は変わらないまま、ページ遷移のみします。
該当のソースコード
HTML
1<img src="japan.png" usemap="#Map"> 2<map name="Map"> 3<area shape="rect" coords="0,10,20,30" href="tokyo.html" class="map-tokyo"> 4</map>
jQuery
1$(".map-tokyo").hover(function() { 2 $(".change-map").attr("src","japan-tokyo.png"); 3 $(this).toggleClass('active'); 4},function() { 5 $(".change-map").attr("src","japan.png"); 6 $(this).toggleClass('active'); 7});
試したこと
jQuery
1$(document).on({ 2 mouseenter: function() { 3 $(".change-map").attr("src","japan-tokyo.png"); 4 $(this).toggleClass('active'); 5 }, 6 mouseleave: function() { 7 $(".change-map").attr("src","japan.png"); 8 $(this).toggleClass('active'); 9 }, 10 click: function() { 11 $.when( 12 $(".change-map").attr("src","japan-tokyo.png"), 13 $(this).toggleClass('active') 14 ).done(function(){ 15 window.location.href = 'index.html'; 16 }); 17 } 18}, '.map-tokyo');
読み込んでから実行する(when/done)を利用してみましたが、
この場合ページ遷移はしますが都道府県の色は変わりませんでした。
よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー