broesi
asked on
Hover-effect for image-link
Hello experts,
I have a graphical menu that displays images as links. I'd like to 'highlight' the entries when the mouse is moved over them using CSS only. For text menus this is no problem. But can I define a second image to be displayed instead of the original image 'on Mouse over'?
broesi
I have a graphical menu that displays images as links. I'd like to 'highlight' the entries when the mouse is moved over them using CSS only. For text menus this is no problem. But can I define a second image to be displayed instead of the original image 'on Mouse over'?
broesi
ASKER
Swapping a background image would help if this can be restricted to the area (td) that holds my image. How would I do this?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
As it happens one of my articles might be just what you need what you need:
http://cd-articles.fateback.com/CSSrollovers.html
Cd&
http://cd-articles.fateback.com/CSSrollovers.html
Cd&
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
> A better way
It's not a better way, it's a different way that has advantages and inconvenients.
Personally, i never use it because it has more restrictions... like you cannot use the image repeating in the same way, you cannot center the background image and you cannot use a combination of background image on part of the element and background color on the rest. I use these techniques on elements that contain text because i want to support HUGE text size and still keep a perfect layout, but i agree that my position is a little extreme. Also, i don't like working on images that much, so keeping the images separated works fine for me.
Reading the question over, i realized this is for a navigation menu, so my suggestion of using a transparent image in the html does not make much sense... It only makes sense if we need to keep the behaviour of an image in the document flow (i.e. if we want to use it as an inline image-link).
It's not a better way, it's a different way that has advantages and inconvenients.
Personally, i never use it because it has more restrictions... like you cannot use the image repeating in the same way, you cannot center the background image and you cannot use a combination of background image on part of the element and background color on the rest. I use these techniques on elements that contain text because i want to support HUGE text size and still keep a perfect layout, but i agree that my position is a little extreme. Also, i don't like working on images that much, so keeping the images separated works fine for me.
Reading the question over, i realized this is for a navigation menu, so my suggestion of using a transparent image in the html does not make much sense... It only makes sense if we need to keep the behaviour of an image in the document flow (i.e. if we want to use it as an inline image-link).
Batalf IMHO.
Cd&
Cd&
ASKER
Thanks for all your input and sorry for the delay. I think I'll use GrandSchtroumpf's recommendation, since it does not rely on JS. However, the answers of jlouwere and Batalf would work to, so I'll split the points if that's ok with you.
Again, thank you!
broesi
Again, thank you!
broesi
However you can swap background images with CSS, which is a little different.