PDA

Click to See Complete Forum and Search --> : Rollover-HELP

terribrill
06-13-2003, 11:49 PM
Hey!

I'm not really sure what I'm doing but I wanted to try to do a rollover. I've only been doing this for like a week so excuse my ignorance. I am trying to get this rollover to work but when I put my mouse over it, all I get is a box with a red X in it. What am I doin wrong? Do you have any idea's? Thanks...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">

if (document.images) {
rightarrow = new Image
leftarrow = new Image

rightarrow.src = "images/rightarrow.gif"
leftarrow.src = "images/leftarrow.gif"
}
else {
rightarrow = ""
leftarrow = ""
document.images = ""
}
</SCRIPT>
</head>
<body>
<A HREF="index.htm" onMouseover="document.images.src=leftarrow.src" onMouseout="document.images.src=rightarrow.src"><IMG SRC="images.rightarrow.gif" NAME="images" border="0" id="images">
</A>
</body>
</html>
Jona
06-13-2003, 11:53 PM
The code in bold is the code I have changed.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">
if(document.images){
rightarrow = new Image()
leftarrow = new Image()
rightarrow.src = "images/rightarrow.gif"
leftarrow.src = "images/leftarrow.gif"
}
</SCRIPT>
</head>
<body>
<A HREF="index.htm" onMouseover="document.images['imageName'].src=leftarrow.src" onMouseout="document.images['imageName'].src=rightarrow.src"><IMG SRC="images.rightarrow.gif" NAME="imageName" border="0">
</A>
</body>
</html>


Jona
Charles
06-14-2003, 06:11 AM
1) You can simplify things by using the event handlers of the IMG element. (http://www.w3.org/TR/html4/struct/objects.html#edef-IMG)

2) I've corrected a few HTML errors.

3) You don't need to test for the 'document.images' object. It's there, by definition. (http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/document.html#1226315).

4) I've taken the liberty to change your identifier names to keep them consistent with the Java naming conventions which JavaScript follows. (http://java.sun.com/docs/codeconv/html/CodeConventions.doc8.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<script type="text/javascript">

rightArrow = new Image()
leftArrow = new Image()
rightArrow.src = "http://forums.webdeveloper.com/images/profile.gif"
leftArrow.src = "http://forums.webdeveloper.com/images/buddy.gif"

</script>
</head>
<body>
<div><a href="index.htm"><img alt="" src="http://forums.webdeveloper.com/images/profile.gif" border="0" onmouseover="this.src = leftArrow.src" onmouseout="this.src = rightArrow.src"></a></div>
</body>
</html>
terribrill
06-14-2003, 09:20 AM
Thanks Charles and Jona. I got it workin' now...