Image Map - Rollover 2
Basics
Rollover 1
Dynamic Hotspots 1
Dynamic Hotspots 2
Dynamic Hotspots 3
This method overlays the hotpsot image on the default image, css clip is then used to reveal only the part of the image used for the hotspot.
All the examples on this page use the following script.
<script type="text/javascript">
<!--
function clipImage(id,clipTop,clipRight,clipBottom,clipLeft){
document.getElementById(id).style.clip = "rect(" + clipTop + "px " + clipRight + "px " + clipBottom + "px "+clipLeft+"px)"
}
//-->
</script>
<a href="#null" onmouseover="clipImage('imap1',142,129,173,2)" onmouseout="clipImage('imap1',0,0,0,0)">LINK 1</a>
<a href="#null" onmouseover="clipImage('imap1',142,257,173,129)" onmouseout="clipImage('imap1',0,0,0,0)">LINK 2</a>
<div style="position:relative;width:260px;height:175px">
<div style="position:absolute; left:0px; top:0px">
<img src="map_image1.jpg" width="260" height="175" border="0" alt="">
</div>
<div id="imap1" style="position:absolute; left:0px; top:0;clip:rect(0px 0px 0px 0px)">
<img src="map_image2.jpg" width="260" height="175" border="0" alt="">
</div>
</div>
| Action | Effect | Images Used |
| Mouse over the buttons |
|
  |
<div style="position:relative;width:260px;height:175px">
<div style="position:absolute; left:0px; top:0px">
<img src="map_image1.jpg" usemap="#rollovermap2" width="260" height="175" border="0" alt="">
</div>
<div id="imap2" style="position:absolute; left:0px; top:0;clip:rect(0px 0px 0px 0px)">
<img src="map_image2.jpg" usemap="#rollovermap2" width="260" height="175" border="0" alt="">
</div>
</div>
<map name="rollovermap2" onmouseout="clipImage('imap2',0,0,0,0)">
<area shape="rect" coords="2,142,127,173" href="#null" onmouseover="clipImage('imap2',142,129,173,2)">
<area shape="rect" coords="131,142,257,173" href="#null" onmouseover="clipImage('imap2',142,257,173,129)">
</map>
| Action | Effect | Images Used |
| Mouse over the image |
|
  |
