0

我的主导航菜单位于页面左侧的侧边栏中。菜单为每个链接使用两个不同的图像（常规图像和用作悬停图像和活动图像的图像。

我已将菜单保存为自己的 php 页面 (sidebar.php)，并将其作为包含在每个页面中。

一切都完美无缺，只是活动图像不会像以前那样为每个页面显示，因为页面都是单独的 html 页面。奇怪的是，悬停图像工作得很好，但是在每个 php 页面上，相同的图像应该为活动图像保持显示，但不会。

我正在使用 javascript 来更改菜单中的图像。

这是带有菜单的sidebar.php：

<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>

这个 ul 的 CSS：

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;
}

这是包含控制菜单图像的 javascript 的 header.php 文件：

<!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]; 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_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;
      for (i=4; i < 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();
    for (i=1; i < 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" ) {
    for (i=0; i < 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)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < 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>

即使我不熟悉使用包含，我觉得我错过了一些非常简单的东西，为什么活动图像不会显示在实际页面中（index.php、about.php 等）。

4

0 回答 0