Скрыть и показать divs сменное изображение

Question

Я очень новичок в Javascript, html и все это, и мне нужно помочь улучшить то, что я сделал до сих пор.

Я пытаюсь создать страницу, которая включает 4 изображения (действующие как кнопки) и 4 divs с данными. Все 4 divs для отображения не отображаются при запуске. Каждая кнопка используется для отображения одного из разделов за раз. Эта часть работает хорошо.

Однако у меня есть альтернативные варианты кнопок изображения, которые я хочу отображать, когда 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. Что вы пытаетесь достичь с этим? Вероятно, будет лучшее решение для достижения этого эффекта.