|
EXAMPLE
1) Insert this style command in the
<HEAD> section of the page.
2) Insert these scripts also in the <HEAD> section of the page.
3) Insert the following HTML code anywhere in the
<BODY> section.
4) Finally, insert the following HTML code
in the <BODY> section where you want the rollover buttons to appear in the
page.
This is how the script works:
There are 4 sections in the HTML document:
1) a <STYLE> command section
2) a rollover section
3) a menu section
4) buttons section
In the <STYLE> command section you define the position, colors,
font-family and font size of the dropdown menus:
#Aboutus { left: 111px;
position: absolute; top: 252px; visibility: hidden; z-index: 1 }
#Products { left: 196px; position: absolute; top: 252px;
visibility: hidden; z-index: 1 }
#Promotion { left: 280px; position: absolute; top: 252px;
visibility: hidden; z-index: 1 }
#Support { left: 363px; position: absolute; top: 252px;
visibility: hidden; z-index: 1 }
.menus { color: #666699; font-family: arial, helvetica, 'sans serif';
font-size: 8pt;
text-decoration: none }
.menus:hover { color: #ffffff; background-color: #043365;
font-family:
arial, helvetica, 'sans serif'; font-size: 8pt;
text-decoration: none }
select { font-family: arial, verdana; font-size: 12px }
input.Small { font-family: arial, verdana; font-size: 12px }
input { font-family: arial, verdana; font-size: 12px }
input.Button { font-family: arial, verdana; font-size: 12px }
In the rollover section you define the images
that appear in the onmouseover function:
<SCRIPT language=javascript>
<!--
if (document.images)
{var imglist = new Array (
"rollover_script/aboutuson.jpg"
,
"rollover_script/productson.jpg"
In the menu section you can easily add and delete
any link in a dropdown menu:
<tr>
<td><img alt border="0" height="1" src="rollover_script/line.gif"
width="2"></td>
<td><a class="menus" href="http://planmagic.com"
onmouseout="menuOut('rollimg0')" onmouseover="menuOver('rollimg0')"
target="_top"><b>PlanMagic Corporation</b></a></td>
<td><img alt border="0" height="1" src="rollover_script/line.gif"
width="2"></td>
</tr>
Finally in the last section of the script you
need to define the buttons and assign them to the appropriate dropdown menu:
<a class=bigmenus href="http://planmagic.com/company.html"
onmouseout="btnTimer(), hilite(document.aboutus,0)"
onmouseover="showLayer('Aboutus'), hilite(document.aboutus,0)">
<img name=aboutus src="rollover_script/aboutus.jpg"
border="0" align="bottom" width="81"
height="19"></a>
Notice the parameter "aboutus"
matches in the <STYLE> section (i.e. #Aboutus {LEFT: 111px;
etc..) and in the div id of each menu section (i.e. <div id="Aboutus">
etc..).
A nice little script, isn't
it?
|
