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=http://www.webdeveloper.com/forum/archive/index.php/"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...for some reason this appears to have a weird border, but it's easier to work with:
<style>
.TSimage{
border-width: 1px;
border-style: solid;
border-color: #0000ff
}
.TSimage:hover{
border-style: solid;
border-color: #00ff00
}
</style>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mylink.php"
class="TSimage"><img
src=http://www.webdeveloper.com/forum/archive/index.php/"myimage.jpg"></a><style type="text/css">
.tsimage {border: 1px solid #fff}
.tsimage:hover {border: 1px solid #ccc}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#nogo"><img class="tsimage" src="file.gif" width="x" height="x" alt="x" /></a></body></html>bathurst_guy, IE does not do image hover.
<!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=http://www.webdeveloper.com/forum/archive/index.php/"mylink.php" class="TSimage"></a>
</div>
</body>
</html>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=http://www.webdeveloper.com/forum/archive/index.php/"#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 <!-- m --><a class="postlink" href="http://cssvault.com">http://cssvault.com</a><!-- m --> (this is where I found it works on IE and Firefox, I just simplified)This seems to work : <!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.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.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=http://www.webdeveloper.com/forum/archive/index.php/"wine.jpg" alt="wine" /></span>
</body>
</html>
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=http://www.webdeveloper.com/forum/archive/index.php/"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...for some reason this appears to have a weird border, but it's easier to work with:
<style>
.TSimage{
border-width: 1px;
border-style: solid;
border-color: #0000ff
}
.TSimage:hover{
border-style: solid;
border-color: #00ff00
}
</style>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mylink.php"
class="TSimage"><img
src=http://www.webdeveloper.com/forum/archive/index.php/"myimage.jpg"></a><style type="text/css">
.tsimage {border: 1px solid #fff}
.tsimage:hover {border: 1px solid #ccc}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#nogo"><img class="tsimage" src="file.gif" width="x" height="x" alt="x" /></a></body></html>bathurst_guy, IE does not do image hover.
<!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=http://www.webdeveloper.com/forum/archive/index.php/"mylink.php" class="TSimage"></a>
</div>
</body>
</html>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=http://www.webdeveloper.com/forum/archive/index.php/"#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 <!-- m --><a class="postlink" href="http://cssvault.com">http://cssvault.com</a><!-- m --> (this is where I found it works on IE and Firefox, I just simplified)This seems to work : <!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.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.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=http://www.webdeveloper.com/forum/archive/index.php/"wine.jpg" alt="wine" /></span>
</body>
</html>