I'm working on a site with dropdown Javascript navigation creatd by Dreamweaver but instead of using the solid color DW sets for when you rollover one of the menus, I'd like to have an image instead. For example, instead of hovering over a button, having the dropdown appear, and then having the menu items turn green when you mouse over them, I'd like their background to turn to a floral graphic (or something, that's just an example). Is there a simple way to change that in the code? In the Javascript for the dropdown menus, would it be as easy as changing the background color from a hex value to an image path instead?
Here's a quick example page (page, button, dropdown menu) that I've been playing with to see if I can get a background image on the dropdown menu instead of a color:
Thanks,
m19
Here's a quick example page (page, button, dropdown menu) that I've been playing with to see if I can get a background image on the dropdown menu instead of a color:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function mmLoadMenus() {
if (window.mm_menu_0130111205_0) return;
window.mm_menu_0130111205_0 = new Menu("root",107,18,"Arial, Helvetica, sans-serif",12,"#000000","#FFFFFF","#D6D6D6","http://www.leapfrogit.com/test/button_bkgd.gif","left","middle",3,0,500,-5,7,true,true,true,0,true,true);
mm_menu_0130111205_0.addMenuItem("About Us","location='index.htm'");
mm_menu_0130111205_0.addMenuItem("History","location='index.htm'");
mm_menu_0130111205_0.addMenuItem("Employment","location='index.htm'");
mm_menu_0130111205_0.addMenuItem("Contact Us","location='index.htm'");
mm_menu_0130111205_0.addMenuItem("Sitemap","location='index.htm'");
mm_menu_0130111205_0.hideOnMouseOut=true;
mm_menu_0130111205_0.bgColor='#D6D6D6';
mm_menu_0130111205_0.menuBorder=1;
mm_menu_0130111205_0.menuLiteBgColor='#D6D6D6';
mm_menu_0130111205_0.menuBorderBgColor='#000000';
mm_menu_0130111205_0.writeMenus();
} // mmLoadMenus()
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="JavaScript" src="mm_menu.js"></script>
</head>
<body onLoad="MM_preloadImages('button_RO.jpg')">
<script language="JavaScript1.2">mmLoadMenus();</script>
<div align="center">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="index.htm" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_swapImage('button','','button_RO.jpg',1);MM_showMenu(window.mm_menu_0130111205_0,0,40,null,'button')"><img src="button.jpg" alt="BUTTON SMASH!" name="button" width="200" height="40" border="0"></a></p>
</div>
</body>
</html>Thanks,
m19
