Tutorial
Click on thumbnailed images to enlarge
I'm basically copying and pasting this from another thread, because I've typed it up at least twice now, so I decided I'd make a tutorial. This will show you how to make image rollovers without using a hundred different images - just two, one for normal and one for the rollovers.
I'll be using these images as an example. The first is my fake navigation bar as it is normally. The second image is what it would look like if I was somehow able to hover over all three at once. :P
Step One - The Script;
This will tell the browser.. well basically, that there will be an image swap.
Really you need all that code. If you're familiar with javascript, it all makes a bit more sense, but that's basically it for the script.
Step Two - Position the Images;
You need to use absolute DIV positioning to put the images right on top of each other. So if that's not implemented into your layout, it needs to be. :P Here's my code:
Change those values as needed of course. You should have at least a basic understanding of how DIV positioning works, but basically make the top and left numbers bigger to move it down or to the right, and change the width and height to be the same as the images.
Step Three - The Image Map;
In the last step, you may have noticed that my code defined an image map. Of course! How else would you put links on the images? This is the part of the code that tells the browser what part to make links, and at the same time the script understands it as taking just that part of the image and swapping it with the rollover. Make sense? No? Here's the code anyway:
*phew* That's it! I know it seems like a lot, but if you mess with it you'll kinda see it all come together.
And I uploaded it so you can see a preview:
[link]
I'll be using these images as an example. The first is my fake navigation bar as it is normally. The second image is what it would look like if I was somehow able to hover over all three at once. :P
Step One - The Script;
This will tell the browser.. well basically, that there will be an image swap.
<html>
<head>
</head>
<script>
function initMaps() {
if (document.getElementById) {
var mapIds = initMaps.arguments;
var i, j, area, areas;
for (i = 0; i < mapIds.length; i++) {
areas = document.getElementById(mapIds[i]).getElementsByTagName("area");
for (j = 0; j < areas.length; j++) {
area = areas[j];
area.onmouseout = imgSwap;
area.onmouseover = imgSwap;
area.onmouseup = imgSwap;
}
}
}
}
function imgSwap(evt) {
evt = (evt) ? evt : event;
var elem = (evt.target) ? evt.target : evt.srcElement;
var imgClass = elem.parentNode.name;
var coords = elem.coords.split(",");
var clipVal = "rect(" + coords[1] + "px " +
coords[2] + "px " +
coords[3] + "px " +
coords[0] + "px)";
var imgStyle;
switch (evt.type) {
case "mouseout" :
document.getElementById(imgClass + "Over").style.visibility = "hidden";
document.getElementById(imgClass + "Down").style.visibility = "hidden";
break;
case "mouseover" :
imgStyle = document.getElementById(imgClass + "Over").style;
imgStyle.clip = clipVal;
imgStyle.visibility = "visible";
break
case "mouseup" :
document.getElementById(imgClass + "Down").style.visibility = "hidden";
if (elem.click) {
elem.click();
}
break;
}
evt.cancelBubble = true;
return false;
}
</script>
<head>
</head>
<script>
function initMaps() {
if (document.getElementById) {
var mapIds = initMaps.arguments;
var i, j, area, areas;
for (i = 0; i < mapIds.length; i++) {
areas = document.getElementById(mapIds[i]).getElementsByTagName("area");
for (j = 0; j < areas.length; j++) {
area = areas[j];
area.onmouseout = imgSwap;
area.onmouseover = imgSwap;
area.onmouseup = imgSwap;
}
}
}
}
function imgSwap(evt) {
evt = (evt) ? evt : event;
var elem = (evt.target) ? evt.target : evt.srcElement;
var imgClass = elem.parentNode.name;
var coords = elem.coords.split(",");
var clipVal = "rect(" + coords[1] + "px " +
coords[2] + "px " +
coords[3] + "px " +
coords[0] + "px)";
var imgStyle;
switch (evt.type) {
case "mouseout" :
document.getElementById(imgClass + "Over").style.visibility = "hidden";
document.getElementById(imgClass + "Down").style.visibility = "hidden";
break;
case "mouseover" :
imgStyle = document.getElementById(imgClass + "Over").style;
imgStyle.clip = clipVal;
imgStyle.visibility = "visible";
break
case "mouseup" :
document.getElementById(imgClass + "Down").style.visibility = "hidden";
if (elem.click) {
elem.click();
}
break;
}
evt.cancelBubble = true;
return false;
}
</script>
Really you need all that code. If you're familiar with javascript, it all makes a bit more sense, but that's basically it for the script.
Step Two - Position the Images;
You need to use absolute DIV positioning to put the images right on top of each other. So if that's not implemented into your layout, it needs to be. :P Here's my code:
<div style="position:relative">
<img id="menubarUp" src="nav1.gif" height="18" width="127" alt="menubar"
border="0" style="position:absolute; top:0px; left:0px;
visibility:visible" usemap="#menubar" />
<img id="menubarOver" src="nav2.gif" height="18" width="127" alt="menubar"
border="0" style="position:absolute; top:0px; left:0px;
visibility:hidden" usemap="#menubar" />
</div>
<img id="menubarUp" src="nav1.gif" height="18" width="127" alt="menubar"
border="0" style="position:absolute; top:0px; left:0px;
visibility:visible" usemap="#menubar" />
<img id="menubarOver" src="nav2.gif" height="18" width="127" alt="menubar"
border="0" style="position:absolute; top:0px; left:0px;
visibility:hidden" usemap="#menubar" />
</div>
Change those values as needed of course. You should have at least a basic understanding of how DIV positioning works, but basically make the top and left numbers bigger to move it down or to the right, and change the width and height to be the same as the images.
Step Three - The Image Map;
In the last step, you may have noticed that my code defined an image map. Of course! How else would you put links on the images? This is the part of the code that tells the browser what part to make links, and at the same time the script understands it as taking just that part of the image and swapping it with the rollover. Make sense? No? Here's the code anyway:
<map id="menubarMap" name="menubar">
<area shape=rect COORDS="2,2,34,16" href="link1.html" >
<area shape=rect COORDS="37,2,90,16" href="link2.html" >
<area shape=rect COORDS="91,2,126,17" href="link3.html" >
</MAP>
</map>
</html>
<area shape=rect COORDS="2,2,34,16" href="link1.html" >
<area shape=rect COORDS="37,2,90,16" href="link2.html" >
<area shape=rect COORDS="91,2,126,17" href="link3.html" >
</MAP>
</map>
</html>
*phew* That's it! I know it seems like a lot, but if you mess with it you'll kinda see it all come together.
And I uploaded it so you can see a preview:
[link]
Tutorial Comments
Showing latest 1 of 1 comments
that sounds good...and the uploaded example link thingy is a nice thing too, but is it possible to simply show us the whole code, as one, ready to go, as has been used for that example..? (everyone has their own way of explaining things..) thanks.
By edgucewicz on Mar 24, 2008 12:45 pm
Tutorial Details
| Author |
souperstition
|
| Submitted on | Feb 11, 2006 |
| Page views | 12,128 |
| Favorites | 12 |
| Comments | 1 |