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：

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