JeevesBond — Fri, 09 Sep 2005 20:59:32 +0000

Funny, reminds me of a site was working on a while ago:
http://www.intermedia-online.com/clients/sonas/index3.html

Take a look at that and use what you need. The important bits to note are:

<div id="menu1" class="rollover"><img src="images/testrollover.gif" alt="Test Rollover" width="130" height="130" /></div>
	<div id="menu2" class="rollover"><img src="images/testrollover2.gif" alt="Test Rollover" width="130" height="130" /></div>
	<div id="menu3" class="rollover"><img src="images/testrollover3.gif" alt="Test Rollover" width="130" height="130" /></div>
	<div id="menu4" class="rollover"><img src="images/testrollover4.gif" alt="Test Rollover" width="130" height="130" /></div>
	<div id="menu5" class="rollover"><img src="images/testrollover5.gif" alt="Test Rollover" width="130" height="130" /></div>

And...

<a href="index.html" onmouseover="_showlayer('menu1')" onmouseout="_hidelayer('menu1')"><span class="acurrent">menu1</span></a> | 
	<a href="#" onmouseover="_showlayer('menu2')" onmouseout="_hidelayer('menu2')">menu2</a> | 
	<a href="#" onmouseover="_showlayer('menu3')" onmouseout="_hidelayer('menu3')">menu3</a> | 
	<a href="#" onmouseover="_showlayer('menu4')" onmouseout="_hidelayer('menu4')">menu4</a> | 
	<a href="#" onmouseover="_showlayer('menu5')" onmouseout="_hidelayer('menu5')">menu5</a>

Then the JS itself is:

&lt;script type="text/JavaScript"&gt;
<!--
	//Needs to be changed for each page, used as page identifier for JavaScript.
var curpage = "menu1";
function _showlayer(layername) {
	if(document.getElementById) {
		var obj;
		obj = document.getElementById(layername);
		if(obj.style) {
			obj.style.visibility = "visible";
		}
	}
}
function _hidelayer(layername) {
		if(document.getElementById) {
		var obj;
		obj = document.getElementById(layername);
		if(obj.style) {
			if(curpage != layername) {	//Do not hide current page's image layer.
				obj.style.visibility = "hidden";
			}
		}
	}
}
//-->
&lt;/script&gt;

The first bit is the images, these are absolutely positioned using CSS:

.rollover {
	position:absolute;
	left:85px;
	top:46px;
	width:130px;
	height:130px;
	visibility: hidden;
	border: 0px;
}

There are different ways of doing this, so if anyone knows better feel free to say so!

Then the JS script makes them visible/invisible according to what menu item you're hovering over.

Hope this helps.