0

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

1 に答える 1

0

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

タグに次のようなものを入れます。

<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-09T20:08:12.837 に答える