Home » Webmaster Tools and Resources » Software & Scripts » JavaScript » Image Effects » [*TITLE HERE*]

Picture Rollover Script

Picture rollover. Moving cursor over the picture affects on other images.

Sample:

Insert this code before </head>

<script type="text/javascript">
if (document.images) {
	a_1 = new Image;
	a_1.src = "a_1.gif";
	a_2 = new Image;
	a_2.src = "a_2.gif";
	a_3 = new Image;
	a_3.src = "a_3.gif"
	a_4 = new Image;
	a_4.src = "a_4.gif";

	b_1 = new Image;
	b_1.src = "b_1.gif";
	b_2 = new Image;
	b_2.src = "b_2.gif"
	b_3 = new Image;
	b_3.src = "b_3.gif";
	b_4 = new Image;
	b_4.src = "b_4.gif";
}

function showImg(imgname, rollname)
{
	if (document.images) {
		window.onerror = null;
		document.getElementById(rollname).src=eval(imgname + ".src");
	}
}

</script>

Insert this code before </body>

<table border="0" cellpadding="0" cellspacing="0" width="85%">
		<tr>
			<td valign="top" width="74">
				<table border="0" cellpadding="3" cellspacing="0" width="100%" id="rolllist">
					<tr>
						<td><a href="#" onmouseover="showImg('a_1','roll_a');showImg('b_1','roll_b')"><img src="m1.gif" width="74" height="18" border="0"></a></td>
					</tr>
					<tr>
						<td><a href="#" onmouseover="showImg('a_2','roll_a');showImg('b_2','roll_b')"><img src="m2.gif" width="74" height="18" border="0"></a></td>
					</tr>
					<tr>
						<td><a href="#" onmouseover="showImg('a_3','roll_a');showImg('b_3','roll_b')"><img src="m3.gif" width="74" height="18" border="0"></a></td>
					</tr>
					<tr>
						<td><a href="#" onmouseover="showImg('a_4','roll_a');showImg('b_4','roll_b')"><img src="m4.gif" width="74" height="18" border="0"></a></td>
					</tr>
				</table>
			</td>
			<td align="center" width="426" valign="center" align="center">
				<img src="a_blank.gif" id="roll_a">
			</td>
			<td valign="top" valign="center" align="left">
				<br><img src="b_blank.gif" id="roll_b">
			</td>
		</tr>
	</table>

Modify the table style to fit you website.

Related Resources: