Welcome to the MacNN Forums.

larkost · Dec 23, 2003, 06:10 PM

I was futzing around making a sample rollover code for someone on a mailing list, and went a bit to far with it, so i thought I would post it in a few places so that people could possibly benefit from my wasted time.

This code should work on all major browsers back to (but not including) Netscape 4.x.

So here is the code:

Code:
<! doctype html PUBLIC "-//W3C//DTD xhtml 1.0 Transitional//EN" 
		"http://www.w3.org/TR/ xhtml 1/DTD/ xhtml 1-transitional.dtd">
<html>
<head>
<title>Empty Document</title>
<style>
div.controller {
	height: 40px; width: 70px; background: gray;
}
div.hiddenContent, div.shownContent {
	display: none; width: 390px; height: 190px;
}
div.shownContent {
	display: block; 
}
#containerDiv {
	width: 411px; height: 211px; border: green 1px solid; align: center; padding: 10px;
/* commented backslash hack v2 for MacIE \*/
	width: 390px; height: 190px;
/* end hack */ 
}
img.cacheImage {
	/* this is to make sure the image is cached... a Safari 1.1 issue */
	position: absolute; top: 0px; right:0px; z-index: -7;
}
</style>
<script>
normalColor = "gray";
displayedColor = "yellow";
hilightedColor = "green";

theDivs = Array("red", "blue", "orange");
function showContent(theId) {
	for(i = 0; i < theDivs.length; i++) {
		if (theId == theDivs[i]) {
			document.getElementById(theId).style.display = "block";
			document.getElementById(theId + "Controller2").style.backgroundColor = displayedColor;
			document.getElementById(theId + "Controller").style.backgroundColor = displayedColor;
			document.getElementById('dropDown').selectedIndex = i;
		} else {
			document.getElementById(theDivs[i]).style.display = "none";
			document.getElementById(theDivs[i] + "Controller").style.backgroundColor = normalColor;
			document.getElementById(theDivs[i] + "Controller2").style.backgroundColor = normalColor;
		}
	}
}

function highlight(theId) {
	document.getElementById(theId + "Controller").style.backgroundColor = hilightedColor;
}

function unHighlight(theId) {
	document.getElementById(theId + "Controller").style.backgroundColor = displayedColor;
}

function flashField(theId) {
	flashFieldWork(theId, 0);
}

function flashFieldWork(theId, flashCount) {
	if(flashCount < 4) {
		if (flashCount % 2 == 1) {
			document.getElementById(theId + "Controller2").style.backgroundColor = displayedColor;
		} else {
			document.getElementById(theId + "Controller2").style.backgroundColor = hilightedColor;
		}
		flashCount++;
		setTimeout('flashFieldWork("' + theId + '",'  + flashCount + ')', 150);
	} else {
		flashCount = 0;
	}
}
</script>
</head>
<body>
	<div id="containerDiv" >
		<div id="red" class="hiddenContent" style="background-color: red;" >even images: 
			<img width="316" height= "110"  src="http://www.google.com/logos/winter_holiday_03_1.gif">
		</div>
		<div id="blue" class="shownContent" style="background-color: lightblue;">you can put things in here</div>
		<div id="orange" class="hiddenContent" style="background-color: orange;">and even more</div>
	</div>
	MouseOvers:
	<table><tr>
		<td><div id="redController" class="controller" 
			onMouseOver="showContent('red'); highlight('red')" onMouseOut="unHighlight('red')">
			red
		</div></td>
		<td><div id="blueController" class="controller" 
			onMouseOver="showContent('blue'); highlight('blue')" onMouseOut="unHighlight('blue')">
			blue
		</div></td>
		<td><div id="orangeController" class="controller" 
			onMouseOver="showContent('orange'); highlight('orange')" onMouseOut="unHighlight('orange')">
			orange
		</div></td>
	</tr></table>
	Or the clickable kind:
	<table><tr>
		<td><div id="redController2" class="controller" onClick="showContent('red'); flashField('red')">
			red
		</div></td>
		<td><div id="blueController2" class="controller" onClick="showContent('blue'); flashField('blue')">
			blue
		</div></td>
		<td><div id="orangeController2" class="controller" onClick="showContent('orange'); flashField('orange')">
			orange
		</div></td>
	</tr></table>
	Or a Menu:
	<select id="dropDown" onChange="showContent(this.options[this.selectedIndex].value)">
		<option value="red">Red</option>
		<option value="blue" selected="selected">Blue</option>
		<option value="orange">Orange</option>
	</select>
	<img class="cacheImage" width="1" height="1" src="http://www.google.com/logos/winter_holiday_03_1.gif" alt="" />
</body>
</html>