Well I was wondering which language I should use for rollover buttons as many people do not have javascript enables so I was wondering whether or not I should use css or not? Which is the best method? Thanks 
Best method of rollover images?
you want a rollover effect like this
rollover image/link A it becomes image/link B ?
or are you talking about transparance?
both things are able to do with css.. be more specific on what you wanan do and I'll help you
rollover image/link A it becomes image/link B ?
or are you talking about transparance?
both things are able to do with css.. be more specific on what you wanan do and I'll help you
First of all, 90% (probably more) of the people that will reach your site will have modern browsers (IE included). Despite some people using the NoScript extension for Firefox, they will all have css and javascript support. People on lynx, will have no images at all. So making it javascript or not doesn't make that much difference.
Enough talk. About your question:
There's a way to do an image rollover with only css. It's using the :hover pseudo-class, and different background images.
Note 1: the a:hover pseudo-class must come after the normal a declaration.
Note 2: IE6 only supports :hover pseudo-class in <a> tags; don't know about IE7, though. Firefox does support the :hover in any element. Don't know about Opera, but it should support also.
If you want to use the :hover pseudo-class in another element besides the <a> element, you should use a small javascript fix for IE6. But that should not bother your accessibility, since IE6 supports javascript. Just let me know if you want to do this.
Hope I have helped and not confused even more.
Enough talk. About your question:
There's a way to do an image rollover with only css. It's using the :hover pseudo-class, and different background images.
| Code: |
| a{
background:url('image1'); } a:hover{ background:url('image2'); } |
Note 1: the a:hover pseudo-class must come after the normal a declaration.
Note 2: IE6 only supports :hover pseudo-class in <a> tags; don't know about IE7, though. Firefox does support the :hover in any element. Don't know about Opera, but it should support also.
If you want to use the :hover pseudo-class in another element besides the <a> element, you should use a small javascript fix for IE6. But that should not bother your accessibility, since IE6 supports javascript. Just let me know if you want to do this.
Hope I have helped and not confused even more.
hi,
if you think that visitors to your site may have javascript off and still you want to put rollovers on your site. then only option is css hover option.
prefectly validated method to put rollovers without any clutter of javascript on your pages.
and very simple to maintain.
if you want to see some samples then visit these links at my website. these are some sample css menus.
http://www.zanetinewebdesign.com/xhtml_examples/flash_effect_css_menu
http://www.zanetinewebdesign.com/xhtml_examples/simple_css_menu/
if you think that visitors to your site may have javascript off and still you want to put rollovers on your site. then only option is css hover option.
prefectly validated method to put rollovers without any clutter of javascript on your pages.
and very simple to maintain.
if you want to see some samples then visit these links at my website. these are some sample css menus.
http://www.zanetinewebdesign.com/xhtml_examples/flash_effect_css_menu
http://www.zanetinewebdesign.com/xhtml_examples/simple_css_menu/
| mariohs wrote: |
| There's a way to do an image rollover with only css. It's using the :hover pseudo-class, and different background images.
|
another css option you can use is background-position. Instead of having seperate images, you have one image with the rollover states stacked on top of each other. So if the display height of the link is 20px you would have a background image which is actually 40px high. The top 20 would be the normal state, the bottom 20 would be the rollover state. example
Then your css would look like:
| Code: |
| a{
background:url('image1'); background-position:top; } a:hover{ background-position:bottom; } |
Keeps the number of images you have floating around down, and if you have a decent amount of rollovers with ids it saves time in typing css since you only need to type in the a:hover section once. Example:
| Code: |
| a#home{
background:url('image1') top; } a#about{ background:url('image2') top; } a#contact{ background:url('image3') top; } a:hover{ background-position:bottom; } |
well if u specify exactly what you want I can give you a code that works just fine... just recently I've done 2 different kind of hover menues with css.. one that swap img1 to img2 when hover.. and the second swap background-color and text color.. also if you wanna have an active option that shows what link is active atm. Everything easy solved with simple css..
 |