DHTML examples

The examples on this page should display properly in Microsoft Internet Explorer 4 or later, and Netscape Navigator 4 or later.

Example 1
Image rollover without a JavaScript function to preload the replaced images. Notice that when you pass the mouse over the purple buttons, a request is sent to the server to retrieve the new image. Depending on your connection speed, this process could take several seconds or much longer. The rollover effect should be instant.

Example 2
Image rollover with a JavaScript function to preload the replaced images. Initially, it takes a little bit longer to load the file because the browser has to load four additional images.

Example 3
Image rollover with a JavaScript function to preload the replaced images. The replaced image in this example is a one pixel transparent GIF.

Example 4
This example is a text rollover using CSS Unfortunately, it works in IE4 only.

Example 5
Two image rollovers using Previous and Next "buttons."

Example 6
Examples of special effects using absolute positioning and dynamic rollovers. The links don't work yet because the linked documents haven't been uploaded to the server. Test this version in Mozilla beta. It appears as though Netscape will support the hover pseudo-class in its next release.

Example 7
If you use FrontPage, you'll want to see how to clone a "hover button" without imbedding the usual Java applet that hover buttons require. This rollover works in IE4 and Netscape 4.

Example 8
Image rollovers using pixel GIFS.

Example 9
Absolute positioning and JavaScript.

Example 10
The definitive rollover script

Example 11
Preloaded random images from a select list.

 

 

Document modified


copyright 1999 visiomagic, Bill Lewallen. All rights reserved.