<div id="gallery">
        <ul>
            <li><a href="images/blue_dress.jpg"><img src="images/blue_dress_thumb.jpg"></a></li>
            <li><a href="images/boxer.jpg"><img src="images/boxer_thumb.jpg"></a></li>
            <li><a href="images/cow.jpg"><img src="images/cow_thumb.jpg"></a></li>
            <li><a href="images/country_boy_relaxing.jpg"><img src="images/country_boy_relaxing_thumb.jpg"></a></li>
            <li><a href="images/eye.jpg"><img src="images/eye_thumb.jpg"></a></li>
            <li><a href="images/ice_swim.jpg"><img src="images/ice_swim_thumb.jpg"></a></li>
            <li><a href="images/sitting.jpg"><img src="images/sitting_thumb.jpg"></a></li>
        </ul>


    <p><img src="images/blue_dress.jpg" alt="" id="big_pic"></p>

</div>

var big_pic = document.getElementById("big_pic");
var gallery = document.getElementById('gallery').getElementsByTagName('img');

for (i=0; i < gallery.length; i++){
    gallery[i].setAttribute('id',i);
    document.getElementById(i).onmouseover = function(){
    big_pic.src = i;
    }
}