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.
Select All Code
Body {
Background-color: # 000000;
Color: # e27907;
Font-Family: Verdana, Arial;
FONT-SIZE: 10PT;
Letter-spacing: 2;
}
.thumbnormal {
Border: 4px solid # 000000;
}
.thumbselected {
Border: 4px Solid # ff0000;
}
style>
Var lastid = 0;
Function selectimg (ID) {
IF (Lastid> 0) {
Document.getlementByid (Lastid) .classname = "thumbnormal";
}
Document.getlementByid (ID) .classname = "thumbselected";
Document.getlementByid (0) .SRC = Document.getElementByid (ID) .SRC;
LastId = ID;
}
Function loadTrigger () {
SelectImg (1);
}
Window.onload = loadtrigger;
script>
hEAD>
Click a photo on the left to view full size.
td> | td> |
td> TR> table> body> html> Article by Troy Wolf, Shiny Solutions
转载请注明原文地址:https://www.9cbs.com/read-58344.html New Post(0)
|