gralamin Posted December 10, 2006 Share Posted December 10, 2006 hello, I am a student with a project to make a web page. I though it would be pretty cool to have a picture gallery with thumbnails and captions. Searching the internet, I manged to find the following script (that has been slightly edited for a page on the site): <HEAD><script LANGUAGE="JavaScript"><!-- Original: Jenny Blewitt (webmaster@webdesignsdirect.com) --><!-- Web Site: [url="http://www.webdesignsdirect.com"]http://www.webdesignsdirect.com[/url] --><!-- This script and many more are available free online at --><!-- The JavaScript Source!! [url="http://javascript.internet.com"]http://javascript.internet.com[/url] --><!-- BeginbrowserName = navigator.appName;browserVer = parseInt(navigator.appVersion);ns3up = (browserName == "Netscape" && browserVer >= 3);ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);function doPic(imgName) {if (ns3up || ie4up) {imgOn = ("" + imgName);document.mainpic.src = imgOn; }}// End --></script></HEAD><!-- STEP TWO: Copy this code into the BODY of your HTML document --><BODY><center><table width=270 border=0 cellspacing=0 cellpadding=0><tr><td><a href="java script:doPic('images/aca_math1.jpg');"><img src="images/aca_math1.jpg" width=90 height=90 border=0></a></td><td><a href="java script:doPic('images/aca_math2.jpg');"><img src="images/aca_math2.jpg" width=90 height=90 border=0></a></td><td><a href="java script:doPic('images/aca_math3.jpg');"><img src="images/aca_math3.jpg" width=90 height=90 border=0></a></td></tr><tr><td colspan=3 align=center><img name="mainpic" src="images/aca_math0.jpg" width=270 height=270 border=0></td></tr><tr><td colspan=3 align=center>Caption, to be switched. Possibly using <div>?</td></tr></table></center><p><center><font face="arial, helvetica" size="-2">Free JavaScripts provided<br>by <a href="http://javascriptsource.com">The JavaScript Source</a></font></center><p><!-- Script Size: 2.00 KB --> All I need is for the captions to change, when a thumbnail is clicked on. How would i do this?Thanks in advance Link to comment Share on other sites More sharing options...
MrAdam Posted December 10, 2006 Share Posted December 10, 2006 EDIT: here.... <html><head><style type="text/css">img.thumb { width: 90px; height: 90px; border-width: 0px; cursor:pointer;}</style><script type="text/javascript"><!--var imgSrc = new Array(); imgSrc[0] = "images/aca_math0.jpg"; imgSrc[1] = "images/aca_math1.jpg"; imgSrc[2] = "images/aca_math2.jpg"; imgSrc[3] = "images/aca_math3.jpg"; var captions = new Array(); captions[0] = "default image caption"; captions[1] = "image caption 1"; captions[2] = "image caption 2"; captions[3] = "image caption 3"; function doPic(imgId) { document.getElementById('mainpic').src = imgSrc[imgId]; document.getElementById('caption').innerHTML = captions[imgId];}// --></script></head><body><table align="center" width="270" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <img src="images/aca_math1.jpg" class="thumb" onClick="doPic('1');"></td> <td> <img src="images/aca_math2.jpg" class="thumb" onClick="doPic('2');"></td> <td> <img src="images/aca_math3.jpg" class="thumb" onClick="doPic('3');"></td> </tr> <tr> <td colspan="3" align="center"> <img id="mainpic" src="images/aca_math0.jpg" width="270" height="270" border="0"></td> </tr> <tr> <td colspan="3" align="center"> <span id="caption"></span> </td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
gralamin Posted December 10, 2006 Author Share Posted December 10, 2006 Thats Exactly what I wanted, Thanks a lot! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now