Band Listings and Discography

Here is a John Lee Hooker thumbnail Discography within a table using a swap on mouse over effect as detailed by Barta with a an additional mouse over added. Barta's tutorial is an excellent introduction to use of java script for image swapping.

This example works well in all browsers but becomes disfunctional in Ns4 when CSS positioning is used. One way to accomplish the same task using css positioning is to abandon Bartha's java script and use Angus Turnbull's DHTML/Java Cascade Menu script instead. The whole thumbnail can be made using the Twinhelix script but the display is inconsistent with the Opera7 browsers. For Opera7 to work some positioning must be handled by regular css. On the bluesdejour.com page, for example, we use a Twinhelix script to produce two separate "menues": the navagation menu at the top of the page and the right hand section of the Band Thumbnail in the middle of the page. We used a css positioned table to produce the thumbnail's background image and traditional javascript to introduce the two "Boogieman" images. A consistent display also results using a table positioned with css as the background image with the twinhelix script handling all the images:

This example works well in IE6, Mozilla 1+, and Opera7. In Ns4 it works with a slight shift in the image position. In Opera6 the image position is slightly misplaced and the base image is slow to restore on mouseout.

TwinHelix Designs is great source for scripts. And using the scripts is a practical way to learn some of the functions that can be accomplished using Java.

TwinHelix Example

Band Thumbnails