Search code examples
htmlonmouseover

onmouseover not working in chrome?

I'm trying to create a carousel in which each image has an onmouseover to change the image, using this code from W3 schools and for some reason the picture isn't changing

<div class="carousel-inner top-right" role="listbox">
    <div class="item active">
      <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
      onmouseout="document.getElementById('Photo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
      <img src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="1" />
    </a>
  </div>

this is the same with only a change in image name for all items of the carousel. Anyone know why this is happening, BTW i have already tried getElement from another post

EDIT: so i changed the id of the image there with the new code being `
which still doesnt work so i did this 

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
      onmouseout="document.getElementById('Photo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
      <img  src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="Photo1" />
    </a>
  </div>

which still doesnt work, probably because of no tag for PhotoInfo1 so i did this:

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
      onmouseout="document.getElementById('Photo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
      <img  src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="Photo1" />
      <img  src="/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg" id="PhotoInfo1" />
    </a>
  </div>

which now shows me 2 images, both photo1's one of which changes on scroll but not on mouse out and the second one doesnt change. I have also tried assigning an ID somewhere else for the 2nd image but this make a no change situation.

what should i do now?

I was just trying some random thing and i cam across the fact that when I use this code:

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
      onmouseout="document.getElementById('Photo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
      <img src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="PhotoInfo1" />
    </a>
  </div>

i have a change in the photo from photo1 to photoinfo1 (the actual photos not the IDs) but doesnt switch back to the photo1. so what happens is that i see photo1 when page loads, after i put my mouse on it it changes to the 2nd picture but doesnt switch back to the first when i scroll off.

Why is this happening now?

Ok so this is the code that got it to work (sorta what freefaller said), but im still a little confused as to why this happened could you explain this a little further?

<div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
      onmouseout="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
      <img src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="PhotoInfo1" />
    </a>
  </div>
Solution

  • You're looking for different elements in the document.getElementById in your mouseover and mouseout handlers. Your mouseout code can't find an element called Photo1.

    Change your mouseout to use PhotoInfo1 instead of Photo1.

    I.e. change this...

    <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
  onmouseout="document.getElementById('Photo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">

    To this (the ^^^ is showing you the change)...

    <a href="#" onmouseover="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg';"
  onmouseout="document.getElementById('PhotoInfo1').src='/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg';">
                                       ^^^^^^^^^^