|
EXAMPLE
1) Insert this code in the <HEAD> section of the page.
2) Insert this HTML code anywhere inside
the <BODY> section of your page.
3) Insert the following HTML code in the
<BODY> section where you want the rollover buttons to appear in the page.
4) Insert the onload event handler inside the
<BODY> tag as follows:
<body
onload="preloadImages('images/button1_on.gif','images/button2_on.gif','images/button3_on.gif',
'images/button4_on.gif')", followed by
other tags such as bgcolor, etc..
This is how the script works:
There are 3 sections in this script:
1) a <STYLE> command section
2) a menu section
3) a buttons section
1) In the <STYLE> section define the
font family, font size and the color of the links in the popup menus and the ID name to each menu and
submenu:
<style>
<!--
.rollmenu { COLOR: #000000; FONT-FAMILY: "Arial", "Helvetica",
"sans-serif"; FONT-SIZE: 12px; TEXT-DECORATION: none }
.rollmenu:hover { COLOR: #CC3333; TEXT-DECORATION: underline }
#menu1 { LEFT: 1px; POSITION: absolute; TOP: 1px; VISIBILITY: hidden }
#menu2 { LEFT: 1px; POSITION: absolute; TOP: 1px; VISIBILITY: hidden }
#menu3 { LEFT: 1px; POSITION: absolute; TOP: 1px; VISIBILITY: hidden }
#submenu1 { LEFT: 1px; POSITION: absolute; TOP: 1px; VISIBILITY: hidden }
#submenu3 { LEFT: 1px; POSITION: absolute; TOP: 1px; VISIBILITY: hidden }
-->
</style>
2) In each <DIV>..</DIV> section define the
menu name, the tables, the
position of the popup menus and submenus in the page and the links to appear in the
menus:
<DIV id=menu1
onmouseout="showHideLayers('menu1','','hide'),swapImgRestore()"
onmouseover="showHideLayers('menu1','','show'),swapImage('Button1','','images/button1_on.gif',1)"
style="BACKGROUND-COLOR: #FFFFFF; LEFT: 285px; TOP: 200px; VISIBILITY: hidden; WIDTH:
160px" name="menu1">
<LAYER
onmouseout="showHideLayers('menu1','','hide'),swapImgRestore()"
onmouseover="showHideLayers('menu1','','show'),swapImage('Button1','','images/button1_on.gif',1)"
width="160" bgcolor="#FFFFFF">
<TABLE bgColor=#FFFFFF border=0 cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD bgColor=#000000 rowSpan=8 width=1><IMG height=1 src="images/blank.gif" width=1></TD>
<TD><IMG height=8 src="images/blank.gif" width=8></TD>
<TD><A class=rollmenu href="http://planmagic.com">Home page</A></TD></TR>
<TR>
<TD><IMG height=8 src="images/blank.gif" width=8></TD>
<TD noWrap><A class=rollmenu href="http://planmagic.com/products.html"
onmouseout="showHideLayers('submenu1','','hide')"
onmouseover="showHideLayers('submenu1','','show')">
<B>Products</B><IMG align=absMiddle border=0 height=14
hspace=3 src="images/arrow.gif" width=50></A>
</TD></TR>
</TBODY></TABLE>
</LAYER>
</DIV>
// The submenu
<DIV id=submenu1
onmouseout="showHideLayers('submenu1','','hide','menu1','','hide'),swapImgRestore()"
onmouseover="showHideLayers('submenu1','','show','menu1','','show'),swapImage('Button1','','images/button1_on.gif',1)"
style="BACKGROUND-COLOR: #FFFFFF; LEFT: 395px; TOP: 210px; VISIBILITY: hidden; WIDTH:
85px" name="submenu1">
<LAYER
onmouseout="showHideLayers('submenu1','','hide','menu1','','hide'),swapImgRestore()"
onmouseover="showHideLayers('submenu1','','show','menu1','','show'),swapImage('Button1','','images/button1_on.gif',1)"
width="85" bgcolor="#FFFFFF">
<TABLE border=0 cellPadding=0 cellSpacing=0 width=160>
<TBODY>
<TR>
<TD bgColor=#000000 width=1><IMG height=1 src="images/blank.gif" width=1></TD>
<TD><IMG height=8 src="images/blank.gif" width=8></TD>
<TD> <A class=rollmenu href="http://planmagic.com/business_planning.html">PlanMagic Business<BR></A>
<A class=rollmenu href="http://planmagic.com/marketing_planning.html">PlanMagic Marketing<BR></A>
</TD></TR></TBODY></TABLE></LAYER></DIV>
3) In the buttons section define the rollover
images and the call to the appropriate popup menu in this
section of the HTML code:
<tr><td>
<A href="http://planmagic.com"
onmouseout="swapImgRestore();showHideLayers('menu1','','hide')"
onmouseover="swapImage('Button1','','images/button1_on.gif',1);showHideLayers('menu1','','show')"?><IMG
border=0 name=Button1 src="images/button1_off.gif"></A></td></tr>
<tr><td>
<A href="http://webquestpro.com"
onmouseout="swapImgRestore();showHideLayers('menu2','','hide')"
onmouseover="swapImage('Button2','','images/button2_on.gif',1);showHideLayers('menu2','','show')"><IMG border=0
name=Button2 src="images/button2_off.gif"></A></td>
You can download this ZIP file with our images
to help you with the script. Unzip it into the appropriate
directory.
|
