JavaScript object that does not alter the image

advertisements

I am working on a simple image gallery page that contains a main image that is swapped whenever a thumbnail image is clicked. I know that the way I am doing it would be far easier in JQuery but I am determined to get a good grip on JS before I progress to JQuery!

Here is the problem: I want to keep the main image at 1000px wide with overflow-x only (done already) now when a thumbnail image is clicked all that changes is the main image. I think I am close with the JS code and that it just needs a bit of tweeking by someone who understands what I have done wrong here! All I am trying to do is getElementById (the URL) and swap it!

I do not know how to upload images to JS fiddle so my example is image less but all code is there and working fine with images locally.

http://jsfiddle.net/Margate/zJjys/

Code is as follows: //Thank you in advance for any help

<html>
<head>
<title>Confused!</title>

<style type="text/css">
#main-image-container{width: 1000px; height: 350px; position: absolute; top: 172px; left: 0px; border: 1px solid black; overflow-x: auto; overflow-y: hidden;}
#graffiti-panorama-image-bar{width: 600px; height: 95px; position: absolute; top: 540px; left: 200px; border: 1px solid black; overflow: auto; background-color: white;}
.image{position: absolute; cursor: pointer;}
#center-page{border:1px solid red; width: 1005px; height: 700px; position:  absolute; margin: 0px auto;}

<body>
<div id="center-page">

<div id="main-image-container">
<img id="image" src="image-01.jpg" />
</div>

<div id="graffiti-panorama-image-bar">
<img src="small-01.jpg" onclick="Main1()" class="image" style=" left: 0px;" />
<img src="small-02.jpg" onclick="Main2()" class="image" style=" left: 307px;" />
<img src="small-03.jpg" onclick="Main3()" class="image" style=" left: 626px;" />
<img src="small-04.jpg" onclick="Main4()" class="image" style=" left: 941px;" />
<img src="small-05.jpg" onclick="Main5()" class="image" style=" left: 1260px;" />
</div>
</div>

<script type="text/javascript">
function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";}
</script>

</body>
</html>


Try changing:

function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";}

To:

function Main1(){var obj=document.getElementById("image"); obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image"); obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image"); obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image"); obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image"); obj.src="image-05.jpg";}

The .src property is a property of the image itself, not its style collection.

You can also consolidate these functions into a single function, and pass the image URL as a parameter:

function Main(imageUrl)
{
   var obj=document.getElementById("image");
   obj.src=imageUrl;
}

Then call it with:

<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" />