title: onmouseover not working in chrome?
body: <p>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</p>
  
  <pre><code>&lt;div class="carousel-inner top-right" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;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';"&gt;
        &lt;img src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="1" /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>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</p>
  
  <p>EDIT: so i changed the id of the image there with the new code being `<br>
  which still doesnt work so i did this </p>
  
  <pre><code>  &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;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';"&gt;
        &lt;img  src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="Photo1" /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>which still doesnt work, probably because of no tag for PhotoInfo1 so i did this:</p>
  
  <pre><code>  &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;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';"&gt;
        &lt;img  src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="Photo1" /&gt;
        &lt;img  src="/home/pranay/Documents/V1/V1/Pictures/PhotoInfo1.jpg" id="PhotoInfo1" /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>what should i do now?</p>
  
  <p>I was just trying some random thing and i cam across the fact that when I use this code:</p>
  
  <pre><code>  &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;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';"&gt;
        &lt;img src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="PhotoInfo1" /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>Why is this happening now?</p>
  
  <p>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?</p>
  
  <pre><code>&lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;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';"&gt;
        &lt;img src="/home/pranay/Documents/V1/V1/Pictures/Photo1.jpg" id="PhotoInfo1" /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>