Forum Moderators: open
I created this text from a smaller version that runs fine. When I run my code in Firefox, I get an JavaScript Console error message that the button has no properties. In IE, it says 'document.button1 is not null or not an object'.
Can someone help me please?
Thanks, Diana
<head>
<title>Simple Rollovers</title>
<script type="text/javascript">
if (document.images) {
buttonBirth = new Image
buttonBirthOver = new Image
buttonLife = new Image
buttonLifeOver = new Image
buttonArt = new Image
buttonArtOver = new Image
buttonGuest = new Image
buttonGuestOver = new Image
buttonHome = new Image
buttonHomeOver = new Image
buttonBirth.src = "images/birth.gif"
buttonBirthOver.src = "images/birthOver.gif"
buttonLife.src = "images/life.gif"
buttonLifeOver.src = "images/lifeOver.gif"
buttonArt.src = "images/art.gif"
buttonArtOver.src = "images/artOver.gif"
buttonGuest.src = "images/guest.gif"
buttonGuestOver.src = "images/guestOver.gif"
buttonHome.src = "images/home.gif"
buttonHomeOver.src = "images/homeOver.gif"
}
else {
buttonBirth = ""
buttonBirthOver = ""
buttonLife = ""
buttonLifeOver = ""
buttonArt = ""
buttonArtOver = ""
buttonGuest = ""
buttonGuestOver = ""
buttonHome = ""
buttonHomeOver = ""
document.button1 = ""
document.button2 = ""
document.button3 = ""
document.button4 = ""
document.button5 = ""
}
</script>
</head>
<body bgcolor="#FFFFCC">
<a href="#" onmouseover="document.button1.src=buttonBirthOver.src" onmouseout="document.button1.src=buttonBirth.src"><img src="images/birth.gif" alt="Birth" name="birth" width="101" height="48" border="0" /></a>
<a href="#" onmouseover="document.button2.src=buttonLifeOver.src" onmouseout="document.button2.src=buttonLife.src"><img src="images/life.gif" alt="Life" name="life" width="101" height="48" border="0" /></a>
<a href="#" onmouseover="document.button3.src=buttonArtOver.src" onmouseout="document.button3.src=buttonArt.src"><img src="images/art.gif" alt="Art" name="art" width="73" height="48" border="0" /></a>
<a href="#" onmouseover="document.button4.src=buttonGuestOver.src" onmouseout="document.button4.src=buttonGuest.src"><img src="images/guest.gif" alt="Guestbook" name="guest" width="150" height="48" border="0" /></a>
<a href="#" onmouseover="document.button5.src=buttonHomeOver.src" onmouseout="document.button5.src=buttonHome.src"><img src="images/home.gif" alt="Home" name="home" width="94" height="48" border="0" /></a>
</body>
</html>
First, let me say that you should be using CSS for this instead of JavaScript.
However, if you're determined to use JavaScript for it...
The problem is that there is no object "button1" in your document defined. So when you try and call document.button1.src, you're trying to set a property on an object that doesn't exist. Perhaps instead you are intending to do this:
document.birth.src=...
Next, you should consider using unobtrusive JavaScript. Instead of cluttering up your markup with all those onmouse#*$!X event handlers, you could attach the event handlers in the head of your document.
