的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圖像橫幅導航

回答

相關問題