Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Image Border and Events 1
- Thread starter Michael42
- Start date
-
1
- #2
this is done in CSS with a combination of JavaScript.
<html>
<head>
<title>CSS example</title>
<style>
.borderOn { border : 1px solid black ; }
.borderOff { border : none ; }
</style>
</head>
<body>
<table>
<tr>
<td class=borderOff onMouseOver="this.className='borderOn'" onMouseOut="this.className='borderOff'">Put your mouse over me</td>
</tr>
</table>
</body>
</html>
I recommend however that you use this instead for the CSS :
.borderOn { border : 1px solid black ; }
.borderOff { border : 1px solid white ; }
Hope this helps. Gary Haran
<html>
<head>
<title>CSS example</title>
<style>
.borderOn { border : 1px solid black ; }
.borderOff { border : none ; }
</style>
</head>
<body>
<table>
<tr>
<td class=borderOff onMouseOver="this.className='borderOn'" onMouseOut="this.className='borderOff'">Put your mouse over me</td>
</tr>
</table>
</body>
</html>
I recommend however that you use this instead for the CSS :
.borderOn { border : 1px solid black ; }
.borderOff { border : 1px solid white ; }
Hope this helps. Gary Haran
It's possible to do without JavaScript, but support is spotty. The
pseudo-class is used like this:
The only element that reliably supports the :hover pseudo-class is the <a> element, but if you're enclosing your <img> tag in a link, it should work fine.
Code:
:hover
Code:
<style type="text/css">
.myImg
{
border:2px solid transparent;
}
.myImg:hover
{
border:2px solid blue;
}
</style>- Thread starter
- #4
- Status
Similar threads
- Locked
- Question
- Locked
- Question