Rollover image swap and onclick image w/ javascript

5 pts.
Tags:
JavaScript
onClick event
Rollover effects
Hello. I am a video editor who sorta through no fault of my own got talked into building a website for some friends (I worked as a front end web designer in the late 90s...). The site displays photography and video content for a collective of artists. On each individual artist's page I have a series of thumbnails with a javascript which changes the thumbnails from dark to bright as the user mousesover each one. At the top of the page I am displaying a large version of a photo from thumbnails. I would like to have the user be able to click on any thumbnail and have the large version of the photo load into the top of the page. I have an example of the page with the rollover here: http://be-interactive.com/client_view/ReelSessions/web04/mattdoyle.html Thanks so much! AJ Russo
ASKED: February 20, 2009  8:05 PM
UPDATED: February 24, 2009  8:32 PM

Answer Wiki

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

AJ,

You can reuse the source code from the site you mentioned.

Their code does the following;

1) It preloads the images into varialbes (preloadImg function)
2) It uses the onmouseover event to display a colored thumbnail of the image (onmouseover=”swapImg (‘imxx’, ‘gmMattDoylexx’);” ) xx is the image number.
3) It uses the onmouseout event to display the original, desaturated thumbnail (onmouseout=”swapImg (‘imxx’, ‘gmMattDoylexx_OFF’);” )
4) In the onclick event it calls the showPic function, with a reference to the <img> tag, to display the large version of the image.

Suggestion: use Firefox to read the source code. Firefox will color format the code so it’s easier to read.

- Jacob

Discuss This Question: 1  Reply

 
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
  • mshen
    Do you have any code to start with? It would be easier to integrate our code if you posted the URL of your site.
    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