banner
 
A simple overlapping image gallery

html code:

you need to include the following lines for each preview line.
To put 3 pictures to the preview line:

< script type="text/javascript" language="JavaScript" >
init();
addPic("pic1", "text1");
addPic("pic2", "text1");
addPic("pic3", "text1");
displayIt();
< /script >

the skeleton of the JavaScript code: the preview line is an overlapping series of divs with a preview picture in each.

init(): initialize a new string "str" of div's
addPic("pic", "text"): add a <div> <img url="pic" alt="text"> </div> to "str"
displayIt(): print out "str"

mouse-over effects on the preview line:

raise(obj): set z-index=2 and pointer-shape cursor
sink(obj): set z-index=0

the show-picture function:

show(url): create semi-transparent div as background and a non-transparent div as foregound for the picture
dontShow(): remove these two divs

you can download the javascript source here.

comment it:

Name:
Email:
Comment:
*

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/www/uglydesign.freehostia.com/software/overlapgal/overlapgal.php on line 179