I’m just learning javascript. I need to create an onclick event for a three-state rollover. I just can’t figure out where to place the event. I know it needs to go in my setup rollover function, but can’t figure out where to place it so an alert pops up when one of the buttons is clicked. Anyone have any guidance for me? Thanks!
HTML code is (JS is below and button 1 images attached):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Three-state Rollovers</title>
<script type="text/javascript" src="script03.js"></script>
</head>
<body bgcolor="#FFFFFF">
<a href="next1.html"><img src="http://www.sitepoint.com/forums/images/button1_off.gif" width="113" height="33" border="0" alt="button1" id="button1" /></a>
<a href="next2.html"><img src="http://www.sitepoint.com/forums/images/button2_off.gif" width="113" height="33" border="0" alt="button2" id="button2" /></a>
</body>
</html>
JS code is:
window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.images.length; i++) {
if (document.images[i].parentNode.tagName == "A") {
setupRollover(document.images[i]);
}
}
}
function setupRollover(thisImage) {
thisImage.outImage = new Image();
thisImage.outImage.src = thisImage.src;
thisImage.onmouseout = function() {
this.src = this.outImage.src;
}
thisImage.clickImage = new Image();
thisImage.clickImage.src = "http://www.sitepoint.com/forums/images/" + thisImage.id + "_click.gif";
thisImage.onclick = onclick=alert("You have now clicked");
function() {
this.src = this.clickImage.src;
}
thisImage.overImage = new Image();
thisImage.overImage.src = "http://www.sitepoint.com/forums/images/" + thisImage.id + "_on.gif";
thisImage.onmouseover = function() {
this.src = this.overImage.src;
}
}