CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chrome
sam
sam

Reputation: 246

onmouseover not working on chrome?

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.comli.com/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>

Upvotes: 0

Views: 15824

Answers (4)

Diesel9 - Dan
Diesel9 - Dan

Reputation: 68

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

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

Upvotes: 1

Skwal
Skwal

Reputation: 2160

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'));
});

Upvotes: 0

chiliNUT
chiliNUT

Reputation: 19573

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.

Upvotes: 0

antyrat
antyrat

Reputation: 27765

Try using getElementById instead:

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

Upvotes: 1

Related Questions