SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Most graceful, unobtrusive rollovers?

    Hey all I have no choice but to use rollovers for this website, but they have to degrade in the most "beautiful" way if the user has javascript & CSS disabled, I've been hunting for these ideal mouseovers but there seems to be too much of a variation for them and too much code still to achieve something so simple! Does anyone know of any good clean rollovers out there?

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use CSS for the rollovers instead of JavaScript. Google it, you should get tons of results.

  3. #3
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    On is less likely to see CSS disabled enless the user turns it off with a third party tool, Opera excluded as it has it built in.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  4. #4
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the problem with css, rollover is not available for many html elements, it is only take effect on a link <a > element.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a CSS solution, then use conditional comments to provide IE with something like this: xImgRollSetup. It's old, but works well.

  6. #6
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, javascript is required. Anyway, rollover effect usually poses no significant accessibility issue.

  7. #7
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SimplyFu View Post
    the problem with css, rollover is not available for many html elements, it is only take effect on a link <a > element.
    Only in IE < 7 but there is hope one file you add to your CSS just google whatever:hover first listing.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you could do is to use CSS hover for whatever element and then use behaviours to "patch" IE 6


  9. #9
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, but what I really need is a basic javascript rollover.. I know all the CSS variatione etc. But I need to work with javascript on this issue, hence me posting in this section. So what is the cleanest javascript rollover around?

  10. #10
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var elm = getElementById('someID');
    
    elm.onMouseOver = function() {
        // Do stuff...
    }
    
    elm.OnMouseOut = function() {
        // Do Stuff...
    }
    If you use a framework it is cake.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •