javascript - Active menu image will not display on individual pages when using php includes although hover does work -
my main navigation menu in sidebar on left side of page. menu uses 2 different images each link (a regular image , image used both hover image , active image.
i've saved menu own php page (sidebar.php) , have in every page include.
everything works except active image doesn't display each page used when pages individual html pages. weird thing hover image works fine on each php page same image should remain displayed active image doesn't.
i'm using javascript alter images in menu.
here sidebar.php menu:
<ul class="nav_main"> <li><a href="index.php" target="_top" onclick="mm_nbgroup('down','group1','home','images/home_hover.png',1)" onmouseover="mm_nbgroup('over','home','images/home_hover.png','images/home_hover.png',1)" onmouseout="mm_nbgroup('out')"><img src="images/home.png" alt="home page" name="home" border="0" id="home" /></a></li> <li><a href="about.php" target="_top" onclick="mm_nbgroup('down','group1','about','images/about_hover.png',1)" onmouseover="mm_nbgroup('over','about','images/about_hover.png','images/about_hover.png',1)" onmouseout="mm_nbgroup('out')"><img src="images/about.png" alt="about us" name="about" width="254" height="43" border="0" id="about" /></a></li> <li><a href="services.php" target="_top" onclick="mm_nbgroup('down','group1','services','images/services_hover.png',1)" onmouseover="mm_nbgroup('over','services','images/services_hover.png','images/services_hover.png',1)" onmouseout="mm_nbgroup('out')"><img src="images/services.png" alt="our services" name="services" width="254" height="43" border="0" id="services" /></a></li> <li><a href="portfolio.php" target="_top" onclick="mm_nbgroup('down','group1','portfolio','images/portfolio_hover.png',1)" onmouseover="mm_nbgroup('over','portfolio','images/portfolio_hover.png','images/portfolio_hover.png',1)" onmouseout="mm_nbgroup('out')"><img src="images/portfolio.png" alt="portfolio" name="portfolio" width="254" height="43" border="0" id="portfolio" /></a></li> <li><a href="contact.php" target="_top" onclick="mm_nbgroup('down','group1','contact','images/contact_hover.png',1)" onmouseover="mm_nbgroup('over','contact','images/contact_hover.png','images/contact_hover.png',1)" onmouseout="mm_nbgroup('out')"><img src="images/contact.png" alt="contact us" name="contact" width="254" height="43" border="0" id="contact" /></a></li> <li><a href="resources.php" target="_top" onclick="mm_nbgroup('down','group1','resources','images/resources_hover.png',1)" onmouseover="mm_nbgroup('over','resources','images/resources_hover.png','images/resources_hover.png',1)" onmouseout="mm_nbgroup('out')"><img src="images/resources.png" alt="resources" name="resources" width="254" height="43" border="0" id="resources" /></a></li> </ul> the css ul:
ul.nav_main { text-align: left; padding: 0px; margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } ul.nav_main li { text-align: left; padding-top: 5px; padding-bottom: 5px; } here header.php file contains javascript controlling menu images:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="favicon.ico" /> <title>title goes here</title> <meta name="description" content="description here" /> <meta name="keywords" content="various keywords yada yada" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <!--[if ie]> <style type="text/css"> #main_content, #sidebar { zoom: 1;} </style> <![endif]--> <script src="spryassets/spryeffects.js" type="text/javascript"></script> <script type="text/javascript"> <!-- 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]; (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); homecoming x; } function mm_nbgroup(event, grpname) { //v6.0 var i,img,nbarr,args=mm_nbgroup.arguments; if (event == "init" && args.length > 2) { if ((img = mm_findobj(args[2])) != null && !img.mm_init) { img.mm_init = true; img.mm_up = args[3]; img.mm_dn = img.src; if ((nbarr = document[grpname]) == null) nbarr = document[grpname] = new array(); nbarr[nbarr.length] = img; (i=4; < args.length-1; i+=2) if ((img = mm_findobj(args[i])) != null) { if (!img.mm_up) img.mm_up = img.src; img.src = img.mm_dn = args[i+1]; nbarr[nbarr.length] = img; } } } else if (event == "over") { document.mm_nbover = nbarr = new array(); (i=1; < args.length-1; i+=3) if ((img = mm_findobj(args[i])) != null) { if (!img.mm_up) img.mm_up = img.src; img.src = (img.mm_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.mm_up); nbarr[nbarr.length] = img; } } else if (event == "out" ) { (i=0; < document.mm_nbover.length; i++) { img = document.mm_nbover[i]; img.src = (img.mm_dn) ? img.mm_dn : img.mm_up; } } else if (event == "down") { nbarr = document[grpname]; if (nbarr) (i=0; < nbarr.length; i++) { img=nbarr[i]; img.src = img.mm_up; img.mm_dn = 0; } document[grpname] = nbarr = new array(); (i=2; < args.length-1; i+=2) if ((img = mm_findobj(args[i])) != null) { if (!img.mm_up) img.mm_up = img.src; img.src = img.mm_dn = (args[i+1])? args[i+1] : img.mm_up; nbarr[nbarr.length] = img; } } } function mm_effectappearfade(targetelement, duration, from, to, toggle) { spry.effect.dofade(targetelement, {duration: duration, from: from, to: to, toggle: toggle}); } 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_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> <meta name="google-site-verification" content="qcg0ivdbmkkmlncl_4zfrnrr86phebpli5dvzhxvy8o" /> </head> <body onload="mm_preloadimages('images/home_hover.png','images/about_hover.png','images/services_hover.png','images/portfolio_hover.png','images/contact_hover.png','images/resources_hover.png','images/web_icon_fade.png','images/logos_icon_fade.png','images/photo_icon_fade.png','images/cards_icon_fade.png','images/home.png')"> <div id="container"> <div id="header"> <a href="index.php"><img src="images/header_logo.png" width="960" height="250" alt="todd day graphics logo" border="0" /></a></div> even though i'm new using includes sense i'm missing simple in why active images won't display in actual pages (index.php, about.php, etc).
php javascript include dreamweaver server-side-includes
No comments:
Post a Comment