sean04 Posted June 1, 2010 Share Posted June 1, 2010 Hey guys, I have been looking for a specific image scroller but I can't seem to find one. I have attached a picture of the one that I would like. I'm assuming I would use javascript If someone has an idea of where I can find one that would be great. I realize that this is quite basic Thanks, Sean [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Psycho Posted June 1, 2010 Share Posted June 1, 2010 I think what you are after is more of a CSS/Style issue than a JavaScript issue. The JavaScript is very simple. Here's a working example: <html> <head> <style> #imgControl { width:350px; height:300px; } #imgDisplay { width: 350px; height: 225px; text-align: center; border: 1px solid #000000; } #imgList { width: 350px; height: 75px; overflow: auto; white-space: nowrap; border: 1px solid #000000; } .thumb { height: 45px; width:45px; } </style> <script type="text/javascript"> function showImage(imageName) { var path = 'images/'; //path to images folder var imgObj = document.getElementById('displayedImg'); imgObj.src = path + imageName; return; } </script> </head> <body> <div id="imgControl"> <div id="imgDisplay"> <img src="blank.jpg" id="displayedImg" /> </div> <div id="imgList"> <a href="#" onclick="showImage('image1.jpg');"><img src="images\thumbs\thumb1.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image2.jpg');"><img src="images\thumbs\thumb2.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image3.jpg');"><img src="images\thumbs\thumb3.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image4.jpg');"><img src="images\thumbs\thumb4.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image5.jpg');"><img src="images\thumbs\thumb5.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image6.jpg');"><img src="images\thumbs\thumb6.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image7.jpg');"><img src="images\thumbs\thumb7.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image8.jpg');"><img src="images\thumbs\thumb8.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image9.jpg');"><img src="images\thumbs\thumb9.jpg" class="thumb" /></a> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.