Hello,<br />
<br />
I want to add simple roll-over effects on my website, so I was wondering what the best way of adding roll-overs is. Currently, I'm using Imageready to do my roll-over's, but I'm not sure if it works in all broswers. Which method would be the safest? Or should I simply use Flash to achive my roll-over's? Thanks for the help.
<!--content-->css, try this:<br />
<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<br />
<html><br />
<head><br />
<title>Untitled</title><br />
<style type="text/css"><br />
A:link { color: #3366CC; text-decoration: none; border: 1px solid #AACCEE;width:100px;display:block;}<br />
A:visited { color: #6633CC; text-decoration: none ;width:100px;display:block;}<br />
A:hover { background: #DDEEFF; border: 1px dashed #AACCEE;width:100px;display:block; }<br />
A:active { background: #3366CC; color: #FFFFFF; border: 1px inset #3366CC;width:100px;display:block;}<br />
</style><br />
<br />
</head><br />
<br />
<body><br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"foo.html"> home</a><br />
<br />
</body><br />
</html><!--content-->image roll-overs Leo
<br />
<br />
yes coon, that is fine what you are using<!--content-->Originally posted by scoutt <br />
image roll-overs Leo<br />
<br />
<br />
Doh
<!--content-->how about this then <br />
<br />
A:link { color: #3366CC; text-decoration: none;width:100px;height:30px;display:block;background:url(foo-down.gif);}<br />
A:visited { color: #6633CC; text-decoration: none ;width:100px;height:30px;display:block;background:url(foo-down.gif);}<br />
A:hover {color:width:100px;height:30px;display:block;background:url(foo-up.gif); }<br />
A:active { color: #FFFFFF;width:100px;height:30px;display:block;background:url(foo-up.gif);}<!--content-->can you even do that? then what would the link look like?<br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"file.html"></a><!--content-->i've not tested it in moz yet but works in IE fine!!<br />
<br />
yup, either :<br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"file.html"> </a><br />
<br />
or you can have your rollover image without the text in the background, put the text in normally for SE's to read
<br />
<br />
/edit<br />
<br />
havent got moz on this pc, but in theory there shouldn't be a problem, if you can set the background color why not set a background image?<!--content-->works in mozilla 1.5<br />
<br />
but it is jumpy if the image is a good size, 100 or greater.<br />
<br />
not a prefered way but it does work. just never seen it done that way so it looks a little strange.<!--content-->I ran across this awhile back. Pretty interesting technique for image rollovers:<br />
<!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/">http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/</a><!-- m --><br />
Supposed to work in CSS2 capable browsers, but it works in IE6 anyway......<!--content-->Originally posted by Android <br />
I ran across this awhile back. Pretty interesting technique for image rollovers:<br />
<!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/">http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/</a><!-- m --><br />
Supposed to work in CSS2 capable browsers, but it works in IE6 anyway...... <br />
<br />
hey cool, pity it uses negative values though
<!--content-->yeah it would crash in Mozilla. it hates negative numbers.<br />
<br />
also was just thinking, Leo's way will not work in 4th generation browsers if you are worried back that far for safe roll-overs.<!--content-->Originally posted by scoutt <br />
Leo's way will not work in 4th generation browsers if you are worried back that far for safe roll-overs. <br />
<br />
yeah, i think coon is using pretty much the safest rollover method, but hey it was fun giving it a shot with css<!--content-->Thanks guys. You helped me a lot. <!--content--
no Rangers shirt on your site <!--content-->In my opinion, the best type of rollover is not an image at all. It simply looks like an image. This makes the load time much faster and there is less of a possibility of bad links due to missing pix, etc.<br />
<br />
The code to do this is:<br />
<br />
a:link { text-decoration: none; color: #F2E511; }<br />
a:hover { text-decoration: underline; color: #F2E511; }<br />
a:active { text-decoration: none; color: #F2E511; }<br />
a:visited { text-decoration: none; color: #E78512; }<br />
<br />
a#menu:link { display:block; padding: 2px; margin:0px; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:2px solid #808080; border-bottom:2px solid #000; width:110px; line-height:20px; background: #9A2919; color: #efefef; font: 14px arial; text-decoration: none; <br />
}<br />
<br />
a#menu:visited { display:block; padding: 2px; margin:0px; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:2px solid #808080; border-bottom:2px solid #000; width:110px; line-height:20px; background: #9A2919; color: #efefef; font: 14px arial; text-decoration: none; <br />
}<br />
<br />
a#menu:active { display:block; padding: 2px; margin:0px; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:2px solid #808080; border-bottom:2px solid #000; width:110px; line-height:20px; background: #9A2919; color: #efefef; font: 14px arial; text-decoration: none; <br />
}<br />
a#menu:hover { display:block; background: #efefef; color: #9A2919; text-decoration: none; <br />
}<br />
<br />
<br />
<td border="2"><br />
<a id="menu" href=http://www.htmlforums.com/archive/index.php/"contact.html"><font size="3" face="Times"><b><center>Contact Us</b></center></font></a><br />
</td><br />
<br />
<br />
<br />
To see this effect, go to hatfoundation.netfirms.com (<!-- m --><a class="postlink" href="http://www.hatfoundation.netfirms.com">http://www.hatfoundation.netfirms.com</a><!-- m -->)<!--content-->
<br />
I want to add simple roll-over effects on my website, so I was wondering what the best way of adding roll-overs is. Currently, I'm using Imageready to do my roll-over's, but I'm not sure if it works in all broswers. Which method would be the safest? Or should I simply use Flash to achive my roll-over's? Thanks for the help.
<!--content-->css, try this:<br /><br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<br />
<html><br />
<head><br />
<title>Untitled</title><br />
<style type="text/css"><br />
A:link { color: #3366CC; text-decoration: none; border: 1px solid #AACCEE;width:100px;display:block;}<br />
A:visited { color: #6633CC; text-decoration: none ;width:100px;display:block;}<br />
A:hover { background: #DDEEFF; border: 1px dashed #AACCEE;width:100px;display:block; }<br />
A:active { background: #3366CC; color: #FFFFFF; border: 1px inset #3366CC;width:100px;display:block;}<br />
</style><br />
<br />
</head><br />
<br />
<body><br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"foo.html"> home</a><br />
<br />
</body><br />
</html><!--content-->image roll-overs Leo
<br /><br />
yes coon, that is fine what you are using<!--content-->Originally posted by scoutt <br />
image roll-overs Leo
<br /><br />
<br />
Doh
<!--content-->how about this then <br /><br />
A:link { color: #3366CC; text-decoration: none;width:100px;height:30px;display:block;background:url(foo-down.gif);}<br />
A:visited { color: #6633CC; text-decoration: none ;width:100px;height:30px;display:block;background:url(foo-down.gif);}<br />
A:hover {color:width:100px;height:30px;display:block;background:url(foo-up.gif); }<br />
A:active { color: #FFFFFF;width:100px;height:30px;display:block;background:url(foo-up.gif);}<!--content-->can you even do that? then what would the link look like?<br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"file.html"></a>
<!--content-->i've not tested it in moz yet but works in IE fine!!<br /><br />
yup, either :<br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"file.html"> </a><br />
<br />
or you can have your rollover image without the text in the background, put the text in normally for SE's to read
<br /><br />
/edit<br />
<br />
havent got moz on this pc, but in theory there shouldn't be a problem, if you can set the background color why not set a background image?<!--content-->works in mozilla 1.5<br />
<br />
but it is jumpy if the image is a good size, 100 or greater.<br />
<br />
not a prefered way but it does work. just never seen it done that way so it looks a little strange.
<!--content-->I ran across this awhile back. Pretty interesting technique for image rollovers:<br /><!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/">http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/</a><!-- m --><br />
Supposed to work in CSS2 capable browsers, but it works in IE6 anyway......
<!--content-->Originally posted by Android <br />I ran across this awhile back. Pretty interesting technique for image rollovers:<br />
<!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/">http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/</a><!-- m --><br />
Supposed to work in CSS2 capable browsers, but it works in IE6 anyway......
<br /><br />
hey cool, pity it uses negative values though
<!--content-->yeah it would crash in Mozilla. it hates negative numbers.<br /><br />
also was just thinking, Leo's way will not work in 4th generation browsers if you are worried back that far for safe roll-overs.<!--content-->Originally posted by scoutt <br />
Leo's way will not work in 4th generation browsers if you are worried back that far for safe roll-overs. <br />
<br />
yeah, i think coon is using pretty much the safest rollover method, but hey it was fun giving it a shot with css
<!--content-->Thanks guys. You helped me a lot. <!--content-- no Rangers shirt on your site <!--content-->In my opinion, the best type of rollover is not an image at all. It simply looks like an image. This makes the load time much faster and there is less of a possibility of bad links due to missing pix, etc.<br /><br />
The code to do this is:<br />
<br />
a:link { text-decoration: none; color: #F2E511; }<br />
a:hover { text-decoration: underline; color: #F2E511; }<br />
a:active { text-decoration: none; color: #F2E511; }<br />
a:visited { text-decoration: none; color: #E78512; }<br />
<br />
a#menu:link { display:block; padding: 2px; margin:0px; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:2px solid #808080; border-bottom:2px solid #000; width:110px; line-height:20px; background: #9A2919; color: #efefef; font: 14px arial; text-decoration: none; <br />
}<br />
<br />
a#menu:visited { display:block; padding: 2px; margin:0px; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:2px solid #808080; border-bottom:2px solid #000; width:110px; line-height:20px; background: #9A2919; color: #efefef; font: 14px arial; text-decoration: none; <br />
}<br />
<br />
a#menu:active { display:block; padding: 2px; margin:0px; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:2px solid #808080; border-bottom:2px solid #000; width:110px; line-height:20px; background: #9A2919; color: #efefef; font: 14px arial; text-decoration: none; <br />
}<br />
a#menu:hover { display:block; background: #efefef; color: #9A2919; text-decoration: none; <br />
}<br />
<br />
<br />
<td border="2"><br />
<a id="menu" href=http://www.htmlforums.com/archive/index.php/"contact.html"><font size="3" face="Times"><b><center>Contact Us</b></center></font></a><br />
</td><br />
<br />
<br />
<br />
To see this effect, go to hatfoundation.netfirms.com (<!-- m --><a class="postlink" href="http://www.hatfoundation.netfirms.com">http://www.hatfoundation.netfirms.com</a><!-- m -->)<!--content-->