Multiple image swap onclick – the main image and thumbnail to show ‘selected’

15 pts.
Tags:
ASP
JavaScript
VBScript
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
ASKED: November 26, 2008  8:44 PM
UPDATED: October 31, 2010  8:09 AM

Answer Wiki

Thanks. We'll let you know when a new response is added.

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.

Discuss This Question: 2  Replies

 
There was an error processing your information. Please try again later.
Thanks. We'll let you know when a new response is added.
Send me notifications when members answer or reply to this question.

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
  • Mabronics
    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?
    15 pointsBadges:
    report
  • mshen
    No need to accept it. We get points by posting.
    27,385 pointsBadges:
    report

Forgot Password

No problem! Submit your e-mail address below. We'll send you an e-mail containing your password.

Your password has been sent to:

To follow this tag...

There was an error processing your information. Please try again later.

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy

Thanks! We'll email you when relevant content is added and updated.

Following