i want to use onmouseover so that it replaces preview picture with thumbnail picture when mouse is on it.. below code works fine on firefox and IE but not working on chrome.. here is the link where it is applied samdesignli/gallery.html

    <div class="gallery" align="center">
<h1>Photo Gallery</h1><br/>

<div class="thumbnails">
    <img onMouseOver="preview.src=img1.src" id="img1" src="images/Salman_Siddiqui.jpg" alt="Image Not Loaded"/>
    <img onMouseOver="preview.src=img2.src" id="img2" src="images/slide6.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img3.src" id="img3" src="images/slide1.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img4.src" id="img4" src="images/slide2.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img5.src" id="img5" src="images/slide3.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img6.src" id="img6" src="images/slide4.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img7.src" id="img7" src="images/slide5.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img8.src" id="img8" src="images/slide7.jpg" alt="Image Not Loaded"/>
</div><br/>

<div class="preview" align="center">
    <img id="preview" src="images/Salman_Siddiqui.jpg" alt="No Image Loaded"/>
</div>

<br/>

</div>

i want to use onmouseover so that it replaces preview picture with thumbnail picture when mouse is on it.. below code works fine on firefox and IE but not working on chrome.. here is the link where it is applied samdesign.li./gallery.html

    <div class="gallery" align="center">
<h1>Photo Gallery</h1><br/>

<div class="thumbnails">
    <img onMouseOver="preview.src=img1.src" id="img1" src="images/Salman_Siddiqui.jpg" alt="Image Not Loaded"/>
    <img onMouseOver="preview.src=img2.src" id="img2" src="images/slide6.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img3.src" id="img3" src="images/slide1.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img4.src" id="img4" src="images/slide2.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img5.src" id="img5" src="images/slide3.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img6.src" id="img6" src="images/slide4.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img7.src" id="img7" src="images/slide5.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img8.src" id="img8" src="images/slide7.jpg" alt="Image Not Loaded"/>
</div><br/>

<div class="preview" align="center">
    <img id="preview" src="images/Salman_Siddiqui.jpg" alt="No Image Loaded"/>
</div>

<br/>

</div>

• javascript
• jquery
• html
• google-chrome

Share Improve this question Follow asked Jan 31, 2014 at 16:52 samsam 24633 gold badges77 silver badges1717 bronze badges 1

• Uncaught TypeError: Cannot read property 'src' of undefined – Ruslan Commented Jan 31, 2014 at 16:54

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Try using getElementById instead:

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

Try this, but instead of calling each image ID just use "this".

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

In some browsers, ids are automatically made into javascript variables. In others, like Chrome, they are not. It is bad practice to assume the variable exists for this exact reason. antyrat's answer should work for you.

If you want to avoid all the inline JavaScript in your code, I suggest you put it all in a separate <script> tage or in its own js file. Here's how your code would look like:

<h1>Photo Gallery</h1><br/>

<div class="thumbnails" id="thumbnails">
    <img id="img1" src="https://www.google.ca/images/srpr/logo11w.png" alt="Image Not Loaded"/>
    <img id="img2" src="images/slide6.jpg" alt="Image Not Loaded"/>
    <img id="img3" src="images/slide1.jpg" alt="Image Not Loaded"/>
    <img id="img4" src="images/slide2.jpg" alt="Image Not Loaded"/>
    <img id="img5" src="images/slide3.jpg" alt="Image Not Loaded"/>
    <img id="img6" src="images/slide4.jpg" alt="Image Not Loaded"/>
    <img id="img7" src="images/slide5.jpg" alt="Image Not Loaded"/>
    <img id="img8" src="images/slide7.jpg" alt="Image Not Loaded"/>
</div><br/>

<div class="preview" align="center">
    <img id="preview" src="images/Salman_Siddiqui.jpg" alt="No Image Loaded"/>
</div>

<br/>

</div>

<script type="text/javascript">
var imgs = document.getElementById('thumbnails').getElementsByTagName('img');
var preview = function(e) {
    document.getElementById('preview').src = document.getElementById(e.target.id).src;
};
for (var i=0, j=imgs.length; i<j; i++) {
    imgs[i].addEventListener('mouseover', preview, false);
}
</script>

Edit: And if you use jQuery (since you tagged it), it's even easier:

$('#thumbnails > img').hover(function() {
    $('#preview').attr('src', $(this).attr('src'));
});