Sorry im new to HTML, CSS, and Java but i want to use an animated rollover button, for example, in part of a signature. I assume CSS is what i need to use since most websites don't allow java for that. <!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1.gif">http://img.photobucket.com/albums/v448/ ... ayer-1.gif</a><!-- m --> would be the Standing Picture and <!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1-ov.gif">http://img.photobucket.com/albums/v448/ ... r-1-ov.gif</a><!-- m --> would be the rolled over image. if anyone could help me that would be great. I mainly want to use it for a signature or on my "MySpace" account so it has to be CSS or possibly HTML but i can't find anything that works. I appreciate any help.a#sig {
display:block;
width:179px;
height:74px;
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1.gif">http://img.photobucket.com/albums/v448/ ... ayer-1.gif</a><!-- m -->);
}
a#sig:hover {
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1-ov.gif">http://img.photobucket.com/albums/v448/ ... r-1-ov.gif</a><!-- m -->);
}
and in the page, <a id="sig" href=http://www.webdeveloper.com/forum/archive/index.php/"#" onclick="return false"></a>
You have to use an anchor or IE can't :hover it.a#sig {
display:block;
width:179px;
height:74px;
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1.gif">http://img.photobucket.com/albums/v448/ ... ayer-1.gif</a><!-- m -->);
}
a#sig:hover {
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1-ov.gif">http://img.photobucket.com/albums/v448/ ... r-1-ov.gif</a><!-- m -->);
}
and in the page, <a id="sig" href=http://www.webdeveloper.com/forum/archive/index.php/"#" onclick="return false"></a>
You have to use an anchor or IE can't :hover it.
Can you please explain the anchor in more detail (i.e. how you do it and what effect it has on IE)? Thanks.The CSS pseudo-class :hover is supported only for the anchor element (<a> tag, aka a link or hyperlink) in Internet Exploder. Better browser support it for most elements.
Therefore, in order to make javascript-free rollover effects work in IE, you must use an anchor (<a>) (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/links.html">http://www.w3.org/TR/html401/struct/links.html</a><!-- m -->). Javascript-free (CSS (<!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/">http://www.w3.org/Style/CSS/</a><!-- m -->))rollovers are better than javascript-dependent rollovers because they will still be seen by users with javascript turned off.
Of course, generally, rollover effects are just eye-candy anyway, so whether they work or not is not of paramount importance.
To make this work, you should put it on your page like this (example is HTML 4.01 Strict, but you should be able to do this in any doctype):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html lang="en">
<head>
<title>CSS Rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a#sig {
display:block;
width:179px;
height:74px;
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1.gif">http://img.photobucket.com/albums/v448/ ... ayer-1.gif</a><!-- m -->);
}
a#sig:hover {
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1-ov.gif">http://img.photobucket.com/albums/v448/ ... r-1-ov.gif</a><!-- m -->);
}
</style>
</head>
<body>
<p><a id="sig" href=http://www.webdeveloper.com/forum/archive/index.php/"#" onclick="return false"></a></p>
</body>
</html>The CSS pseudo-class :hover is supported only for the anchor element (<a> tag, aka a link or hyperlink) in Internet Exploder. Better browser support it for most elements.
Therefore, in order to make javascript-free rollover effects work in IE, you must use an anchor (<a>) (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/links.html">http://www.w3.org/TR/html401/struct/links.html</a><!-- m -->). Javascript-free (CSS (<!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/">http://www.w3.org/Style/CSS/</a><!-- m -->))rollovers are better than javascript-dependent rollovers because they will still be seen by users with javascript turned off.
Of course, generally, rollover effects are just eye-candy anyway, so whether they work or not is not of paramount importance.
To make this work, you should put it on your page like this (example is HTML 4.01 Strict, but you should be able to do this in any doctype):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html lang="en">
<head>
<title>CSS Rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a#sig {
display:block;
width:179px;
height:74px;
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1.gif">http://img.photobucket.com/albums/v448/ ... ayer-1.gif</a><!-- m -->);
}
a#sig:hover {
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1-ov.gif">http://img.photobucket.com/albums/v448/ ... r-1-ov.gif</a><!-- m -->);
}
</style>
</head>
<body>
<p><a id="sig" href=http://www.webdeveloper.com/forum/archive/index.php/"#" onclick="return false"></a></p>
</body>
</html>
The last <p> line that reads "onclick="return false"", what exactly is that line telling the browser to do? I know that it is telling it to replace the first image
with the second image but how does it equate "return false" to "replace this image with that listed in 'hover'"? Does my question make sense?That tells the browser to do nothing when the user clicks on that element. It's not related to the image replacement at all; in fact, you could take the onclick="return false" out, and the rollover would still work fine. The image replacement is done by the CSS stylesheet.
The thing is, if you only want the rollover effect, you don't want anything to happen when the image is clicked. Since IE only recognizes the :hover pseudo-class for links, but you don't want it to do anything when clicked, you use onclick="return false;" to keep the link from doing anything when clicked.That tells the browser to do nothing when the user clicks on that element. It's not related to the image replacement at all; in fact, you could take the onclick="return false" out, and the rollover would still work fine. The image replacement is done by the CSS stylesheet.
The thing is, if you only want the rollover effect, you don't want anything to happen when the image is clicked. Since IE only recognizes the :hover pseudo-class for links, but you don't want it to do anything when clicked, you use onclick="return false;" to keep the link from doing anything when clicked.
Ahh, i see. So the "return false" command is just a precautionary measure to make sure that IE treats the rollover effect correctly. I think I might start using CSS rollovers now instead of javascript. Great explanation, thanks.Ahh, i see. So the "return false" command is just a precautionary measure to make sure that IE treats the rollover effect correctly.It's there to make clicking the link a no-op. Otherwise the browser (not just IE) will do some kind of navigation operation, e.g. reload the page. The fact it's an anchor is the IE work around.Thanks a lot for the help. You all rock.
display:block;
width:179px;
height:74px;
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1.gif">http://img.photobucket.com/albums/v448/ ... ayer-1.gif</a><!-- m -->);
}
a#sig:hover {
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1-ov.gif">http://img.photobucket.com/albums/v448/ ... r-1-ov.gif</a><!-- m -->);
}
and in the page, <a id="sig" href=http://www.webdeveloper.com/forum/archive/index.php/"#" onclick="return false"></a>
You have to use an anchor or IE can't :hover it.a#sig {
display:block;
width:179px;
height:74px;
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1.gif">http://img.photobucket.com/albums/v448/ ... ayer-1.gif</a><!-- m -->);
}
a#sig:hover {
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1-ov.gif">http://img.photobucket.com/albums/v448/ ... r-1-ov.gif</a><!-- m -->);
}
and in the page, <a id="sig" href=http://www.webdeveloper.com/forum/archive/index.php/"#" onclick="return false"></a>
You have to use an anchor or IE can't :hover it.
Can you please explain the anchor in more detail (i.e. how you do it and what effect it has on IE)? Thanks.The CSS pseudo-class :hover is supported only for the anchor element (<a> tag, aka a link or hyperlink) in Internet Exploder. Better browser support it for most elements.
Therefore, in order to make javascript-free rollover effects work in IE, you must use an anchor (<a>) (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/links.html">http://www.w3.org/TR/html401/struct/links.html</a><!-- m -->). Javascript-free (CSS (<!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/">http://www.w3.org/Style/CSS/</a><!-- m -->))rollovers are better than javascript-dependent rollovers because they will still be seen by users with javascript turned off.
Of course, generally, rollover effects are just eye-candy anyway, so whether they work or not is not of paramount importance.
To make this work, you should put it on your page like this (example is HTML 4.01 Strict, but you should be able to do this in any doctype):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html lang="en">
<head>
<title>CSS Rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a#sig {
display:block;
width:179px;
height:74px;
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1.gif">http://img.photobucket.com/albums/v448/ ... ayer-1.gif</a><!-- m -->);
}
a#sig:hover {
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1-ov.gif">http://img.photobucket.com/albums/v448/ ... r-1-ov.gif</a><!-- m -->);
}
</style>
</head>
<body>
<p><a id="sig" href=http://www.webdeveloper.com/forum/archive/index.php/"#" onclick="return false"></a></p>
</body>
</html>The CSS pseudo-class :hover is supported only for the anchor element (<a> tag, aka a link or hyperlink) in Internet Exploder. Better browser support it for most elements.
Therefore, in order to make javascript-free rollover effects work in IE, you must use an anchor (<a>) (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/links.html">http://www.w3.org/TR/html401/struct/links.html</a><!-- m -->). Javascript-free (CSS (<!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/">http://www.w3.org/Style/CSS/</a><!-- m -->))rollovers are better than javascript-dependent rollovers because they will still be seen by users with javascript turned off.
Of course, generally, rollover effects are just eye-candy anyway, so whether they work or not is not of paramount importance.
To make this work, you should put it on your page like this (example is HTML 4.01 Strict, but you should be able to do this in any doctype):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html lang="en">
<head>
<title>CSS Rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a#sig {
display:block;
width:179px;
height:74px;
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1.gif">http://img.photobucket.com/albums/v448/ ... ayer-1.gif</a><!-- m -->);
}
a#sig:hover {
background:url(<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v448/Urdar/Miscelanious/Marshell-Cocaine_Layer-1-ov.gif">http://img.photobucket.com/albums/v448/ ... r-1-ov.gif</a><!-- m -->);
}
</style>
</head>
<body>
<p><a id="sig" href=http://www.webdeveloper.com/forum/archive/index.php/"#" onclick="return false"></a></p>
</body>
</html>
The last <p> line that reads "onclick="return false"", what exactly is that line telling the browser to do? I know that it is telling it to replace the first image
with the second image but how does it equate "return false" to "replace this image with that listed in 'hover'"? Does my question make sense?That tells the browser to do nothing when the user clicks on that element. It's not related to the image replacement at all; in fact, you could take the onclick="return false" out, and the rollover would still work fine. The image replacement is done by the CSS stylesheet.
The thing is, if you only want the rollover effect, you don't want anything to happen when the image is clicked. Since IE only recognizes the :hover pseudo-class for links, but you don't want it to do anything when clicked, you use onclick="return false;" to keep the link from doing anything when clicked.That tells the browser to do nothing when the user clicks on that element. It's not related to the image replacement at all; in fact, you could take the onclick="return false" out, and the rollover would still work fine. The image replacement is done by the CSS stylesheet.
The thing is, if you only want the rollover effect, you don't want anything to happen when the image is clicked. Since IE only recognizes the :hover pseudo-class for links, but you don't want it to do anything when clicked, you use onclick="return false;" to keep the link from doing anything when clicked.
Ahh, i see. So the "return false" command is just a precautionary measure to make sure that IE treats the rollover effect correctly. I think I might start using CSS rollovers now instead of javascript. Great explanation, thanks.Ahh, i see. So the "return false" command is just a precautionary measure to make sure that IE treats the rollover effect correctly.It's there to make clicking the link a no-op. Otherwise the browser (not just IE) will do some kind of navigation operation, e.g. reload the page. The fact it's an anchor is the IE work around.Thanks a lot for the help. You all rock.