Home » DHTML » Article
Simple Thumbnail Solution
|
| Article by: |  Troy Wolf ( 372 ) (7/16/2004) |
|
| Sponsored by: | FindMyHosting - Web Hosting Search |
| Summary: | This simple script allows the user to select from several thumbnail images and view the larger image, using a mixture of DHTML and Cascading style sheets. |
|
| Viewed: 15218 times |
Rating (11 votes): |
|
4.4 out of 5 |
|
|
|
Simple Thumbnail Solution
Online Demo
Suppose you have a series of images in thumbnail and you would like the user to easily browse through them. In this script we will create three thumbnail images and a larger copy of the selected image will be displayed on the right of the screen. We will also highlight the currently selected thumbnail.
This script shows how to use CSS to format your page as well as how to use javascript to dynamically change the CSS properties of the page elements. It also has a DHTML technique to change the source of an image tag. Copy & Paste this into a new HTML file, then open in your browser.
Article by Troy Wolf, Shiny Solutions
|
|
View highlighted Comments
 User Comments on 'Simple Thumbnail Solution'
|
Posted by :
 sehrlund at 22:15 on Friday, March 18, 2005
|
How could this script be modified to include "Previous" and "Next" buttons next to the enlarged image. I have seen this on other sites and it comes in pretty handy when there is a sizeable number of thumbnails to view.
Thanks,
...Sylvia
| |
|
Posted by :
quaker at 23:27 on Sunday, October 30, 2005
|
Would appreciate some help. The abovve code doesnt work for me even when I change the paths to my computer and change the images to images that I have.
I think I lose it on when it says to change image on click to image (1). Where is image 1?
Is this in dreamweaver when you start making images and it goes through them as image 1 by default etc.
| |
|
To post comments you need to become a member. If you are already a member, please log in .
 
| RELATED ARTICLES |
Creating CSS Buttons
by Thomas D. Greer
With Cascading Style Sheets, you can turn ordinary hyperlinks into fully functional "buttons", without using JavaScript. |
 |
DHTML Horizontal Scroller
by Premshree Pillai
Scroll text horizontally when the user hovers over a link. |
|
DHTML Javascript Ticker
by Premshree Pillai
This is a JavaScript Ticker which ticks a number of messages like the one shown above. It also has a useful 'Show All' feature. |
|
Manipulate Scrollbar Colors Using CSS and JavaScript
by Mike Thompson
The thing about the default color of scrollbars is that it's dull and ugly -- usually this color is gray. Wouldn't it be nice to change this color to better fit the overall theme of your site? Luckily, Cascading Style Sheets and JavaScript can be used to do just that!
|
|
Simple Thumbnail Browsing Solution
by Troy Wolf
This simple script allows the user to select from several thumbnail images and view the larger image, using a mixture of DHTML and Cascading style sheets. |
|
DHTML News Bar
by Premshree Pillai
This is the News Bar script which displays a number of messages and rotates them using DHTML. |
|
DHTML Scrolling Image
by Premshree Pillai
Using this script the user can scroll an image left or right by clicking a buttong
|
|
DHTML Zoom In and Out Script
by Premshree Pillai
Using zoOom, you can zoom in and zoom out any image that is specified in the code.
|
|
Simple Mouse Trail using VB Script
by Jeff Anderson
With IE gaining in prominence every day, it's becoming acceptable to use VBScript in web pages. That makes some activities like the mouse trail a real cinch. |
|
Mouse Trail with Text
by Jeff Anderson
A Classic Mouse Trail Script, with configurable text, rather than images. We chose `I love you` for our text - what will you chose? |
|
| |
