hey there
i have a problem, i'm working on a gallery php script and need help, i have a picture, it has a lightgray border around, and if theres a mouseover event, i want the border to turn gray. how can i do that?
thanks in advance
+2
A:
Use the :hover pseudo class. For example:
<html>
<head>
<style>
IMG.HoverBorder {border:5px solid #eee;}
IMG.HoverBorder:hover {border:5px solid #555;}
</style>
</head>
<body>
<img class="HoverBorder" src="test.png" />
</body>
</html>
The above code works well on all sane browsers I have access to. If you need IE 6 support, take a deep breath and check this out (thanks to @Brian Kim for reminding me about IE6):
<html>
<head>
<style>
a:hover{ background-color:white; }
a:link img, a:visited img{ border:5px solid #eee; }
a:hover img{ border:5px solid #555; }
</style>
</head>
<body>
<a href="#"><img class="HoverBorder" src="03 messed up status log edit IE6.png" /></a>
</body>
</html>
There are several variants on this approach--I suggest you click through to that site for other options that might be more suitable to your situation.
Michael Haren
2009-01-21 18:42:59
Does this work on IE6, too?
Brian Kim
2009-01-21 18:51:32
I updated the answer with IE6 info, thanks for reminding me
Michael Haren
2009-01-21 19:39:38
A:
use .mypictureclass:hover to apply the border.
but also apply a transparent border to the picture display class to avoid it jumping when the border is added.
GeekyMonkey
2009-01-21 18:43:52
A:
okay dudes i've got it XD as i said, i'm a html guy, and i just found out how it works, it used a CSS as style, so i tried much things, and, surprise, i just made a copy of the imagethumbnail-tag and changed the bordercoler and edited the title to imagethumbnail:hover
thank y'all as well :)
A:
<style type="text/css">
body,td,th {
font-size: 14px;
color: #FFF;
}
body {
background-color: #000;
}
a {
font-size: 14px;
color: #FFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
color: #FC3;
}
a:img,
a:link img,
a:visited img,
a:focus img,
a:hover img,
a:active img {
border: none;
}
</style>
The code follows everything I've seen so far, but still isn't displayed in IE correctly & shows borders around the images. This is a sample of one of the mouseover images.
<a href="index.html">
<img src="images/buttons/home.png" alt="Home" width="216" height="44"
onmouseover="this.src='images/buttons/home_.png'" onmouseout="this.src='images/buttons/home.png'"></a>