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：

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

JavaScript或CSS图像横幅导航

1 个答案: