パソコン詳しい人助けて！このhtml読んで！

イメージマップ理想

スイカの蜂にリンクがある。

この画像の格納先は「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を実装したのがこちら