pagerunners.com html rollovers x 3

Multiple rollovers on the same page; this example uses the same buttons from the rollover example, however, the initial rollover effect onMouseover triggers an image swap in another location. A transparent "placeholder" .gif image is swapped out as the mouse passes over the buttons. Try it....

Source code:

<script LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
	<!-- Hide script from old browsers

if (document.images) {
		cobraText = new Image
		mustangText = new Image
		blankText = new Image
		svtText = new Image

cobraText.src = "scene2a.jpg"
		mustangText.src = "scene3a.jpg"
		blankText.src = "pixel.gif"
		svtText.src = "scene1a.jpg"

cobraOff = new Image
		mustangOff = new Image
		svtOff = new Image
		cobraOn = new Image
		mustangOn = new Image
		svtOn = new Image

cobraOff.src = "cool1.gif"
		mustangOff.src = "bert1.gif"
		svtOff.src = "mad1.gif"
		cobraOn.src = "cool2.gif"
		mustangOn.src = "bert2.gif"
		svtOn.src = "mad2.gif"
	}

function chgImg(imgField,newImg) {
		if (document.images) {
			document[imgField].src= eval(newImg + ".src")
		}
	}

// End hiding script from old browsers -->
	</SCRIPT>

<table cellpadding=0 cellspacing=0>
<tr VALIGN=TOP>
<td><a HREF="index.htm" onMouseover="chgImg('cobraImg','cobraOn');chgImg('textField','cobraText')" onMouseout="chgImg('cobraImg','cobraOff');chgImg('textField','blankText')"><img SRC="cool1.gif" WIDTH=140 HEIGHT=25 BORDER=0 NAME="cobraImg"></a><br><a HREF="index.htm" onMouseover="chgImg('mustangImg','mustangOn');chgImg('textField','mustangText')" onMouseout="chgImg('mustangImg','mustangOff');chgImg('textField','blankText')"><img SRC="bert1.gif" WIDTH=140 HEIGHT=25 BORDER=0 NAME="mustangImg"></a><br><a HREF="index.htm" onMouseover="chgImg('svtImg','svtOn');chgImg('textField','svtText')" onMouseout="chgImg('svtImg','svtOff');chgImg('textField','blankText')"><img SRC="mad1.gif" WIDTH=140 HEIGHT=25 BORDER=0 NAME="svtImg"></a></td>
</tr>
<tr>

HTML Tips n' Tricks