I'm trying to use one image map multiple times. The idea is that you've got an picture with image map. You click on one area (there's a highlight on the image map), you get few links, you press one and and the picture is changed. The new picture is using the same image map as the original one (only the colors change in the image). I am trying to do exactly same thing as this link
<html>
<body>
<img src="C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png" class="map" width="453" id="image1" height="453" usemap="#map">
<map name="map">
<area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" width="453" height="453" id="area1"
onmouseover="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch12.png'"
onmouseout="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'"
href="javascript:function(1)"/>
<area shape="poly" coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229" alt="chap11" width="453" height="453"
onmouseover="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch11.png'"
onmouseout="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'"/>
<area shape="poly" coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283,208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,265,298,266,295,276,310,266,309,304,389,285,398,259,404,241,406,210,407,187,402,169,398,152,390,158,373,162,380,203,273,208,268" alt="chap10" width="453" height="453"
onmouseover="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch10.png'"
onmouseout="document.getElementById('image1').src='C:/Users/majgaonkar/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'"/>
</map>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire