3 replies to this topic

[wilk3sy]

hey guys, ive decided to have a dabble at javascript, on what i thought would be a minimalistic scale, and something not too complex... obviously i was wrong.

basically what i have is an image on an html page, and a set of links underneath labelled 1-6. What i would like to do is hav the user click on one of the other numbers, and the image switch to the picture corresponding to that number.

so far i have this... but it doesnt seem to do anything as ive hit a brick wall!

[HIGHLIGHT="JavaScript"]<script type="text/javascript">
<!--

var mainimage;
var imagechange = "0";


if(imagechange == "2"){
mainimage == "images/image2.png";
}else if(imagechange == "3"){
mainimage == "images/image3.png";
}else if(imagechange == "4"){
mainimage == "image4";
}else if(imagechange == "5"){
mainimage == "image5";
}else if(imagechange == "6"){
mainimage == "image6";
} else {
mainimage == "image1";}

//-->
</script>[/HIGHLIGHT]

[wilk3sy]

well... if the javascript is right, then i guess that just means its implementing the javascript into the html tha tis the problem....

what i want is basically

<img src="mainimage"></img>

main image being taken from the javascript code, which should signify 1 of the 6 images.

to choose the image, i have basically written,

<a href="#" onclick="imagechange=1"></a>

something to that effect....

[fahlyn]

I would suggest starting out with an empty <div> and use your javascript to build the <img src="whatever" /> as the innerHTML as the empty div...when when your links are clicked just change the innerHTML of your div to a different <img src="somethingelse" />.

Unless...you have a default image that you always want to display when the page loads...then i would suggest something like

<img src="default.jpg" id="image"/>

then when your links are clicked change document.getElementById('image').src = "newimage.jpg";

(or $('image').src = "newimage.jpg"; if you use prototype.

Good Luck