Simple Prototype image rollover
This code shows how easy it is to create a simple unobtrusive image rollover and image swap using the Prototype library.
View as text
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>untitled</title>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
</head>
<body id="untitled" onload="">
<div id="thumbnaillvl1">
<ul>
<li><a class="imageSwap" href="Images/HFA.jpg"><img src="Images/HFAth.jpg" alt="" /></a></li>
<li><a class="imageSwap" href="Images/HFA1.jpg"><img src="Images/HFA1th.jpg" alt="" /></a></li>
<li><a class="imageSwap" href="Images/HFA2.jpg"><img src="Images/HFA2th.jpg" alt="" /></a></li>
<li><a class="imageSwap" href="Images/HFA3.jpg"><img src="Images/HFA3th.jpg" alt="" /></a></li>
<li><a class="imageSwap" href="Images/HFA4.jpg"><img src="Images/HFA4th.jpg" alt="" /></a></li>
</ul>
</div>
<div id="thumbnaillvl2">
<ul>
<li><a class="imageSwap" href="Images/HFA5.jpg"><img src="Images/HFA5th.jpg" alt="" /></a></li>
<li><a class="imageSwap" href="Images/HFA6.jpg"><img src="Images/HFA6th.jpg" alt="" /></a></li>
</ul>
</div>
<img id="mainImage" src="Images/HFA.jpg"/>
<script type="text/javascript" charset="utf-8">
function addHovers() {
var links = $$('a.imageSwap');
links.each(function(link) {
link.observe('mouseover', function(event) {
var main_image = $("mainImage");
main_image.src = link.href;
})
});
};
addHovers();
</script>
</body>
</html>