使用更改图像隐藏和显示 div

Question

我对 Javascript、html 和所有这些东西还很陌生，我需要帮助改进我目前所做的事情。

我正在尝试构建一个包含 4 个图像（充当按钮）和 4 个 div 数据的页面。所有 4 个 div 都设置为在启动时显示 none。每个按钮用于一次显示 div 之一。那部分效果很好。

但是，当 div 设置为 display : block 时，我想显示图像按钮的替代版本。

这是我目前拥有的 javascript 和 html 代码。

<script type = "text/javascript">
     var divState = {}
     function showHide(id) {
         if (document.getElementById) {
            var divid = document.getElementById(id);
            divState[id] = (divState[id]) ? false : true;

            for (var  div  in divState) {
               if (divState[div] && div !=id){
                   document.getElementById(div).style.display = 'none';
                   divState[div] = false ;
               }
            }
         divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
        }
     }
</script>

HTML:

<div id = "lob">
    <div id = "auto">
        <img src = "/intact/formindem/SiteAssets/LOB/Jeep_v2.png" alt = "Experts auto";
            onmouseover = "this.src = '/intact/formindem/SiteAssets/LOB/Auto_TXT.png'";
            onmouseout = "this.src = '/intact/formindem/SiteAssets/LOB/Jeep_v2.png'";
            onclick = "showHide('MSOZoneCell_WebPartWPQ3')";
            width = 175px; />
    </div>

<div id = "habitation">
        <img src = "/intact/formindem/SiteAssets/LOB/House_v4.png" alt = "Experts habitation";
            onmouseover = "this.src = '/intact/formindem/SiteAssets/LOB/Habit_txt.png'";
            onmouseout = "this.src = '/intact/formindem/SiteAssets/LOB/House_v4.png'";
            onclick = "showHide('MSOZoneCell_WebPartWPQ4')";
            width = 175px; />
    </div>

    <div id = "route">
        <img src = "/intact/formindem/SiteAssets/LOB/Road_v1.png" alt = "Experts route";
            onmouseover = "this.src = '/intact/formindem/SiteAssets/LOB/Route_TXT.png'";
            onmouseout = "this.src = '/intact/formindem/SiteAssets/LOB/Road_v1.png'";
            onclick = "showHide('MSOZoneCell_WebPartWPQ5')";
            width = 175px; />
    </div>

    <div id = "tous">
        <img src = "/intact/formindem/SiteAssets/LOB/All.png" alt = "Tous les experts";
            onmouseover = "this.src = '/intact/formindem/SiteAssets/LOB/Tous_TXT.png'";
            onmouseout = "this.src = '/intact/formindem/SiteAssets/LOB/All.png'";
            onclick = "showHide('MSOZoneCell_WebPartWPQ6')";
            width = 175px; />
    </div>
</div>

Answer 1

弗雷德，

我明白你想在这里做什么。您是否考虑过使用 CSS 而不是 JavaScript 来做到这一点？这就是 CSS 的目的，虽然 JS 可以做到，但它会更复杂（而且更慢，这在较慢的移动浏览器上可能会很明显）。

类似于：

#route {
    background-image: url("your-image-here.png");
    background-size: contain;
}

#route:hover {
    background-image: url("your-mouseover-image-here.png");
}

此外，当容器设置为 display: block 时，您希望某些内容以不同方式显示，这对我来说似乎很奇怪。你想用它达到什么目的？可能有更好的解决方案可以实现该效果。

使用更改图像隐藏和显示 div

hide and show divs with change image

html

javascript

css

show-hide