|
EXAMPLE
Mouseover the images below and the
menu on the left to see the rollover at work.
1) Insert this script in the <HEAD> section of the page.
2) Insert this HTML code in the <BODY> section
where you want the rollover buttons to appear in the page.
3) Insert the following HTML code in the <BODY> section
where you want the images linked to the rollover to appear in the page.
4) Define the images for the rollover
buttons in
this section of the script:
oneon = new Image(24,119);
oneon.src = "images/image1_on.gif";
oneoff = new Image(24,119);
oneoff.src = "images/image1_off.gif";
twoon = new Image(24,119);
twoon.src = "images/image2_on.gif";
twooff = new Image(24,119);
twooff.src = "images/image2_off.gif";
5) Assign the rollover, the URL to each
button, the message for the status bar and other variables in this section of
the HTML code:
<tr><td>
<a onmouseover="img_act('one');window.status='PlanMagic
Corporation';return true;"
onmouseout="img_inact('one');window.status=' ';return true;" href="http://planmagic.com">
<img alt="PlanMagic Corporation" src="images/image1_off.gif" border="0"
name="one"></a><br>
</td></tr>
<tr><td>
<a onmouseover="img_act('two');window.status='PlanMagic
Business';return true;"
onmouseout="img_inact('two');window.status=' ';return true;" href="http://planmagic.com/business_planning.html">
<img alt="PlanMagic Business" src="images/image2_off.gif" border="0"
name="two"></a><br>
6) Finally define these variables for
the extra images linked to the rollover in
this section of the HTML code:
<a href="http://planmagic.com"
onmouseover="img_act('one');window.status='PlanMagic
Corporation';return true;"
onmouseout="img_inact('one');window.status=' ';return true;">
<img alt="PlanMagic Corporation" src="images/plm-2.gif" border="0"></a>
<a href="http://planmagic.com/business_planning.html"
onmouseover="img_act('two');window.status='PlanMagic Business';return true;"
onmouseout="img_inact('two');window.status=' ';return true;">
<img src="images/headplmb.gif" border="0"></a></td>
You can also download
this ZIP file including the images we've made to help you with the script. Extract the ZIP file into the
desired directory.
|
