Div Layers : Overlays : Transparent Backgrounds and PNG Files

On Moonlight Lady's - 3 night boat cruise page I have a map of Lake Champlain which displays the route taken by the Moonlight Lady on her 3 day 4 night vacation packages. The problem I was facing was this. The map if somewhat large (576 KB - .png file) in side and the idea is that when you visit the page you first see the entire map. I have these tabs setup so that a visitor can click on Day 1 of the tour which would trigger a JavaScript event which would show/hide a div containing a map (301 KB) showing the route the boat will take on day 1 only. The problem is that I have a total of 5 maps to use. Which means that if they are hidden by default the browser is still going to have to load all of those images.

I mentioned this briefly to a co-worker (thanks Tim) and he suggested 'div overlays'. Then I thought about it: default div shows the full version of the map without any of the specific day to day info (576 KB). The map will be set as the div's background-image. Next I will create an image the exact size of the default map. This image will have a transparent background and will only show the highlights of that particular part of the vacation. This image (63 KB - as opposed to 301 KB which is the image without a transparent background) will be set in a div, which will have it's background-color set to transparent. What will happen is that when a user clicks on day 1 is that the div for day 1 will be exposed which will 'overlay' this transparent background image over the default map creating the illusion that this is a new map when indeed it's a much smaller map (63 KB). Then as the different tabs are clicked exposing each new map the other maps will become hidden.

For effect I put the 'slider' action on the div overlay as the new div is exposed. What this does is that when a tab is clicked, say day 1, the overlay 'slides' down from the top of the map until it is in position.

Oh, and if you are going to use .png files with transparent backgrounds don't forget that IE6 doesn't like .png files with transparent backgrounds. You will need to implement the IE6 PNG Fix. I posted about this in a previous blog entry. You should be able to dig it up or just do a Google search.