Multiple image swap onclick – the main image and thumbnail to show ‘selected’
Hi all,
Just joined in hope for some input on this, there's probably a simple answer but my brain has shut down. I know nothing of JavaScript, only VBScript.. so any JavaScript I use is taken from the net.
I'm working on a page which loads a project and its images from a database, for each image it will produce a grey box as a 'thumbnail' which you click to display the image in the main box above. All is working great, I just need to ensure that the grey box that is selected swaps to a black box image on selection, and of course reverts back to grey when another one is clicked. The grey boxes already have an 'onclick' function so not sure how to trigger another swap.
here is the page, please view source code for info...
http://www.mcdonaldarchitects.co.uk/_new/ind_project.asp?id=19#id=5
Any ideas whatsoever appreicated, I've given myself a headache thinking about it too much. Cheers
Software/Hardware used:
Software/Hardware used:
ASKED:
November 26, 2008 8:44 PM
UPDATED:
October 31, 2010 8:09 AM
Answer Wiki:
In your script function after <script type="text/javascript">, add the following code. These are functions I've created so it will first clear all the dark blocks, then add the dark block to the specified location, then change the image.
<pre>function doBoth(objNameChg,imgNameChg,imgSrcChg,imgSrcGrey){
clearpic(imgSrcGrey);
movepic(imgNameChg,imgSrcChg);
changeIt(objNameChg);
}
function clearpic(imgSrcClr){
document.button1.src=imgSrcClr;
document.button2.src=imgSrcClr;
document.button3.src=imgSrcClr;
document.button4.src=imgSrcClr;
document.button5.src=imgSrcClr;
document.button6.src=imgSrcClr;
document.button7.src=imgSrcClr;
document.button8.src=imgSrcClr;
document.button9.src=imgSrcClr;
document.button10.src=imgSrcClr;
}
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}</pre>
The following code is the code for your blocks below the picture. You have to use the doBoth function instead of the changeIT function. I've changed the first block to be dark from the start.
<pre>
<a id="1" href="#id=1" onclick="doBoth('BSC5.jpg','button1','images/blockDark.gif','images/blockGrey.gif')"><img name="button1" src="images/blockDark.gif" border="0" /></a><img src="images/clear.gif" width="12" height="1" /><a id="2" href="#id=2" onclick="doBoth('BSC4.jpg','button2','images/blockDark.gif','images/blockGrey.gif')"><img name="button2" src="images/blockGrey.gif" border="0" /></a><img src="images/clear.gif" width="12" height="1" /><a id="3" href="#id=3" onclick="doBoth('BSC3.jpg','button3','images/blockDark.gif','images/blockGrey.gif')"><img name="button3" src="images/blockGrey.gif" border="0" /></a><img src="images/clear.gif" width="12" height="1" /><a id="4" href="#id=4" onclick="doBoth('BSC2.jpg','button4','images/blockDark.gif','images/blockGrey.gif')"><img name="button4" src="images/blockGrey.gif" border="0" /></a><img src="images/clear.gif" width="12" height="1" /><a id="5" href="#id=5" onclick="doBoth('BSC1.jpg','button5','images/blockDark.gif','images/blockGrey.gif')"><img name="button5" src="images/blockGrey.gif" border="0" /></a><img src="images/clear.gif" width="12" height="1" /><a id="6" href="#id=6" onclick="doBoth('140T1014.jpg','button6','images/blockDark.gif','images/blockGrey.gif')"><img name="button6" src="images/blockGrey.gif" border="0" /></a><img src="images/clear.gif" width="12" height="1" /><a id="7" href="#id=7" onclick="doBoth('140T1011.jpg','button7','images/blockDark.gif','images/blockGrey.gif')"><img name="button7" src="images/blockGrey.gif" border="0" /></a><img src="images/clear.gif" width="12" height="1" /><a id="8" href="#id=8" onclick="doBoth('140T1009.jpg','button8','images/blockDark.gif','images/blockGrey.gif')"><img name="button8" src="images/blockGrey.gif" border="0" /></a><img src="images/clear.gif" width="12" height="1" /><a id="9" href="#id=9" onclick="doBoth('140T1008.jpg','button6','images/blockDark.gif','images/blockGrey.gif')"><img name="button9" src="images/blockGrey.gif" border="0" /></a><img src="images/clear.gif" width="12" height="1" /><a id="10" href="#id=10" onclick="doBoth('140T0986.jpg','button6','images/blockDark.gif','images/blockGrey.gif')"><img name="button10" src="images/blockGrey.gif" border="0" /></a><img src="images/clear.gif" width="12" height="1" /></pre>
This isn't the prettiest or most efficient way to do it, but it will work. Let me know if there are problems.
To see all answers submitted to the Answer Wiki: View Answer History.
Excellent, that works perfectly. Thank you so much I was beginning to give up on this! Really appreciate your efforts.
How can I accept your answer as the solution? And give you points? I was expecting this site to be similar to EE but I can’t figure this one out?
No need to accept it. We get points by posting.