Javascript image gallery preventing the default

Hi i have a question regarding the image gallery i am trying to create. I have created a thumbnail viewer so when clicked the javascript then displays the thumbnail as a larger image on the same page, but i am required to add a way to still see the larger images when javascript is turned off. Here is my code (javascript)

    function changeImage(el)
{
    evt.preventDefault(evt);
    var elem = document.getElementById("slide");
    elem.src = "Assets/images/big/"+el+".jpg";
}

(HTML)

     <div id="gallery">
    <img id="slide" src="Assets/images/big/0.jpg" onClick="next();">
</div>
    <div id="thumb">

        <ul class="thumbnail">

            <li><a href="Assets/images/big/0.jpg" onClick="changeImage('0');"><img id="thumb" src="Assets/images/thu开发者_运维知识库mbs/0.jpg" /></a></li>
            <li><a href="Assets/images/big/1.jpg" onClick="changeImage('1');"><img id="thumb" src="Assets/images/thumbs/1.jpg" /></a></li>
            <li><a href="Assets/images/big/2.jpg" onClick="changeImage('2');"><img id="thumb" src="Assets/images/thumbs/2.jpg" /></a></li>
            <li><a href="Assets/images/big/3.jpg" onClick="changeImage('3');"><img id="thumb" src="Assets/images/thumbs/3.jpg" /></a></li>
            <li><a href="Assets/images/big/4.jpg" onClick="changeImage('4');"><img id="thumb" src="Assets/images/thumbs/4.jpg" /></a></li>
            <li><a href="Assets/images/big/5.jpg" onClick="changeImage('5');"><img id="thumb" src="Assets/images/thumbs/5.jpg" /></a></li>
            <li><a href="Assets/images/big/6.jpg" onClick="changeImage('6');"><img id="thumb" src="Assets/images/thumbs/6.jpg" /></a></li>
            <li><a href="Assets/images/big/7.jpg" onClick="changeImage('7');"><img id="thumb" src="Assets/images/thumbs/7.jpg" /></a></li>

        </ul>
    </div><!-- thumb-->

Now i had it so the thumbnail viewer was working but after adding the javascript fail option it no longer displays the image in the gallery but instead on a separate page as it would if there was no javascript, what would be the easiest way to fix this so when the javascript is working the thumbnail image is shown in the gallery when it is not it goes into a seperate page? Any help is much appreciated

The evt variable is not declared anywhere. You would need to pass the event object into the function. Alternatively, you could put return false at the end of your onclick attributes.

Remove

evt.preventDefault(evt);

and change

<a href="Assets/images/big/i.jpg" onClick="changeImage('i');"><img id="thumb" src="Assets/images/thumbs/i.jpg" /></a>

(i from 0 to 7) in your HTML codes to

<img class="thumb" src="Assets/images/thumbs/i.jpg" onclick="changeImage('i');" style="cursor:pointer;"/>

(<a> is removed, and style attribute is added to change the mouse cursor to pointer, and changed id to class - multiple elements having same ID is bad.)

Return false from the event handler:

function changeImage(el) {
    var elem = document.getElementById("slide");
    elem.src = "Assets/images/big/" + el + ".jpg";
    return false;
}

And in html add return statement too:

<ul class="thumbnail">

    <li><a href="Assets/images/big/0.jpg" onClick="return changeImage('0');"><img id="thumb" src="Assets/images/thumbs/0.jpg" /></a></li>
    <li><a href="Assets/images/big/1.jpg" onClick="return changeImage('1');"><img id="thumb" src="Assets/images/thumbs/1.jpg" /></a></li>
    <li><a href="Assets/images/big/2.jpg" onClick="return changeImage('2');"><img id="thumb" src="Assets/images/thumbs/2.jpg" /></a></li>
    <li><a href="Assets/images/big/3.jpg" onClick="return changeImage('3');"><img id="thumb" src="Assets/images/thumbs/3.jpg" /></a></li>
    <li><a href="Assets/images/big/4.jpg" onClick="return changeImage('4');"><img id="thumb" src="Assets/images/thumbs/4.jpg" /></a></li>
    <li><a href="Assets/images/big/5.jpg" onClick="return changeImage('5');"><img id="thumb" src="Assets/images/thumbs/5.jpg" /></a></li>
    <li><a href="Assets/images/big/6.jpg" onClick="return changeImage('6');"><img id="thumb" src="Assets/images/thumbs/6.jpg" /></a></li>
    <li><a href="Assets/images/big/7.jpg" onClick="return changeImage('7');"><img id="thumb" src="Assets/images/thumbs/7.jpg" /></a></li>

</ul>