Basics Rollover 2 Dynamic Hotspots 1 Dynamic Hotspots 2 Dynamic Hotspots 3
Mouse over the buttons
To create the above rollover effect the following 3 images were used.
|
 |
 |
| Default Image | Button 1 | Button 2 |
Because the hot spots remain in the same position the image is simply swapped when the mouse is over a button.
<script type="text/javascript">
<!--
var defaultImg = new Image()
defaultImg.src = "default.jpg"
var img1 = new Image()
img1.src = "button1.jpg"
var img2 = new Image()
img2.src = "button2.jpg"
function roll(dir){
document.getElementById("themap").src=window[dir].src
}
//-->
</script>
<img src="default.jpg" alt="" border="0" usemap="#rollovermap" id="themap">
<map name="rollovermap">
<area shape="rect" coords="2,142,127,173" href="#null" onmouseover="roll('img1')" onmouseout="roll('defaultImg')">
<area shape="rect" coords="131,142,257,173" href="#null" onmouseover="roll('img2')" onmouseout="roll('defaultImg')">
</map>
This example uses a single image.
The image is nested in a div with a specific width and height, the image is then positioned within the div to show the respective highlight.
| Action | Effect | Image Used |
| Mouse over the links |
|
|
<script type="text/javascript">
<!--
function moveImage(pos){
document.getElementById("imap6Pic").style.top= pos+"px"
}
//-->
</script>
<style>
#imap6{
position:relative;
width:220px;
height:20px;
overflow:hidden;
}
</style>
<div id="imap6">