|
EXAMPLE
See the rollover buttons and popup menus
on the left of
the page.
1) Insert this code in the <HEAD> section of the page.
2) Download
this ZIP file with the rollover56a.js
and unzip into the appropriate directory. NOTE: the ZIP file also contains the images we made.
3) Insert the following HTML code
anywhere inside the <BODY> section of the page.
4) 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 5 sections in this script:
1) a <STYLE> command section
2) a rollover section (rollover56a.js)
3) a menu section
4) a buttons section
5) a script section
1) In the <STYLE> section define the
font family, font size and the color of the links in the popup menus:
<style><!--
.menufont { font-size: 8pt; font-family: verdana,arial,helvetica,san-serif; color:
#000080; text-decoration: none; cursor: none }
.menufont:hover { font-size: 8pt; font-family: verdana,arial,helvetica,san-serif; color:
#FF2200; text-decoration: none; cursor: hand }
--></style>
2) In the rollover56a.js define the
rollover images and their location in this section of the script:
if (document.images) {
image0on = new Image();
image0on.src = "menu_files/button1_on.gif";
image0off = new Image();
image0off.src = "menu_files/button1_off.gif";
image1on = new Image();
image1on.src = "menu_files/button2_on.gif";
image1off = new Image();
image1off.src = "menu_files/button2_off.gif";
3) In the menu section define the tables, the
position of the pop-up menus in the page and the content to appear in the
menus in this section of the HTML code:
<DIV id=home
style="Z-INDEX: 1; LEFT: 98px; VISIBILITY: hidden; WIDTH: 146px; HEIGHT:
208px; POSITION: absolute; TOP: 96px; BACKGROUND-COLOR: #8c8c8c">
<TABLE cellSpacing=0 cellPadding=0 width=145 bgColor=#CCDAE6
border=1 bordercolorlight="#EAF8FD" bordercolordark="#9FBAD0">
<TBODY>
<TR><TD>
<p align="center"><IMG src="menu_files/blank.gif"
border=0 width="1" height="11"><font
face="Arial" size="2"
color="#000066"><b>SimplytheBest.net
</b></font></p>
</TD></TR>
<TR><TD>
<IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://simplythebest.net">Main index</A>
</TD></TR>
<TR><TD align=middle>
<p align="right"><A href="javascript:changeImages('image0','image0off');showHideLayers('home','','hide')">
<IMG height=26 src="menu_files/close.gif" width=63 border=0></A></p>
</TD></TR></TBODY></TABLE></DIV>
4) In the buttons section define the default
images for the rollover and the call to the appropriate menu in this
section of the HTML code:
<A onmouseover="changeImages('image0','image0on');changeImages('image1','image1off');changeImages('image2','image2off');
changeImages('image3','image3off');changeImages('image4','image4off');changeImages('image5','image5off');
showHideLayers('home','','show','shareware','','hide','moreinfo','','hide','music','','hide','products','','hide','searchbox','','hide')"
href="http://simplythebest.net"><IMG height=20 src="menu_files/button1_off.gif" width=80 border=0 name=image0><br></A>
5) Define the path to the script file in the
<HEAD> section:
<SCRIPT language=JavaScript src="menu_files/rollover56a.js"></SCRIPT>
Have a look at dhtml_script_56
to see how this script can be used as a rollover with horizontal dropdown menus.
|
Main index
SimplytheBest.net
