未捕获的TypeError：无法设置未定义的属性“ src”

Question

I know this was asked before but none of the answers given fixed my problem. Obviously a lot of people are getting the same errors with Chrome and Safari so I think an answer with an explanation would be benafitial if at all possable. My JavaScript teacher never taught only led us down the wrong path and said to forget that so I don't understand the code I have but I have to get it working in all browsers.

Here is my code:

<div class="gallery" align="center">
<h3>Simple and Effective Photo Gallery with HTML and JavaScript</h3><br/>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1" src="img1.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" id="img2" src="img2.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3" src="img3.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4" src="img4.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5" src="img5.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6" src="img6.jpg" alt="Image Not Loaded"/>
</div><br/>
<div class="preview" align="center">
<img id="preview" src="img1.jpg" alt="No Image Loaded"/>
</div>
</div>  

Please HELP!!

Answer 1

document.getElementById("preview").src = "img1.jpg";

Answer 2

You can't just use an element's name in Javascript. You must get the DOM object corresponding to that element:

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

Answer 3

You can't change the src like that. Instead use:

document.getElementById('preview').src=.... 

Here is the simplest form of it :)

Answer 4

<script>
var prev;
function setPrev(img) {
prev = prev || document.getElementById('preview');
prev.src = img.src;
return false;
}
</script>    
<div class="gallery" align="center">
<h3>Simple and Effective Photo Gallery with HTML and JavaScript</h3><br/>
    <div class="thumbnails">
      <img onmouseover="setPrev(this)" id="img1" src="img1.jpg" alt="Image Not Loaded"/>
      <img onmouseover="setPrev(this)" id="img2" src="img2.jpg" alt="Image Not Loaded"/>
      <img onmouseover="setPrev(this)" id="img3" src="img3.jpg" alt="Image Not Loaded"/>
      <img onmouseover="setPrev(this)" id="img4" src="img4.jpg" alt="Image Not Loaded"/>
      <img onmouseover="setPrev(this)" id="img5" src="img5.jpg" alt="Image Not Loaded"/>
      <img onmouseover="setPrev(this)" id="img6" src="img6.jpg" alt="Image Not Loaded"/>
    </div>
    <br/>
    <div class="preview" align="center">
    <img id="preview" src="img1.jpg" alt="No Image Loaded"/>
    </div>
   </div>