October 22, 2004

A List Apart had a great tutorial on how to do this. What follows is a simplified step-by-step (adapt image tags to suit your needs):

• Create the full banner (including the rollover image) as your working template. (Tip: the width of the image should be 2px smaller than the container (#rap) of the site.)
• In an html editor (Dreamweaver makes this very easy with drag and drop capabilities), open a blank document, then cut and paste the html code (all code provided from A List Apart). Add or remove as many more panels as needed, but be sure to adjust the CSS (Cascading Style Sheets) portion accordingly, too.

(Note: Code removed.  Use the link provided below for the instructions.)

Here’s all of it in a text file: image map with rollover

If you enjoyed this story, please subscribe to the full RSS feed. You can also have it delivered straight to your mailbox. For something different, mosey over to eScapes and check out dKaye's take on life through photos.

|  Printable version | Posted in technonerdy | Tags: computing, technonerdy, wordpress.