My old friend the transparent GIF has come back in town. I was putting together some updates for Gough Homes home page. While it wasn’t the most extensive search, I settled on using 24 ways to impress your friends’ transparent PNGs in IE6 solution. Part of this solution was the introduction of a transparent GIF. Not ideal, but a worthwhile sacrifice for ease of development.
With that piece of the puzzle in figured out, I decided to switch over to the other major piece. It was a slideshow, which was to use JavaScript and not Flash. It needed to link to a popup showing home plans. Attempts to work within the system to add the onclick event led nowhere. So the simple solution of placing an invisible layer with the proper link above was used. It worked great and simplified things, though obviously not the most ideal solution. That is the chore of the web developer to balance between the ideal and the practical solution that gets the job done efficiently.
The final piece I added to the home page was a location map that had small hover layers when you placed the cursor over a community. The hover popups worked best as PNGs, and hence the search for a good way to use PNGs as transparently as possible to work in all browsers. This is where it got fun as IE7 will not do anchor tag hover if there is no text, even if it is a block level element. Transparent GIF was employed to give IE7 something to hover over and make the layers work.
So it isn’t the ideal solution, but then not all browsers are ideal. It was interesting to brush the dust off of something that used to be abused in the 90′s from the toolkit. However at the end of the day it’s all about, hopefully, providing all users of a website the best experience efficiently.
You can see the magic on the Gough Homes home page, the two additions are the locations and plans.