<div style="position:relative;width:260px;height:175px">
<div style="position:absolute; left:0px; top:0px">
<img src="map_image1.jpg" usemap="#rollovermap3" width="260" height="175" border="0" alt="">
</div>
<div id="imap3" style="position:absolute; left:0px; top:0;clip:rect(0px 0px 0px 0px)">
<img src="map_image2.jpg" usemap="#rollovermap3" width="260" height="175" border="0" alt="">
</div>
</div>
<map name="rollovermap3" onmouseout="clipImage('imap3',0,0,0,0)">
<area shape="rect" coords="0,0,65,58" href="#null" onmouseover="clipImage('imap3',0,65,58,0)" alt="Link 1">
<area shape="rect" coords="65,0,130,58" href="#null" onmouseover="clipImage('imap3',0,130,58,65)" alt="Link 2">
<area shape="rect" coords="130,0,195,58" href="#null" onmouseover="clipImage('imap3',0,195,58,130)" alt="Link 3">
<area shape="rect" coords="195,0,260,58" href="#null" onmouseover="clipImage('imap3',0,260,58,195)" alt="Link 4">
<area shape="rect" coords="0,58,65,116" href="#null" onmouseover="clipImage('imap3',58,65,116,0)" alt="Link 5">
<area shape="rect" coords="65,58,130,116" href="#null" onmouseover="clipImage('imap3',58,130,116,65)" alt="Link 6">
<area shape="rect" coords="130,58,195,116" href="#null" onmouseover="clipImage('imap3',58,195,116,130)" alt="Link 7">
<area shape="rect" coords="195,58,260,116" href="#null" onmouseover="clipImage('imap3',58,260,116,195)" alt="Link 8">
<area shape="rect" coords="0,116,65,175" href="#null" onmouseover="clipImage('imap3',116,65,175,0)" alt="Link 9">
<area shape="rect" coords="65,116,130,175" href="#null" onmouseover="clipImage('imap3',116,130,175,65)" alt="Link 10">
<area shape="rect" coords="130,116,195,175" href="#null" onmouseover="clipImage('imap3',116,195,175,130)" alt="Link 11">
<area shape="rect" coords="195,116,260,175" href="#null" onmouseover="clipImage('imap3',116,260,175,195)" alt="Link 12">
</map>
The following example uses a third image for a mousedown effect
| Action | Effect | Images Used |
| Mouse over and mouse down in the image |
|
|
<div style="position:relative;width:260px;height:175px">
<div style="position:absolute; left:0px; top:0px">
<img src="map_image1.jpg" usemap="#rollovermap4" width="260" height="175" border="0" alt="">
</div>
<div id="imap4" style="position:absolute; left:0px; top:0;clip:rect(0px 0px 0px 0px)">
<img src="map_image3.jpg" usemap="#rollovermap4" width="260" height="175" border="0" alt="">
</div>
<div id="imap4b" style="position:absolute; left:0px; top:0;clip:rect(0px 0px 0px 0px)">
<img src="map_image2.jpg" usemap="#rollovermap4" width="260" height="175" border="0" alt="">
</div>
</div>
<map name="rollovermap4" onmouseout="clipImage('imap4',0,0,0,0)">
<area shape="rect" coords="0,0,65,58" href="#null" onmouseover="clipImage('imap4',0,65,58,0)" onmousedown="clipImage('imap4b',0,65,58,0)" alt="Link 1">
<area shape="rect" coords="65,0,130,58" href="#null" onmouseover="clipImage('imap4',0,130,58,65)" onmousedown="clipImage('imap4b',0,130,58,65)" alt="Link 2">
<area shape="rect" coords="130,0,195,58" href="#null" onmouseover="clipImage('imap4',0,195,58,130)" onmousedown="clipImage('imap4b',0,195,58,130)" alt="Link 3">
<area shape="rect" coords="195,0,260,58" href="#null" onmouseover="clipImage('imap4',0,260,58,195)" onmousedown="clipImage('imap4b',0,260,58,195)" alt="Link 4">
<area shape="rect" coords="0,58,65,116" href="#null" onmouseover="clipImage('imap4',58,65,116,0)" onmousedown="clipImage('imap4b',58,65,116,0)" alt="Link 5">
<area shape="rect" coords="65,58,130,116" href="#null" onmouseover="clipImage('imap4',58,130,116,65)" onmousedown="clipImage('imap4b',58,130,116,65)" alt="Link 6">
<area shape="rect" coords="130,58,195,116" href="#null" onmouseover="clipImage('imap4',58,195,116,130)" onmousedown="clipImage('imap4b',58,195,116,130)" alt="Link 7">
<area shape="rect" coords="195,58,260,116" href="#null" onmouseover="clipImage('imap4',58,260,116,195)" onmousedown="clipImage('imap4b',58,260,116,195)" alt="Link 8">
<area shape="rect" coords="0,116,65,175" href="#null" onmouseover="clipImage('imap4',116,65,175,0)" onmousedown="clipImage('imap4b',116,65,175,0)" alt="Link 9">
<area shape="rect" coords="65,116,130,175" href="#null" onmouseover="clipImage('imap4',116,130,175,65)" onmousedown="clipImage('imap4b',116,130,175,65)" alt="Link 10">
<area shape="rect" coords="130,116,195,175" href="#null" onmouseover="clipImage('imap4',116,195,175,130)" onmousedown="clipImage('imap4b',116,195,175,130)" alt="Link 11">
<area shape="rect" coords="195,116,260,175" href="#null" onmouseover="clipImage('imap4',116,260,175,195)" onmousedown="clipImage('imap4b',116,260,175,195)" alt="Link 12">
</map>
| Action | Effect | Images Used |
Mouse over the images |
|
 |
<div style="position:relative;width:260px;height:20px">
<div style="position:absolute; left:0px; top:0px">
<img src="map_image1.jpg" usemap="#rollovermap5" width="260" height="20" border="0" alt="">
</div>
<div id="imap5" style="position:absolute; left:0px; top:0;clip:rect(0px 0px 0px 0px)">
<img src="map_image2.jpg" usemap="#rollovermap5" width="260" height="20" border="0" alt="">
</div>
</div>
<map name="rollovermap5" onmouseout="clipImage('imap5',0,0,0,0)">
<area shape="rect" coords="0,0,45,20" href="#null" onmouseover="clipImage('imap5',0,45,20,0)">
<area shape="rect" coords="60,0,107,20" href="#null" onmouseover="clipImage('imap5',0,107,20,60)">
<area shape="rect" coords="120,0,167,20" href="#null" onmouseover="clipImage('imap5',0,167,20,120)">
<area shape="rect" coords="177,0,220,20" href="#null" onmouseover="clipImage('imap5',0,220,20,177)">
</map>