SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover Technique

    Hey everyone,

    I'm using a rollover technique that admittedly is a bit unorthodox. It looks like this:
    HTML Code:
         <a href="../gallery/">
          <div id="enterButton">
           <img src="enter.png" height="28" width="119" class="hiddenForMSIE" alt="ENTER GALLERY" />
          </div>
         </a>
    Code:
    			#enterButton {
    				border: 1px solid #000000;
    				height: 28px;
    				width: 119px;
    			}
    				a:link #enterButton, a:visited #enterButton {
    					background: #1A1A1A url(../gallery/subNavTileOff.jpg) repeat-x;
    				}
    				a:hover #enterButton, a:active #enterButton {
    					background: #005191 url(../gallery/subNavTileOn.jpg) repeat-x;
    				}
    and can be seen here: http://www.blueleafphotography.com/welcome/

    The good thing is that I can use the anchor pseudo-classes (which IE supports) to control the rollover with css and avoid using javascript. However, it doesn't validate (block-level element inside inline).

    Anyone got any ideas on how to keep this functionality but make it validate?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Replace the DIV with a span, then declare the span to be a block-level element (keep the width and height though). Do that, and you should be fine.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that feels like cheating! but I like it, it validates! thanks a lot. by the way, i voted for you in the sitepoint awards

  4. #4
    SitePoint Enthusiast chovy's Avatar
    Join Date
    Sep 2006
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your selector is incorrect.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh, I think we already established that .

  6. #6
    Texan at Heart Corey Bryant's Avatar
    Join Date
    Sep 2003
    Location
    Castle Rock, CO
    Posts
    2,491
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just in case, there is also this rollover script that might be helpful to some as well.

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Corey Bryant
    Just in case, there is also this rollover script that might be helpful to some as well.
    That's assuming that all your users have JavaScript support. It's much better to do it with CSS if possible than rely on JavaScript although as it's not critical functionality then I wouldn't have any qualms about using it in this circumstance if there were no alternatives.

  8. #8
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Corey Bryant
    Just in case, there is also this rollover script that might be helpful to some as well.
    Wow, that's a really long winded way of doing a roll over. I'll just stick to CSS rollovers thanks. And they work with Javascript turned off too.

    Ryan,


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
  •