イメージマップ理想
スイカの蜂にリンクがある。
この画像の格納先は「http://bangkok-pattaya-thailand.com/wp-content/uploads/2016/11/web_img554.jpg」
パソコンからリンクのある場所にマウスをあてると「えなねこフラワー」に切り割る。この切り替えの記述がわからない。
この画像の格納先は「http://bangkok-pattaya-thailand.com/wp-content/uploads/2016/11/IMG_0107.jpg」
下のhtml の黄色と青色部分が関係していると思われる。
<script type=”text/javascript”>
<!– // 基本の画像(イメージマップの背景画像)の格納先は、このhtmlファイルと同じフォルダとしています(./)。格納場所が異なる場合は、bodyタグ内の『img src=”./xxxx”』部分を修正してください。 // ============================================================================ // ロールオーバーのイメージファイルを格納するフォルダを指定してください。 // 初期値は、”./images/” です。(このhtmlファイルを格納するフォルダ内に images というフォルダを作成し、イメージファイルを格納すれば、ロールオーバーとして表示されます。) // このhtmlファイルと同じフォルダにロールオーバーのイメージファイルも格納する場合は、”./” としてください。 rollover_img_folder = “./images/”; // ============================================================================ // ============================================================================ // map_0 (1) // ============================================================================ rollover_over_img = {“map_0”:”http://bangkok-pattaya-thailand.com/wp-content/uploads/2016/11/web_img554.jpg“}; rollover_down_img = {“map_0″:”http://bangkok-pattaya-thailand.com/wp-content/uploads/2016/11/kunnka.jpg”}; rollover_over_left = {“map_0″:”0px”}; rollover_over_top = {“map_0″:”0px”}; rollover_over_width = {“map_0″:”900px”}; rollover_out_left = {“map_0″:”0px”}; rollover_out_top = {“map_0″:”0px”}; rollover_out_width = {“map_0″:”900px”}; rollover_out_height = {“map_0″:”676px”}; rollover_delay_id1 = {“map_0″:””}; rollover_delay_id2 = {“map_0″:””}; // ============================================================================ function rollover_over(map_id) { if(!(map_id in rollover_over_img)) return; rollover_id = map_id + “_rollover”; document.getElementById(rollover_id).src = rollover_img_folder + rollover_over_img[map_id]; document.getElementById(rollover_id).style.display = “block”; document.getElementById(rollover_id).style.opacity = “1.0”; document.getElementById(rollover_id).style.transform = “rotate(0deg)”; document.getElementById(rollover_id).style.left = rollover_over_left[map_id]; document.getElementById(rollover_id).style.top = rollover_over_top[map_id]; document.getElementById(rollover_id).style.width = rollover_over_width[map_id]; tm_id1 = rollover_delay_id1[map_id]; tm_id2 = rollover_delay_id2[map_id]; if(tm_id1 != “”) { clearTimeout(tm_id1); clearTimeout(tm_id2); rollover_delay_id1[map_id] = “”; rollover_delay_id2[map_id] = “”; } } // ============================================================================ function rollover_down(map_id) { if(!(map_id in rollover_down_img)) return; rollover_id = map_id + “_rollover”; document.getElementById(rollover_id).src = rollover_img_folder + rollover_down_img[map_id]; document.getElementById(rollover_id).style.display = “block”; // ロールオーバーをクリックしたときの回転角を指定しています。回転させない場合は、(0deg) に変更してください。 document.getElementById(rollover_id).style.transform = “rotate(-15deg)”; } // ============================================================================ function rollover_up(map_id) { if(!(map_id in rollover_over_img)) return; rollover_id = map_id + “_rollover”; document.getElementById(rollover_id).src = rollover_img_folder + rollover_over_img[map_id]; document.getElementById(rollover_id).style.display = “block”; document.getElementById(rollover_id).style.transform = “rotate(0deg)”; } // ============================================================================ function rollover_out(map_id) { if(!(map_id in rollover_out_left)) return; rollover_id = map_id + “_rollover”; rollover_delay_id1[map_id] = setTimeout(rollover_out_proc1 , 500, map_id); rollover_delay_id2[map_id] = setTimeout(rollover_out_proc2 , 2000, map_id); } // ============================================================================ function rollover_out_proc1(map_id) { if(!(map_id in rollover_out_left)) return; rollover_id = map_id + “_rollover”; document.getElementById(rollover_id).style.opacity = “0”; document.getElementById(rollover_id).style.left = rollover_out_left[map_id]; document.getElementById(rollover_id).style.top = rollover_out_top[map_id]; document.getElementById(rollover_id).style.width = rollover_out_width[map_id]; } // ============================================================================ function rollover_out_proc2(map_id) { if(!(map_id in rollover_out_left)) return; rollover_id = map_id + “_rollover”; document.getElementById(rollover_id).src = “”; document.getElementById(rollover_id).style.display = “none”; } // ============================================================================ function roll_link(map_id) { rollover_id = map_id + “_rollover”; document.getElementById(rollover_id).style.cursor = “wait”; href_str = document.getElementById(map_id).href; location.href = href_str; } // –>
</script><br />
<!– ============================================================== –></p>
<p>
<style type=”text/css”>
<!– #rollover_img_div img { z-index:1; position:absolute; cursor:pointer; display:none; opacity:0; -moz-transition-property:opacity, left, top, width, height; -webkit-transition-property:opacity, left, top, width, height; -o-transition-property:opacity, left, top, width, height; -ms-transition-property:opacity, left, top, width, height; transition-property:opacity, left, top, width, height; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; -ms-transition-duration:1s; transition-duration:1s; } –><br />
</style>
</p>
<p><br />
<!– ============================================================== –></p>
<div id=”img_map_div” style=”position: relative; z-index: 0; overflow: hidden;”><!– 基本の画像(イメージマップの背景画像)指定箇所です。格納場所が異なる場合は変更してください。 –><br />
<img src=”http://bangkok-pattaya-thailand.com/wp-content/uploads/2016/11/IMG_0107.jpg” usemap=”#map_name” /><br />
<!– –><map name=”map_name”> <!– 以下の [map_xx:ooooo] 部分は、HTML読み込みのときに参照されます。 –><br />
<!– [map_0:1] –><area id=”map_0″ title=”ハッチ1″ coords=”508, 391, 534, 427″ shape=”rect” href=”http://777ena-neko.com” /> </map>
<div id=”rollover_img_div”><img id=”map_0_rollover” style=”left: 0px; top: 0px; width: 900px;” title=”ハッチ1″ border=”0″ /></div>
<p><!– rollover_img_div –></p>
</div>
<p><!– img_map_div –></p>
上のhtmlを実装したのがこちら

