Question

I need some help in JavaScript, HTML, HTML DOM and DHTML. I am not too familiar with JavaScript but I am trying to create website using JavaScript and HTML. Here is the situation:

div                          div
main image                   main image

image1                       image1
image2                       image2
image3                       image3 
                             image4 

By default it will show up image1 as main image on Page load and when user click on any image under that div it should replace main image.

function ChangesSrc()
{
    if(x == 0)
    {
        x = 1;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";   
    }
    else if(x == 1)
    {
        x = 2;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";       
    }
    else if(x == 2)
    {
        x = 0;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";           
    }
    else
    {
        x = 0;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";       
    }
            
}
</script>

My problem is I do have to specify image src for each and every image on click event and also it display images in sequence (if I am clicking on last image first; still it shows first image as main image only).

Can anyone guide me?

Answer 1

function openimage(mainimageurl)
{

        document.getElementById('Idofthebimage').src =mainimageurl;
        //set the width height once in css  

 }

now say on every image write this onclick="openimage(this.src)" or if bigger image url is different onclick="openimage('theurlofthebiggerimage')"