Well today I was working on a css rollover menu with Franki. We as usual got off topic and were comparing WeetBix to Frosted Mini Wheats. In looking at the Mini-Wheats site they had drop down menus with little bullets (try brands and then mouse over the links that appear). In studying how they do that, I found they were using javascript. Unfortunately with our new advanced hit counter finding out how many people don’t use javascript (about 150 so far this month), I am not sure that javascript is a good idea for menus.

Suddenly as I choked on a Mini-Wheat I had it! Use css, swap in an image. It worked, it was grand! Then I realized that the mouseover image was re-loading off of the server on every mouseover. Server drain, bandwidth, what to do. It appearred that if I put a complete url in (http://etc/etc/image.jpg) then it works from cache. This seems to me to be a big bug in the css implementation. I found several other sites that described similiar issues, including background image blink on mouseover.

I think I found the solution in using hard coded background urls. If anyone has a more elegant solution, let me know. In the meantime, if I have a background image … I think I’ll start using a full url if it is on a domain where hard coding the url won’t later break it when the page moves etc.

This article was posted on Wednesday, October 27th, 2004 at 7:15 pm