JavaScript Mouseover gallery работает в IE, но не в Chrome

Question

У меня есть галерея, которая отображается на «mouseover». Он увеличивает эскиз в центре экрана. Это делается с помощью JavaScript.

Проблема в том, что она работает в IE, но не с Chrome.

Вот код:

<center> 
 
    <a name="whenCara"> 
 
    </a> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <fieldset id="javaScriptSet"> 
 
      <legend> 
 
      <img src="Images/gallery.png"> 
 
      </img> 
 
      </legend> 
 
      <div class="preview" align="center"> 
 
      <img id="preview" src="Images2/1.jpg" alt="No Image Loaded"/> 
 
      </div> 
 
      <br> 
 
      <div class="thumbnails"> 
 
      <label> 
 
       <img onmouseover="preview.src=img1.src" id="img1" src="Images2/1.jpg" alt="Image Not Loaded"/> 
 
      </label> 
 
      <img onmouseover="preview.src=img2.src" id="img2" src="Images2/2.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img3.src" id="img3" src="Images2/3.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img4.src" id="img4" src="Images2/4.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img5.src" id="img5" src="Images2/5.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img6.src" id="img6" src="Images2/6.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img7.src" id="img7" src="Images2/7.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img8.src" id="img8" src="Images2/8.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img9.src" id="img9" src="Images2/9.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img10.src" id="img10" src="Images2/10.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img11.src" id="img11" src="Images2/11.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img12.src" id="img12" src="Images2/12.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img13.src" id="img13" src="Images2/13.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img14.src" id="img14" src="Images2/14.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img15.src" id="img15" src="Images2/15.jpg"  alt="Image Not Loaded"/> 
 
     </div> 
 
     <br> 
 
    </fieldset> 
 
    </center> 
 
    </td> 
 
</tr> 
 
</table>

Answer 1

Ваш закрывают тег на неправильное положение. IE игнорирует это, но Chrome не (непроверен).

Обратите внимание на последний раздел:

Неправильно:

</center> 
    </td> 
</tr> 
</table> 

Справа:

</td> 
</tr> 
</table> 
    </center> 

Вот код, который должен работать:

<center> 
 
    <a name="whenCara"> 
 
    </a> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <fieldset id="javaScriptSet"> 
 
      <legend> 
 
      <img src="Images/gallery.png" /> 
 
      </legend> 
 
      <div class="preview" align="center"> 
 
      <img id="preview" src="Images2/1.jpg" alt="No Image Loaded"/> 
 
      </div> 
 
      <br> 
 
      <div class="thumbnails"> 
 
      <label> 
 
       <img onmouseover="preview.src=img1.src" id="img1" src="Images2/1.jpg" alt="Image Not Loaded"/> 
 
      </label> 
 
      <img onmouseover="preview.src=img2.src" id="img2" src="Images2/2.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img3.src" id="img3" src="Images2/3.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img4.src" id="img4" src="Images2/4.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img5.src" id="img5" src="Images2/5.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img6.src" id="img6" src="Images2/6.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img7.src" id="img7" src="Images2/7.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img8.src" id="img8" src="Images2/8.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img9.src" id="img9" src="Images2/9.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img10.src" id="img10" src="Images2/10.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img11.src" id="img11" src="Images2/11.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img12.src" id="img12" src="Images2/12.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img13.src" id="img13" src="Images2/13.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img14.src" id="img14" src="Images2/14.jpg" alt="Image Not Loaded"/> 
 
      <img onmouseover="preview.src=img15.src" id="img15" src="Images2/15.jpg"  alt="Image Not Loaded"/> 
 
     </div> 
 
     <br> 
 
     </fieldset> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</center>

Answer 2

Последний комментарий, комментарий которого был удален, был верным.

В Chrome мне пришлось использовать getElementById, поэтому правильный синтаксис был:

onmouseover="document.getElementById('preview').src=document.getElementById('img15').src" 

Answer 3

быстрее и аккуратнее решение:

onmouseover="document.getElementById('preview').src=this.src"