Rollover image swap and onclick image w/ javascript
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
Software/Hardware used:
Software/Hardware used:
ASKED:
February 20, 2009 8:05 PM
UPDATED:
February 24, 2009 8:32 PM
Answer Wiki:
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
To see all answers submitted to the Answer Wiki: View Answer History.
Do you have any code to start with? It would be easier to integrate our code if you posted the URL of your site.