a:hover weird on images....

text highlights, but images show just a bar in some browsers

[Shadows Papa]

The issue - I use CSS (in a seperate file) to highlight links to yellow when the mouse ventures over them.
For text, it's perfect. For images, I get weirdness. For example, I have an icon that you would click on to send an email. In another case, our store logo is used for "home". In each case, rather than yellow over the entire background of the image, the user sees only a yellow bar. Hard to describe, but it's as if only a part of the space the image occupies is seen as the "link" so only that space, a bar shape, is turned yellow upon hover.

The CSS code:

a { text-decoration: underline; }

a:hover {
color: #ff0000;
background: #ffff00;
text-decoration: underline;
}
------------------------------
The HTML code:

<script type="text/JavaScript">
var name = "barbara";
var domain = "domainname.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
</script>
<img src="animail.gif" align="middle"
border="0" alt="Email Barbara at Our Store" width="101" height="105"><br>
<script type="text/JavaScript">
document.write('</a>');
</script>

And in another case, the HTML code is:
<td class="text" valign="bottom">
<a href="http://www.domainname.com" target="_self"><img src="forum_images/image.gif" border="0"></a>
</td>

-----------------
Thoughts?
Shadows Papa

[RammsteinNicCage]

I thought that a:hover would only work for the border of the image, not the image itself.

Jennifer

[Shadows Papa]

I don't use image borders. (I have this thing where I think they look tacky)
The yellow was originally intended for the text, but I noted that it worked on transparent GIFs as well, the only issue is that it only turns a block or "bar" yellow.
Therein lies the issue.........

Shadows Papa

[mipapage]

I have a feeling that the bar is there because an image is considered an inline element. As such, it highlites the space where text would be.

You may want to try and play with the settings for linked images to clean that up. e.g.

a:hover img{ 
background:none; 
text-decoration:none 
} 

That may do the trick.

thought that a:hover would only work for the border of the image, not the image itself.

You have to specify this in the pseudo classes for it to occur, and from what I can remember, IE doesn't apply it directly to images, you have to wrap the image in a div and apply the border changing (on hover) to the linked div.

div.hovimg a:link, div.hovimg a:visited{border:1px solid red;} 
div.hovimg a:link, div.hovimg a:visited{border:1px solid gray;} 

That would be the idea, with the code like this:

<div class="hovimg"><a...><img.../></a></div> 

I believe that there is also a bit of hacking required to satisfy IE5, and that you need to set a width on the 'a' at some point for it to work properly.