I am new to this forum, forgive me if my post is incorrect. I have a site that i am have 3 images that switch places with eachother. one image is large and then there are two thumbnails. when you click the thumbnails the images rotate around. i am using the switch function and just setting IMG1.src different for each case. I want to make a function that will also play a sound byte when you click on the large image. i need the sound byte to change with the images. Here is the code that i am using. intImage = 2; function swapImage() { switch (intImage) { case 1: IMG1.src = "images/picture1-lg-over.png" IMG2.src = "images/picture2-sm-top.png" IMG3.src = "images/picture3-sm-btm.png" intImage = 2; return(false); case 2: IMG1.src = "images/picture2-lg-over.png" IMG2.src = "images/picture1-sm-top.png" IMG3.src = "images/picture3-sm-btm.png" intImage = 3; return(false); case 3: IMG1.src = "images/picture3-lg-over.png" IMG2.src = "images/picture2-sm-top.png" IMG3.src = "images/picture1-sm-btm.png" intImage = 1; return(false); } } i have tried many things that involved each case to contain a different IMG1.onClick=""; value but it doesnt seem to change when the case changes. I have also tried making another switch/case that would change the value of the onClick event.. nothing. any sugestions?
This cycles three images when you click on them: <html> <head> <style type='text/css'> * { margin: 0; padding: 0; border: 0; } img { display: block; } #thumbnails { float: left; height: 300px width: 150px } #image1 { height: 150px; } #image2 { height: 150px; } #image3 { float: left; height: 300px; width: 300px; } </style> <script type='text/javascript'> function cycleImages() { lastImage = document.getElementById('image3').getAttribute('src'); document.getElementById('image3').setAttribute('src', document.getElementById('image2').getAttribute('src')); document.getElementById('image2').setAttribute('src', document.getElementById('image1').getAttribute('src')); document.getElementById('image1').setAttribute('src', lastImage); } </script> </head> <body> <div id='thumbnails'> <img id='image1' src='pic1.png' onclick='cycleImages()' /> <img id='image2' src='pic2.png' onclick='cycleImages()' /> </div> <img id='image3' src='pic3.png' onclick='cycleImages()' /> </body> </html> HTML: