的JavaScript或CSS图像横幅导航

我试图把图片横幅导航使用CSS或者JavaScript的还是我的主页。我一直在尝试好几天，但都没有成功。你的帮助将非常感激。的JavaScript或CSS图像横幅导航

我想不同的图像在具体取决于您将鼠标悬停在链接和默认图像上显示如果没有悬停旗帜符显示。

我已经设置了导航项目和图像的HTML和CSS如下：

<div id="banner-container"> 
    <img id="img1" src="./path/to/images/1.png" /> 
    <img id="img2" src="./path/to/images/2.png" /> 
    <img id="img3" src="./path/to/images/3.png" /> 
    <img id="img4" src="./path/to/images/4.png" /> 
    <img id="img5" src="./path/to/images/5.png" /> 
    <div id="banner-nav"> 
     <ul id="navlist"> 
      <li> 
       <a href="#" id="1">Portable Tracking</a> 
      </li> 
      <li> 
       <a href="#" id="2">Fleet Management</a> 
      </li> 
      <li> 
       <a href="#" id="3">Plug & Go</a> 
      </li> 
      <li> 
       <a href="#" id="4">Trailer Tracking</a> 
      </li> 
      <li> 
       <a href="#" id="5">Lone Worker</a> 
      </li> 
     </ul> 
    </div> 
</div><!--end banner-container-->

来源

2012-01-09 Thomas Hopkins

因为这不是一个PHP的问题，显示你的HTML，而不是你的PHP。另外，jsfiddlet.net上的示例会有所帮助。 – 2012-01-09 19:56:59

这是你问什么？

把你的标签是这样的：

<a href='yourlink' onMouseOver="ChangeImage(0,'ON');" onMouseOver="ChangeImage(0,'OFF');"></a>

，并添加JavaScript这样的：

var img_on_src=new Array('yourimage1_on.gif','yourimage2_on.jpg','yourimage3_on.png'); 
var img_off_src=new Array('yourimage1.gif','yourimage2.jpg','yourimage3.png'); 
var img_directory = "<?php echo home_url('/'); ?>/wp-content/themes/ForetrackWP/images/"; 
function ChangeImage(img_id,toggle) 
{ 
if(toggle=="ON") 
document.getElementById('img' + img_id).src=img_directory + "/" + img_on_src[img_id]; 
else 
document.getElementById('img' + img_id).src=img_directory + "/" + img_off_src[img_id]; 
}

来源

2012-01-09 20:08:12

这看起来像它可以做的伎俩，我给它一个去。干杯。 – 2012-01-10 10:46:45

的JavaScript或CSS图像横幅导航

回答

相关问题