图像Onclick更改图像javascript

Question

Just a fast question. I'm using javascript for a gallery, it work's like that: I have the big images (sunglasses) and i have colors below it (simple colored circle image) when i click on the color it changes the sunglasses image to the other color. I found a way in javascript like that(and it's working).

 <script type="text/javascript"> function change() { var image = document.getElementById('iks8600A'); image.src = ('assets/szemuveg/iks8600B.jpg'); document.getElementById('link').href = 'assets/szemuveg/iks8600B.jpg'; } </script> <script type="text/javascript"> function back() { var image = document.getElementById('iks8600A'); image.src = ('assets/szemuveg/iks8600A.jpg'); document.getElementById('link').href = 'assets/szemuveg/iks8600A.jpg' } </script> <script type="text/javascript"> function change2() { var image = document.getElementById('S8621A'); image.src = ('assets/szemuveg/s8621A.png'); } </script> 

So i have to do it at every sunglasses picture and it will be a very long code. Is it the right way to do it? Or there is an easier way to do it? Thanks for the helps/suggestions.

Answer 1

Have you tried something like this ?

var imgUrls = {
    red : "path/to/redImg.jpg",
    blue : "path/to/blueImg.jpg",
    green : "path/to/greenImg.jpg",
    black : "path/to/blackImg.jpg"
};

function switchGlassesColor (color) {
    document.getElementById('iks8600A').src = imgUrls[color];
    document.getElementById('link').href = imgUrls[color];
}

Corresponding HTML:

<img id="iks8600A" alt="Sunglasses... Deal with it!"></img>
<img onclick="switchGlassesImage('red')" alt="RED SUNGLASSES, Omagad!"></img>
<img onclick="switchGlassesImage('blue')" alt="Blue singlasses, with a swag diesel effect"></img>

Answer 2

Your question is not clear. Please, add your HTML code of these elements.

But if I understood you correctly - you can set an array of colors and images. EG:

imagesArray = [{color: 'red',  image: 'assets/szemuveg/iks8600A.jpg'},
               {color: 'blue', image: 'assets/szemuveg/iks8600B.jpg'}];

And after that you can use it in single function to change an image.