fsoftball 0 Report post Posted May 13, 2005 Hi,Need help designing a thumbnail page in frontpage. Need to have about six thumbnails aligned on the right hand side, and when you put the mouse over the thumbnail you can preview the image on the same page (as opposed to previewing it in a new window).Does anyone know a good way to do this? Share this post Link to post Share on other sites
Inspiron 0 Report post Posted May 13, 2005 You will have to be familiar with javascript because javascript is the one playing the role of switching pictures.I've created a sample for you according to your specifications. <html><head><title>New Page 1</title><script language="javascript"> function pictureA { document.preview.src = "1.jpg"; } function pictureB { document.preview.src = "2.jpg"; } function pictureC { document.preview.src = "3.jpg"; } function pictureD { document.preview.src = "4.jpg"; } function pictureE { document.preview.src = "5.jpg"; } function pictureF { document.preview.src = "6.jpg"; }</script></head><body><table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="50%" rowspan="6"><img src="" name="preview" width="800" height="600"></td> <td width="50%"><img src="1.jpg" width="320" height="240" onmouseover="javascript:pictureA();"></td> </tr> <tr> <td width="50%"><img src="2.jpg" width="320" height="240" onmouseover="javascript:pictureB();"></td> </tr> <tr> <td width="50%"><img src="3.jpg" width="320" height="240" onmouseover="javascript:pictureC();"></td> </tr> <tr> <td width="50%"><img src="4.jpg" width="320" height="240" onmouseover="javascript:pictureD();"></td> </tr> <tr> <td width="50%"><img src="5.jpg" width="320" height="240" onmouseover="javascript:pictureE();"></td> </tr> <tr> <td width="50%"><img src="6.jpg" width="320" height="240" onmouseover="javascript:pictureF();"></td> </tr></table></body></html> Hope it helps... Share this post Link to post Share on other sites
nickmealey 0 Report post Posted May 13, 2005 another code: <script> //<!-- //<![CDATA[ first = 1; last = 16; current = 1; function nextPicture() { // Hide current picture object = document.getElementById('slide' + current); object.style.display = 'none'; // Show next picture, if last, loop back to front if (current == last) { current = 1; } else { current++ } object = document.getElementById('slide' + current); object.style.display = 'block'; } function previousPicture() { // Hide current picture object = document.getElementById('slide' + current); object.style.display = 'none'; if (current == first) { current = last; } else { current--; } object = document.getElementById('slide' + current); object.style.display = 'block'; } //]]> // --></script> <div class="slideShow"> <div class="setTitle">Family</div> <div id="slide1" class="slides"> <div class="slideTitle">01</div> <img src="family/01.gif" height="300" width="400" border="0" /> </div> <div id="slide2" class="slides"> <div class="slideTitle">02</div> <img src="family/02.gif" height="300" width="400" border="0" /> </div> <div id="slide3" class="slides"> <div class="slideTitle">03</div> <img src="family/03.gif" height="300" width="400" border="0" /> </div> <div id="slide4" class="slides"> <div class="slideTitle">04</div> <img src="family/04.gif" height="300" width="400" border="0" /> </div> <div id="slide5" class="slides"> <div class="slideTitle">05</div> <img src="family/05.gif" height="300" width="400" border="0" /> </div> <div id="slide6" class="slides"> <div class="slideTitle">06</div> <img src="family/06.gif" height="300" width="400" border="0" /> </div> <div id="slide7" class="slides"> <div class="slideTitle">07</div> <img src="family/07.gif" height="300" width="400" border="0" /> </div> <div id="slide8" class="slides"> <div class="slideTitle">08</div> <img src="family/08.gif" height="300" width="400" border="0" /> </div> <div id="slide9" class="slides"> <div class="slideTitle">09</div> <img src="family/09.gif" height="300" width="400" border="0" /> </div> <div id="slide10" class="slides"> <div class="slideTitle">10</div> <img src="family/10.gif" height="300" width="400" border="0" /> </div> <div id="slide11" class="slides"> <div class="slideTitle">10</div> <img src="family/11.gif" height="300" width="400" border="0" /> </div> <div id="slide12" class="slides"> <div class="slideTitle">10</div> <img src="family/12.gif" height="300" width="400" border="0" /> </div> <div class="controls"> <a href="javascript:previousPicture()" style="margin: 10px; color: #888888;">< Previous</a> <a href="javascript:nextPicture()" style="margin: 10px; color: #888888;">Next ></a> </div> </div> Kinda confusing, but I like it a ton, but don't use .gif images, use jpg Share this post Link to post Share on other sites
fsoftball 0 Report post Posted May 14, 2005 Hi,I tried Inspirion's code. Thanks!I cannot get the large picture to show. Any ideas? Share this post Link to post Share on other sites
fsoftball 0 Report post Posted May 14, 2005 OK...so the error reads "Object expected" for this line: <td width="50%"><img src="5.JPG" width="320" height="240" onmouseover="javascript:pictureE();"></td>And all the other lines that are like it. Any help is totally appreciated.Thanks. Share this post Link to post Share on other sites
BuffaloHelp 24 Report post Posted May 14, 2005 If you are referring to Inspiron's code (which is excellent by the way), it's missing () after each called function. function pictureA() { document.preview.src = "1.jpg"; } As you can see it's perfect if you add () at the end of each called function. Few suggestion I would make is that the small thumbnail images should be on the left hand side with either cell padding or border AND the larger image on the right hand side. I am going to use Inspiron's code. I think I'll modify it so that a function called can have automatic incremental (so I don't have to type 1, 2, 3...it can be unlimited number of pictures and a single if then else would take care of it) nickmealey your coding did not work as requested. Nice coding, however. Keep up the good work! Share this post Link to post Share on other sites
Inspiron 0 Report post Posted May 14, 2005 Oh ... Thanks BuffaloHELP for discovering my errors...I didn't know that as I was typing...You know I always like to write my codes up to scratch.. :lol:Hope it helped you, fsoftball... Share this post Link to post Share on other sites
BuffaloHelp 24 Report post Posted May 14, 2005 I didn't know that as I was typing... You know I always like to write my codes up to scratch.. 141291[/snapback] You are what we (the OG's) used to call, "the free coders." You have all the codes in your head and the fingers cannot just keep up with your mind. LOL. You youngens, write 'em codeboys, write 'em! (spin-off of Ride 'em cowboys). Share this post Link to post Share on other sites
Inspiron 0 Report post Posted May 14, 2005 That really motivates me... Really...Thanks... Share this post Link to post Share on other sites
fsoftball 0 Report post Posted May 16, 2005 Perfect! Outstanding! The missing () were the problem. Thank you all for your generous help. Share this post Link to post Share on other sites
Tyssen 0 Report post Posted May 16, 2005 You've probably already finished, but for a completely CSS-based (and javascript-free) alternative, check out Stu Nicholl's CSS Playground. There's actually a load of amazing CSS only demos on his site. Share this post Link to post Share on other sites
