skip to content

Image replacement NO flicker


Information

Similar to the previous menu but even more simple. Yes it is possible!

Again we are using two images with only one controlled by the link :hover.

The first image, below, is held as the background image for the menu 'outer div'.

The second image is held as the background image for all four links - BUT THE IMAGE IS NOT NORMALLY DISPLAYED. This is achieved by setting the background image at a negative 'top/left' position with a 'transparent background color'.

As with the previous menu this one works in all tested browsers including IE5.01 and IE5.5

NOTE. Again I am using a standard unordered list for the menu. The text is forced off the screen by using a top padding (50px) and overflow:hidden (there is also a hack for IE5.x). This allows the background image to be displayed but not the text. So for the purists this will degrade to a standard list.

Images

IMAGE 1

menu start screen image

IMAGE 2

menu hover screen image

This is a gif with a transparent middle area that will allow the normal button text to show through so giving the impression of an increased button size with a drop shadow.

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.




Recommended Sites

CSSplay web design/assistance

"The citroen.co.uk web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth


Advertise with CSSplay

CSS play pages

CSS (Design) - TOP.ORG

CSS play recommend

PSD to HTMLSitegrinderEarn from your site today with Netklix text adsFree, practical CSS menus, layouts, and examples