Тег MAP.

Четыре ссылки на картинке. Code:

Необходимо заранее сделать заготовки - 6 картинок.

1. d1.png

2. d2.png

3. d3.png

4. d4.png

5. img1.png

6. img2.png

      <html>
<style>
.img1{
   position:absolute;
   left:0px;
   top:0px;
   z-index:1;
   width:200px;
   height:200px;
   background-color:transparent;
   border-style:none;
   border-width:0px;
   border-color:red;
}
.div0{
   position:absolute;
   left:0px;
   top:0px;
   z-index:2;
   width:200px;
   height:200px;
   background-color:transparent;
   border-style:none;
   border-width:0px;
   border-color:cyan;
}
.img2{
   position:absolute;
   left:0px;
   top:0px;
   z-index:3;
   width:200px;
   height:200px;
   background-color:transparent;
   border-style:none;
   border-width:0px;
   border-color:green;
}
.d1, .d2, .d3, .d4{
   visibility:hidden;
   position:absolute; 
   left:0px; 
   top:0px;
   width:200px; 
   height:200px; 
   border-width:0px;
}
</style>
<body>

<div id="img2" class="img2">
   <img src="img2.png" style="position:absolute; left:0px; top:0px; width:200px; height:200px;" usemap="#img2">
        <map name="img2">
        <AREA id="d1_" target=_blank href="#" title="&quot;1_Ссылка&quot;" alt="&quot;1_Ссылка&quot;" shape="poly"   coords="45,23,77,58,12,76"                  onMouseOver="show(this)" onMouseOut="hide(this)" onFocus="show(this)" onBlur="hide(this)">
        <AREA id="d2_" target=_blank href="#" title="&quot;2_Ссылка&quot;" alt="&quot;2_Ссылка&quot;" shape="circle" coords="154,50,22"                          onMouseOver="show(this)" onMouseOut="hide(this)" onFocus="show(this)" onBlur="hide(this)">
        <AREA id="d3_" target=_blank href="#" title="&quot;3_Ссылка&quot;" alt="&quot;3_Ссылка&quot;" shape="poly"   coords="30,131,74,131,74,171,30,171,30,131" onMouseOver="show(this)" onMouseOut="hide(this)" onFocus="show(this)" onBlur="hide(this)">
        <AREA id="d4_" target=_blank href="#" title="&quot;4_Ссылка&quot;" alt="&quot;4_Ссылка&quot;" shape="poly"   coords="145,131,170,153,151,188,128,160"    onMouseOver="show(this)" onMouseOut="hide(this)" onFocus="show(this)" onBlur="hide(this)">
        </map>
</div>

<div id="div0" class="div0">
   <div class="d1" id="d1" style="background:URL(d1.png);"></div>
   <div class="d2" id="d2" style="background:URL(d2.png);"></div>
   <div class="d3" id="d3" style="background:URL(d3.png);"></div>
   <div class="d4" id="d4" style="background:URL(d4.png);"></div>
</div>

<div id="img1" class="img1">
   <img src="img1.png" style="position:absolute; left:0px; top:0px; width:200px; height:200px;">
</div>
<script language="JavaScript">
   function show(obj){window.document.getElementById(obj.id.replace("_","")).style.visibility="visible";}
   function hide(obj){document.getElementById(obj.id.replace("_","")).style.visibility="hidden";}
</script>
</body>
</html>
Оставить запись с благодарностью..