Baffled by simple image rollover class. Pls help!

lightsout · #1 04-25-2005, 08:13 AM

Hello,

I'm trying to create a simple class that will create a 1 pixel border around an image, then when hovered over the 1 pixel border changes color.

I cannot find the correct solution that works within Safari on a mac, IE on a mac, or IE in Windows. Any help/workarounds appreciated. Something that works!

I'm trying to call the class like so...

<a href="mylink.php" class="TSimage"><img src="myimage.jpg"></a>

I've tried this:

.TSimage a:link {border:1px solid; border-color: #ffffff;}
.TSimage a:visited {border:1px solid; border-color: #ffffff;}
.TSimage a:hover {border:1px solid; border-color: #cccccc;}
.TSimage a:visited {border:1px solid; border-color: #ffffff;}

I've tried this:

.TSimage {border: 1px solid #ffffff}
.TSimage:hover {color: #cccccc}

I've tried this:

.TSimage a {border: 1px solid #ffffff}
.TSimage a:hover {color: #cccccc}

Nothing works! Please help! Anyone! Thanks in advance...

scragar · #2 04-25-2005, 08:36 AM

for some reason this appears to have a weird border, but it's easier to work with:

Code:

<style>
.TSimage{
border-width: 1px;
border-style: solid;
border-color: #0000ff
}
.TSimage:hover{
border-style: solid;
border-color: #00ff00
}
</style>
<a href="mylink.php"
class="TSimage"><img
src="myimage.jpg"></a>

**bathurst_guy** · #3 04-25-2005, 08:56 AM

**Fang** · #4 04-25-2005, 10:42 AM

bathurst_guy, IE does not do image hover.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>border</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!-- 
.TSimage {
display:block;
background:#ccc url(myimage.jpg) no-repeat;
width:50px; /* width and height of image */
height:25px;
border:1px solid #00f;
}
 a.TSimage:hover {
border:1px solid #0f0;
}
-->
</style>
</head>
<body>
<div>
	<a href="mylink.php" class="TSimage"></a>
</div>
</body>
</html>

**bathurst_guy** · #5 04-26-2005, 12:43 AM

I Think It Does. Your way would take ages, you would have to make a different class for each image.

Try this:

<style type="text/css">
a:link {color: #998080;}
a:visited {color: #666;}
a:hover {color: #000;}
a img {border: none;}
.tsImg img{
border: 1px solid #fff;
}
.tsImg a:hover img{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="tsImg">
<p><a href="#nogo"><img src="img1.gif" height="10" width="10" alt="image 1" /></a></p>
</div>

Conditions that I've found (sorry I didn't notice these before my last post):
1. Needs to have basic anchor tags
2. The class needs to have the "Img" at the end of the name (with the capital I)

Refer to http://cssvault.com (this is where I found it works on IE and Firefox, I just simplified)

BonRouge · #6 04-26-2005, 03:38 AM

This seems to work :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<script type="text/javascript">
sfHover = function() {
	var sfEls = document.body.getElementsByTagName("IMG");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
.TSimage img{border: 1px solid #fff;}
.TSimage:hover img, .TSimage .sfhover {border: 1px solid #ccc;}
</style>
</head>
<body>
<span class="TSimage"><img src="wine.jpg" alt="wine" /></span>
</body>
</html>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)