Free Scripts |
|
How to Create Image Rollovers in JavaScript: Step 2
by Christopher Heng
Modifying the Code
You
can modify the code above to add support for other buttons (such as
an "About" button, a "Feedback" button, etc).
To add
support for, say, an "About" button, you would simply have to add an
additional link to the main web document like the following:
<a href="about.html"
onmouseover="buttondown('aboutbutton')"
onmouseout="buttonup('aboutbutton')">
<img src="aboutbutton.gif" name="aboutbutton" border="0">
</a>
Remember that the parameter given to the buttondown() and
buttonup() functions must match the "name" attribute of the IMG tag.
To the initial portion of the JavaScript code in the
HEAD section, just add the following lines to the first "if
(document.images) {" section, following the code for the "home"
buttons:
aboutbuttonup = new Image();
aboutbuttonup.src = "aboutbutton.gif" ;
aboutbuttondown = new Image() ;
aboutbuttondown.src = "aboutbuttondown.gif" ;
The final code snippet for the HEAD section will thus look
like this:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "homebutton.gif" ;
homebuttondown = new Image() ;
homebuttondown.src = "homebuttondown.gif" ;
aboutbuttonup = new Image();
aboutbuttonup.src = "aboutbutton.gif" ;
aboutbuttondown = new Image() ;
aboutbuttondown.src = "aboutbuttondown.gif" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
// -->
</SCRIPT>
Next Step: Modifying the Code: Step 2 >>
|
|
