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>

```