Multiple mouse over images?

abishere222 posted this at 19:55 — 9th September 2005.

They have: 1 posts

Joined: Sep 2005

Hi, I am having trouble finding info on how to do this in html. the idea is that i want to have a list of things... and as they are moused over... different pictures pop up in one place....

Fred
Jenny Picture here
Joe
Sam

got any ideas? A while back i had found a website on it.. but now ive gone and lost it... could you help me out? Thx!

JeevesBond posted this at 20:59 — 9th September 2005.

He has: 3,956 posts

Joined: Jun 2002

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.

a Padded Cell our articles site!