Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

JavaScript / DOM / AJAX: double rollover using text instead of an image

Bottom of Page

1 to 9 of 9

  1.  
  1.  permalink
    I would like to rollover text and have an image change elsewhere on the page. Like a double rollover except the item you are mousing over is a text link, not an image. Is this possible? Definitely open to a clever css solution as well if one exists!
  2.  permalink
    CSS has only rare instances where it crosses the boundary of style into the realm of behavior. CSS doesn't go so far as to achieve your desired result above, nor should it. I'll get on the JavaScript solution after I feed my baby...
    •  
      CommentAuthorJohnRiv
    • CommentTimeNov 4th 2006
     permalink
    Yes it is possible with CSS. I put together an example page so you can see how it's done.

    And to give credit where it's due, I first saw this technique during Ethan Marcotte's presentation at SXSW 2006
  4.  permalink
    Okay.. an empty SPAN element, inside of the ANCHOR... that's a great! idea....
  5.  permalink
    VERY clever John! Thank you!
  6.  permalink
    yet it makes NO sense semantically
    •  
      CommentAuthorJohnRiv
    • CommentTimeNov 8th 2006
     permalink
    GASP! An empty inline element inside of another inline element! Say it isn't so!

    I guess more verbose code like this would make you happier, PettyRider:

    <a href="somelink.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2"><span><span>Alternate text about the background image that can be hidden via CSS</span></span> Text inside of the anchor</a>

    Or for those using a web browser that supports :hover on elements other than an anchor, we could do:

    <p><span><span>Alternate text about the background image that can be hidden via CSS</span></span> This paragraph could have a p:hover CSS rule applied</p>

    Then you'd really be happy, won't you? Of course that won't work in IE6 and below... so when a client asks why it doesn't work in his un-upgraded browser (and IE7 hasn't even been available for a month yet), have a fun time convincing him/her that semantics are more important than functionality.

    Might as well take down the CSS Zen Garden because of it's empty spans thrown haphazardly at the bottom of the code... it's ruining lives and needs to be stopped!

    </end sarcasm>

    seriously... semantics are important (I'm all for proper sematic code), but the bottom line is results matter most. And what's wrong with having some fun pushing the boundaries of CSS with some unsemantic code?
    • CommentAuthorjhflau11
    • CommentTimeNov 9th 2006
     permalink
    Eric Meyer has an example on css/edge. I used this on this site.
    • CommentAuthorPettyRider
    • CommentTimeNov 9th 2006 edited
     permalink
    Having this sort of behavior might be a dumb idea in the first place.

    And actually, John, I like to think my clients don't need to worry about semantics. That's my job, so I'd never give them a choice between semantics and functionality in the first place. They shouldn't even be considered together in one thought. There's another layer to the website that does account for functionality, and it's handled with JavaScript. When you hover over an element in the DOM, it becomes a matter of behavior, and not a matter of style. The :hover pseudo-class is just a tiny blend into the behavior layer.

    I would mark up the content however is most appropriate first, then worry about style and behavior.

1 to 9 of 9

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page