Wed, 2004-04-14 13:02
I want people on my site to be able to tell that an image is clickable or not, so I created a .bordered class that I use with images. The applicable CSS is this:
.bordered{border:5px solid #660000;}
a img.bordered:hover {border: 5px solid #FFFFFF}
As expected, the border changes color to white when you hover over an image that is linked. The border does NOT change color when you hover over a non-linked image. That's all fine and good because that's what I wanted.
This trick works in The Mozilla flavors I've tried (Firefox, Mozilla), KHTML (Konqueror, Safari), and Opera. Of course, it doesn't work in Internet Explorer, which is unfortunately still the majority of users.
Does anyone have an idea of what I can do to make IE behave as the other browsers do?
TIA!
Justin
Wed, 2004-04-14 13:07
#1
IMG hover border color change - IE doesn't work
With IE you can only use :hover on links so img.bordered:hover wont work because it is a hover on an image.
Try ~
a img {border:5px solid #660000;}
a:hover img {border: 5px solid #FFFFFF}
Wed, 2004-04-14 13:13
#2
Thanks!
Too bad IE can't do it the other way, but I dont' really foresee any need for a non-bordered image anyway ... at least for now.
Thanks again.
Justin
Wed, 2004-04-14 13:27
#3
IMG hover border color change - IE doesn't work
Hi
You can do it!
In the div html tag, you can use onmouseover and change the class using this.style.class='mystylename' and then back using onmouseout returning it to the default state. I think.
e.g.
[code<div class="normalimg" onclick="javascript:window.open('urlname','targetname')" onmouseout="this.className='normalimg';" onmouseover="this.style.cursor='pointer';this.className='hoverimg';"></div>[/code]
maybe
Trevor
Wed, 2004-04-14 13:30
#4
IMG hover border color change - IE doesn't work
Try it this way ~
.bordered{border:5px solid #660000;}
a:hover {background:#fff;} /* or whatever */
a:hover img.bordered {border: 5px solid #FFFFFF}
Wed, 2004-04-14 13:42
#5
IMG hover border color change - IE doesn't work
Thanks all! I managed to do it so that images I don't want bordered aren't bordered, and it works in Opera, IE, Mozilla, etc.
.bordered{border:5px solid #660000;}
a img.bordered {border:5px solid #660000;}
a:hover img.bordered {border: 5px solid #FFFFFF}
not the most elegant code, but hey, it works...
EDIT: sorry Stu, I hadn't seen that you posted the same exact thing that I came up with 