My text colors are all in css.
When an image is rolled over I want the text above it to change color to the hover color.
How can I change the color? My colors are set in my css.Have the image in the link:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">hello<br /><img alt="myimage" src="myimage.gif" height="20" width="30" /></a>
css: a:hover {color: green;}Originally posted by Fang
Have the image in the link:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">hello<br /><img alt="myimage" src="myimage.gif" height="20" width="30" /></a>
css: a:hover {color: green;}
I would prefer this way. Not really sure it would be the best way though because you are technically using a block level element in a inline element.
Markup:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Hello<img src="myimage.gif" alt="myimage"></a>
CSS:
a img {
display:block;
width:30px;
height:20px;
}
a:hover {
color:#0F0;
}spufi wrotetechnically using a block level element in a inline element
anchor and image are inline elementsI don't understand the solution:
Here's my code below:
I want that when the image is rolled over (in addition to the image chaning) the text above it (ABOUT US) should also change colors to the hover state.
<tr><td align="center" class=sidelinks><a href=http://www.webdeveloper.com/forum/archive/index.php/aboutus.html onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/aboutus_on.gif',1)" class=sidelinks>ABOUT US</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"aboutus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/aboutus_on.gif',1)"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/aboutus.gif" alt="About Us" name="aboutus" width="50" height="50" border="0"></a></td>
</tr><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//<![CDATA[
<!--
// all JavaScript here
//-->
//]]>
</script>
<style type="text/css">
<!--
/* cascading style sheet */
a:hover {color: green;}
-->
</style>
</head>
<body>
<!-- html here -->
<table border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td align="center" class="sidelinks">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"aboutus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/aboutus_on.gif',1)" class="sidelinks">ABOUT US<br>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/aboutus.gif" alt="About Us" name="aboutus" width="50" height="50" border="0"></a>
</td>
</tr>
</table>
</body>
</html>Thanks!!!
Easy code and works great!Originally posted by Fang
anchor and image are inline elements
In the code I provided the image is actually made a block level element.
When an image is rolled over I want the text above it to change color to the hover color.
How can I change the color? My colors are set in my css.Have the image in the link:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">hello<br /><img alt="myimage" src="myimage.gif" height="20" width="30" /></a>
css: a:hover {color: green;}Originally posted by Fang
Have the image in the link:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">hello<br /><img alt="myimage" src="myimage.gif" height="20" width="30" /></a>
css: a:hover {color: green;}
I would prefer this way. Not really sure it would be the best way though because you are technically using a block level element in a inline element.
Markup:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Hello<img src="myimage.gif" alt="myimage"></a>
CSS:
a img {
display:block;
width:30px;
height:20px;
}
a:hover {
color:#0F0;
}spufi wrotetechnically using a block level element in a inline element
anchor and image are inline elementsI don't understand the solution:
Here's my code below:
I want that when the image is rolled over (in addition to the image chaning) the text above it (ABOUT US) should also change colors to the hover state.
<tr><td align="center" class=sidelinks><a href=http://www.webdeveloper.com/forum/archive/index.php/aboutus.html onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/aboutus_on.gif',1)" class=sidelinks>ABOUT US</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"aboutus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/aboutus_on.gif',1)"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/aboutus.gif" alt="About Us" name="aboutus" width="50" height="50" border="0"></a></td>
</tr><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//<![CDATA[
<!--
// all JavaScript here
//-->
//]]>
</script>
<style type="text/css">
<!--
/* cascading style sheet */
a:hover {color: green;}
-->
</style>
</head>
<body>
<!-- html here -->
<table border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td align="center" class="sidelinks">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"aboutus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/aboutus_on.gif',1)" class="sidelinks">ABOUT US<br>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/aboutus.gif" alt="About Us" name="aboutus" width="50" height="50" border="0"></a>
</td>
</tr>
</table>
</body>
</html>Thanks!!!
Easy code and works great!Originally posted by Fang
anchor and image are inline elements
In the code I provided the image is actually made a block level element.