How do they do this ?

[Alex123]

Hi everybody,

In the following sites:
[jannis.gr...] [nd.gr,...] the navigation rollover image effect is not done by having separate (over image & down image) buttons but instead what they are doing is having two images, one is designed with the buttons in the normal stage and the other image is designed with the buttons in the "over" stage, still they achieve the same rollover effect by having only one button change when the mouse moves over it.
I was not able to find out how they do this without having separate images for each rollover effect. Can anyone help me understand how is this done please?

Thank you

Regards
Alex

[bobriggs]

I only looked at the first site.

This is a dhtml technique, using an area map. There are 2 images, one with entirely yellow, and one with entirely white text (in the image). Onmouseover triggers visibility of the second image (the one with white text-it is initially hidden), but it uses coordinates to clip that portion of the second image which contains the text.

Note that it doesn't work with NS6 - the sniffer in the javascript doesn't check for it. Nor does it work in Opera 5.12 in IE5 mode (All of the white text comes into view on a mouseover)