Rollover border change

Monkey36 · Feb 15, 2006

I'm trying to create a link image whose border changes color when the mouse is hovering over it. However, I can't get the <a> tag's border to surround the image to begin with in FireFox! (Seems to be Ok in Internet Explorer).

Code:

<html>
<body>
  <a style="border: 2px solid red;"><img src="images/flags.jpg"></a>
</body>
</html>

Once I can get the border to surround the item, I can then use the a:hover attributes to change its colour, but I just can't seem to get this border to go all the way around!

Can someone please tell me what I'm doing wrong?

Thanks a lot in advance for any help you can offer,
Dan.

BillyRayPreachersSon · Feb 15, 2006

Try this CSS:

Code:

a img {
   border: 2px solid red;
}
a:hover img {
   border: 2px solid blue;
}

with this HTML:

Code:

<a><img src="images/flags.jpg"></a>

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BillyRayPreachersSon · Feb 15, 2006

BTW - you can restrict it to only certain images within links by using an ID or class (as appropriate) in your selector rule.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Monkey36 · Feb 15, 2006

Thanks a lot for your help.

I have indeed done something similar to your suggestion above. Just for posterity, I came across a problem with this in Internet Explorer, though -

It seems that IE won't recognise those "nested" css tag plans with a:hover unless there is also a change in the <a> tag as well as the <a><img>. Not explaining very well, but to sum up I needed to use the following to get a border to appear round my image/link:

Code:

 #languageoptions a {
   text-decoration: none;
 }
 #languageoptions a img {
   width: 28px;
   height: 21px;
   border: none;
   margin: 2px;
 }
 #languageoptions a:hover img {
   border: 2px solid #a0a0a0;
   margin: 0;
 }
 /* These are required for IE. There must be a change percevied to
    be happening between "a" and "a:hover" otherwise the above "
    "a:hover img" change will not be applied */
 #languageoptions a {
   border: 0px solid black;
 }
 #languageoptions a:hover {
   border: 0px solid yellow;
 }

("languageoptions" is a <div> around the <a><img> tags).

Thanks again for your help! There are things like this that drive me crazy sometimes with cross-browser/HTML/CSS!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Rollover border change

Monkey36

MIS

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

Monkey36

MIS

Similar threads

Part and Inventory Search

Sponsor