PDA

View Full Version : inserting roll-over graphics into drop down menu

Beck1
08-28-2002, 02:43 PM
Can anyone tell me how I can make the top-level navigation buttons into roll-overs in the enclosed script? I'm trying to replace the following graphics on mouseover: nav1.gif nav2.gif nav3.gif nav5.gif continue.gif

The live page can be seen at: http://www.beautifulballooncompany.com/default.html

the last two images in the above list are within a form field as submit buttons - can these be made into roll-overs?

Thanks very much for your time. it's much appreciated.

Beck

---------------

<html>

<head>
<style type="text/css">
<!--
body { background-attachment: fixed; background-image: url(images/home1.jpg); background-repeat: no-repeat; background-position: center top}
-->
</style>
<script language="JavaScript1.2">

//Drop down menu link- ?Dynamic Drive (www.dynamicdrive.com)
//For full source code and 100's more DHTML scripts, visit http://www.dynamicdrive.com
//Credit MUST stay intact for use

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a class="text" href=1001.html>Topiary Tree Kit</a><br><br>'
menu1[1]='<a class="text" href=1002.html>Floating Arch Kit</a><br><br>'
menu1[2]='<a class="text" href=1003.html>Topiary Tree & Floating Arch Kit</a><br><br>'
menu1[3]='<a class="text" href=1004.html>Magical Balloon Drop</a><br><br>'
menu1[4]='<a class="text" href=1005.html>Guide to Creating Beautiful Balloon Decorations</a><br><br>'

//Contents for menu 2


//Contents for menu 3


</script>
<style>
<!--
.wrap1{
position:relative;
}
.wrap2{
position:absolute;
}
#dropmenu0{
z-index:100;
}

a.text {
font-family: Arial, Helvetica, sans-serif;
font-size:9pt;
font-weight:normal;
color:#FFFFFF;
text-decoration:none;
}
a.text:visited {
color:#FFFFFF;
}
a.text:hover {
color:#FFFFFF;
text-decoration: underline
}
a.text:visited:hover {
color:#FFFFFF;
}

-->
</style>
<title>Beautiful Balloon Company - Welcome</title></head>

<body bgcolor="#FFFFFF">
<div align="center"><a href="default.html"><img src="images/head.gif" width="742" height="84" border="0"></a>
<script language="JavaScript1.2">
//reusable/////////////////////////////

//Drop down menu by http://www.dynamicdrive.com

var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")

function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?"hide" : "hidden"

themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu

themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0

themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+18 : themenuoffsetY+event.clientY-event.offsetY+17

hiddenconst=(ns6||ie4)? "hidden" : "hide"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? "visible" : "show"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}

function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="hidden"
else if (ns4)
themenu.visibility="hide"
}

function showmenu(whichone){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="visible"
}

if (ie4||ns6)
document.onclick=hidemenu

//reusable/////////////////////////////
</script>
</div>
<div align="left">
<center>

<table border="0" cellpadding="0" cellspacing="0" width="742" height="16">
<tr>
<td width="122" height="16" valign="top">

<!----------Menu 1 starts here---------->
<ilayer height=16px>
<layer visibility=show>
<div class=wrap1> <span class=wrap2 onmouseover="dropit(event,'dropmenu0');event.cancelBubble=true;return false"><font face="Arial"><b><a href="products.html" onmouseover="if(ns4) return dropit(event, 'document.dropmenu0')"><font color="FF3399"><img src="images/nav1.gif" width="122" height="16" border="0"></font></a></b></font>
</span> </div>
</layer>
</ilayer><br />
<!----------Menu 1 ends here---------->

</td>
<td width="92" valign="top">

<!----------Menu 2 starts here---------->

<ilayer height=16px>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu1');event.cancelBubble=true;return false"><a href="faq.html" onClick="if(ns4) return dropit(event, 'document.dropmenu1')"><img src="images/nav2.gif" width="92" height="16" border="0"></a>
</span>
</div>
</layer>
</ilayer><br />
<!----------Menu 2 ends here---------->

</td>
<td width="120" valign="top">

<!----------Menu 3 starts here---------->

<ilayer height=16px>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu2');event.cancelBubble=true;return false"><font face=Verdana><b><a href="contact.html" onClick="if(ns4) return dropit(event, 'document.dropmenu2')"><img src="images/nav3.gif" width="120" height="16" border="0"></a></b></font>
</span>
</div>
</layer>
</ilayer><br />
<!----------Menu 3 ends here---------->

</td>
<td width="196" valign="top">

<!----------Menu 4 starts here---------->

<ilayer height=16px>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu3');event.cancelBubble=true;return false"><font face=Verdana><b><a href="#" onClick="if(ns4) return dropit(event, 'document.dropmenu3')"><img src="images/nav4.gif" width="196" height="16" border="0"></a></b></font>
</span>
</div>
</layer>
</ilayer><br />
<!----------Menu 4 ends here---------->

</td>
<td width="106" valign="top">

<!----------Menu 5 starts here---------->

<ilayer height=16px>
<layer visibility=show>
<div class=wrap1>
<form action="http://www.symcart.com/sbin/" method=post><input type=hidden name="instId" value="39797"><input type=hidden name="filesPath" value="http://www.beautifulballooncompany.com/"><input type=hidden name="cmd" value="Basket"><input type="image" border="0" name="imageField" src="images/nav5.gif" width="106" height="16">
</form>
</div>
</layer>
</ilayer><br />
<!----------Menu 5 ends here---------->

</td>
<td width="106" valign="top">

<!----------Menu 6 starts here---------->

<ilayer height=16px>
<layer visibility=show>
<div class=wrap1>
<form action="http://www.symcart.com/sbin/" method=post><input
type=hidden name="instId" value="39797"><input type=hidden name="filesPath"
value="http://www.beautifulballooncompany.com/"><input type=hidden
name="confirm" value="100"><input type=hidden
name="continue" value="100">
<input type="image" border="0" submit name="cmd" src="images/continue.gif"
width="106" height="16" value="Checkout">
</form>
</div>
</layer>
</ilayer><br />
<!----------Menu 6 ends here---------->

</td>

</tr>
</table>

</center>
</div>

<div id=dropmenu0 onmouseover="showmenu()" onmouseout="hidemenu()" style="position:absolute;left:0;top:0;layer-background-color:#FF3399;background-color:#FF3399;width:122;visibility:hidden;border:0;padding:6px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="6px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
dropmenu0.onmouseover=showmenu
dropmenu0.onmouseout=hidemenu
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onmouseout=hidemenu
}
</script>

<p>&nbsp;
</body>

</html>