![]() |
|
#1
|
|||
|
|||
|
I need some help with the code posted below if possible
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> html,body { margin:0; padding:0; height:100%; } a img { border:0; } #image-col { width:180px; height:100%; overflow:auto; background-color:#000099; text-align:center; float:left; } #image-col img { width:100px; height:100px; border:2px solid #000000; margin-top:20px; } #picture-container { min-height:100%; text-align:center; position:relative; margin-left:180px; text-align:center; } * html #picture-container { margin-left:177px; } </style> <script type="text/javascript"> <!-- function showImg(image,thealt){ document.getElementById('large-img').src=image; document.getElementById('large-img').alt=thealt; } //--> </script> </head> <body> <div id="image-col"> [img]images/li.jpg[/img] [img]thumb2.jpg[/img] [img]thumb3.jpg[/img] [img]thumb4.jpg[/img] [img]thumb5.jpg[/img] [img]thumb6.jpg[/img] [img]thumb7.jpg[/img] [img]thumb8.jpg[/img] [img]thumb9.jpg[/img] [img]thumb10.jpg[/img]</div> <div id="picture-container">[img]largeimg.jpg[/img]</div> </body> </html> I want to have the images on the side [thumbnails] to display as larger images in the center when clicked. I think the code is right, but I'm not sure where to place the images. For example, if I can figure out 1 image I can do the rest. So, I have li.jpg as the large image and l.jpg as the thumbnail. If anyone could please point me in the right direction, thank you. Please describe as though I was 5 years old. Once I get it, I get it, but sometimes it takes a bit of prodding to get it. |
![]() |
| Thread Tools | Search this Thread |
| Display Modes | |
|
|