I can’t Japanese language so I don’t know what do you want exactly
But I think you do better use css not js
here is my sample code files(html+image+flower image)
(https://drive.google.com/file/d/0B1nNykVI49sWY1BFcWdpWGV1VlE/view?usp=sharing)
// html file code
.img-box{position:relative;}
.img-source{position: absolute; z-index: 10; width:500px;height:400px;}
.img-link-box{position: absolute; top:230px;left:280px; z-index: 20;}
.img-link-box:hover .link-img{visibility: visible}
.link-img{width: 25px; height: 25px; visibility: hidden;}
————————————————-
I enjoy to see your post used google translate <3
素直にfunctions.phpに記述するほうがいいよ。
WordPressのJSは難しいわ。
クリックされたリンクのID拾って画像を入れ替えるだけだろ。
$(‘#mymap’).mouseover(function(){
$(‘#myimg’).attr(‘src’, selectedSrc);
}
このぐらいで目的は達成できるはず。
表示されなければごめんね。
プラグイン実装できました!教えてくださりありがとうございます!こういった知識のある人を尊敬しています!感謝!
こんにちは、大変楽しい記事をいろいろと読ませていただきました。
本職はWEB屋です。
上記の実装の件、メールでご連絡いただければソースをご提供させていただきたく思います。
おお!web屋さん!返信遅れました!この件は解決いたしました!ありがとうございます!