|
EXAMPLE
1) Insert this script in the <HEAD> section of the page.
2) Insert the following HTML code in the
<BODY> section where you want the rollover buttons to appear in the page.
3) Insert the onload event handler inside the <BODY> tag as follows:
<body
onload="imgStart();",
followed by all other tags such as bgcolor, etc..
4) Define the images and their location
in this section of the script:
if ( x == 1 )
{
self.document.b1.src='rollover/aboutus2.gif';
self.document.b11.src='rollover/contact.gif';
}
else if ( x == 2 )
{
self.document.b2.src='rollover/products2.gif';
self.document.b1.src='rollover/aboutus.gif';
}
And in this section of the HTML code:
<a onmouseover="self.document.b1.src='rollover/aboutus2.gif';"
onmouseout="self.document.b1.src='rollover/aboutus.gif';" href="http://planmagic.com"><img
src="rollover/aboutus.gif" border="0" name="b1"></a>
<a onmouseover="self.document.b2.src='rollover/products2.gif';"
onmouseout="self.document.b2.src='rollover/products.gif';"
href="products.html"><img src="rollover/products.gif" border="0" name="b2"></a>
5) Define the speed of the animation in
this section of the script:
setTimeout("imgStart();",1000);
// the smaller the value the faster the speed
6) Carefully modify these parameters to
adjust the number of rollover images in this section of the script:
Below is an example with 9 rollover images instead
of 10 (as in the example above):
if ( x == 1 )
{
self.document.b1.src='rollover/aboutus2.gif';
self.document.b10.src='rollover/toolkit.gif'; // the last button (9)
etc..
else if ( x == 9 )
{
self.document.b9.src='rollover/default2.gif';
// default2.gif is not a rollover image but a
fictitious name
self.document.b8.src='rollover/affiliates.gif';
// the button 8 (affiliates.gif) is repeated
below
}
else if ( x == 10 )
{
self.document.b10.src='rollover/toolkit2.gif';
// the last button (9)
self.document.b8.src='rollover/affiliates.gif';
}
if ( ++x > 10 ) x=1;
// number of rollover images (9) + 1 = 10
if ( x == 9 ) x = 10;
// number of rollover images (9),
and 9 + 1 = 10
In the last button of the HTML code section note
that the parameter is "b10" instead of "b9".
<a onmouseover="self.document.b8.src='rollover/affiliates2.gif';"
onmouseout="self.document.b8.src='rollover/affiliates.gif';"
href="http://planmagic.com/"><img src="rollover/affiliates.gif"
name=b8></A>
<a onmouseover="self.document.b10.src='rollover/toolkit2.gif';"
onmouseout="self.document.b10.src='rollover/toolkit.gif';"
href="http://planmagic.com/toolkit/toolkit.html"><img src="rollover/toolkit.gif"
name=b10></A>
You can download this ZIP file with the
images we've made to help you with the script.
|
