A recent project I was working on required some rollover tooltips. Easy right? Well, usually. However, this project threw me a curve ball. I needed to have my tooltips work with an image map and be powered by javascript. The problems I found with image maps is that due to the hotspots using the “<area />” tag, most javascript tooltips would not work. Even though you can apply “classes” and “id”’s to the image map, the tooltip just would not acknowledge the hotspot. So finally, after scouring the internet, mckay.cshl.edu/balloons3.html came to my rescue with a lightweight, good looking, “mousover” powered tooltip. This solution proved to be quick and easily customizable.

Here is a screencast I made on creating a single page in Photoshop and how to slice it. This is the first screencast in a series. Later in part 2 I am going to show you how to take the sliced up image and create a HTML and CSS page out of it. In part 3 I will show you how to take the HTML and CSS page and turn it into a template for Joomla! and WordPress.

Check back in the coming weeks for the rest of the screencasts in this series.

I don’t know where I found time to watch this video but I am ecstatic that I did. This video is of Randy Pausch who has been diagnosed with terminal pancreatic cancer. He is the self-proclaimed expert on time management since doctors have given him just a few months to live. I can say that this has changed the way that I look at how I am spending my time.