Free Scripts |
|
How to Create Image Rollovers in JavaScript: Step 1
by Christopher Heng
When your mouse moves over the link above, the JavaScript
snippet above will attempt to execute the function buttondown().
When your mouse moves away, the function buttonup() will be
executed.
Now you need to add the called JavaScript
functions to your web page. Add the following code to the
<HEAD> section of your HTML document.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "homebutton.gif" ;
homebuttondown = new Image() ;
homebuttondown.src = "homebuttondown.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>
The initial code pre-loads the "home" button images needed
for the page, so that the actual roll-over switch of images will
proceed faster on your visitor's browser.
The function
buttondown() and buttonup() modifies the name of the button that is
passed to them. If you will recall, the name attribute on the IMG
tag was originally set to "homebutton". When this is passed to the
buttondown() function, it changes the reference to
"homebuttondown.src" which was defined earlier to point to the file
"homebuttondown.gif". Likewise, the buttonup() function, when called
changes the name passed to it to "homebutton.src", which was defined
to refer to "homebutton.gif".
The end result of the
foregoing is that when the mouse moves over the "Home" button, the
JavaScript function causes the "homebuttondown.gif" file to be
displayed. When it moves away, the "homebutton.gif" file is used.
Next Step: Modifying the Code
>>
Copyright 2001 by Christopher Heng.
All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/
|
|
