JavaScriptまたはCSSの画像バナーナビゲーション

Question

CSSまたはJavaScriptを使用して私のホームページに画像バナーナビゲーションを配置しようとしています。私は今、成功していない日々を試しています。あなたの助けは本当に感謝しています。

ホバーオーバーしたリンクと、ホバーがない場合に表示するデフォルト画像に応じて、バナーホルダーに異なる画像を表示します。

次のように私は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--> 

Answer 1

は、あなたが求めているものを、このですか？

は、あなたのタグにこのようなものを置く：

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

と、次のようにJavaScriptを追加します。これはPHPの問題ではないので

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