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
LVL 5
broesiAsked:
Who is Participating?
 
GrandSchtroumpfCommented:
Here is an example of background image swapping:
Your should use a transparent image for your link (let's call it "transparent.png").
Then you need to define one class per image link you want to use and use that class to define the CSS selector.
Here is an example:

<html>
<head>
<style type="text/css">

a.link1 img {
  background: url(image1.png) no-repeat left top;
  border: 0;
}
a.link1:hover img {
  background: url(image1h.png) no-repeat left top;
  border: 0;
}

</style>
</head>
<body>

<a class="link1" href="#"><img src="transparent.png" height="30" width="100"></a>

</body>
</html>
0
 
GrandSchtroumpfCommented:
No, you cannot do image swapping with CSS.  You need javascript to do that.
However you can swap background images with CSS, which is a little different.
0
 
broesiAuthor Commented:
Swapping a background image would help if this can be restricted to the area (td) that holds my image. How would I do this?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
BatalfCommented:
You can achieve a image switch by switching the class of your menu entries

example:

<style type="text/css">
.menuOff{
    background-image:url('images/menuOff.gif');
}
.menuOn{
    background-image:url('images/menuOn.gif');
}
</style>


and in your html

<td onmouseover="this.className='menuOn'" onmouseout="this.className='menuOff'" class="menuOff">Menu text</td>
0
 
COBOLdinosaurCommented:
As it happens one of my articles might be just what you need what you need:

http://cd-articles.fateback.com/CSSrollovers.html

Cd&

0
 
Jan LouwerensSoftware EngineerCommented:
A better way, instead of having two images for the rollovers, just combine them both into one image, and just display the appropriate parts of the image depending upon the context.

http://wellstyled.com/css-nopreload-rollovers.html
See "Single-image Rollovers" section in http://alistapart.com/articles/slidingdoors2/
0
 
GrandSchtroumpfCommented:
> 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).
0
 
COBOLdinosaurCommented:
Batalf IMHO.

Cd&
0
 
broesiAuthor Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.