topical media & game development
graphic-javascript-effect-image-mouseover-effect.htm / htm
<head>
<script>
function update(url,index,isSuper) {
document['PhotoBig'].src=url;
}
</script>
</head>
<body>
<div style="margin-left: 30%;">
<img src="@logo.gif" name="PhotoBig" style="border:1px solid black">
<table>
<tr>
<td>
<a onMouseOver="update('@walk.gif', 0, false); return false;">
<img src="@alchemy.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('@keiko.gif', 1, true); return false;">
<img src="@alchemy.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('@walk.gif', 2, true); return false;">
<img src="@alchemy.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('@logo.gif', 3, true); return false;">
<img src="@alchemy.gif" style="border:1px solid black">
</a>
</td></tr>
<tr>
<td colspan="4" style="text-align: center; font: .8em 'Comic Sans MS', Arial;">
Move the cursor over the images/picture you wish to preview.
</td>
</tr><tr>
<td>
<a onMouseOver="update('images/pic5.gif', 4, true); return false;">
<img src="images/pic5-sm.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('images/pic6.gif', 5, true); return false;">
<img src="images/pic6-sm.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('images/pic7.gif', 6, true); return false;">
<img src="images/pic7-sm.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('images/pic8.gif', 7, true); return false;">
<img src="images/pic8-sm.gif" style="border:1px solid black">
</a>
</td>
</tr>
</table>
</div>
</body>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.