5 replies [Last post]
shock_ez
Offline
newbie
Boston
Last seen: 15 years 30 weeks ago
Boston
Timezone: GMT-5
Joined: 2004-04-14
Posts: 3
Points: 0

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

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 42 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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}

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

shock_ez
Offline
newbie
Boston
Last seen: 15 years 30 weeks ago
Boston
Timezone: GMT-5
Joined: 2004-04-14
Posts: 3
Points: 0

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 1 week ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 42 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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}

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

shock_ez
Offline
newbie
Boston
Last seen: 15 years 30 weeks ago
Boston
Timezone: GMT-5
Joined: 2004-04-14
Posts: 3
Points: 0

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...

Smile

EDIT: sorry Stu, I hadn't seen that you posted the same exact thing that I came up with Wink