|
EXAMPLE
See the rollover buttons and
dropdown menus at the top of
the page.
1) Insert this code in the <HEAD> section of the page.
2) Download
this ZIP file with the rollover56.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 (rollover56.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 dropdown menus:
<style><!--
.menufont { font-size: 10pt; font-family: arial,helvetica,san-serif; color:
#000080; text-decoration: none; cursor: none }
.menufont:hover { font-size: 10pt; font-family: arial,helvetica,san-serif; color:
#FF2200; text-decoration: none; cursor: hand }
--></style>
2) In the rollover56.js define the
rollover images and their location in this section of the script:
if (document.images) {
image0on = new Image();
image0on.src = "menu_files/home_on.gif";
image0off = new Image();
image0off.src = "menu_files/home_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 dropdown menus on the page and the content to appear in the
menus in this section of the HTML code:
<!-- home popup menu -->
<DIV id=home
style="Z-INDEX: 1; LEFT: 95px; VISIBILITY: hidden; WIDTH: 150px; HEIGHT:
140px; POSITION: absolute; TOP: 28px; BACKGROUND-COLOR: #8c8c8c; layer-background-color:
#8c8c8c">
<TABLE cellSpacing=0 cellPadding=0 width=148 bgColor=#E8E8FF border=0>
<TBODY>
<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><A href="javascript:changeImages('image0','image0off');showHideLayers('home','','hide')">
<IMG height=26 src="menu_files/close.gif" width=63 border=0></A></TD></TR>
</TBODY></TABLE></DIV>
4) In the buttons section define the default
images for the rollover and the call to the appropriate dropdown 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/home_off.gif" width=80 border=0
name=image0></A>
5) Define the path to the script file in the
<HEAD> section:
<SCRIPT language=JavaScript src="menu_files/rollover56.js"></SCRIPT>
Have a look at dhtml_script_56a
to see how this script can be used as a rollover with vertical pop-up menus.
Examples of usage:
- http://www.fce.unl.edu.ar/ecommerce/logistica.htm.
|
3D graphics
