SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    disjointed rollovers

    Are they web-standard compliant?

    You rollover a text link, and an image changes in a specified box, depending on which text link you rollover.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,381
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well I suppose it depends on whether you make them compliant or not

    Not quite sure what you mean so a little more explantion would be good.

    Disjointed rollovers can be valid code and can be done in a fashion in css rather than js although not quite as flexibly.

    http://www.pmob.co.uk/temp/disjointedcssrollover.htm

    Obviously you can set up alt and title attributes for the images so screen readers know what they are etc.

    Paul

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, as i said, using text links:

    Here u go:

    http://www.audi.com/com/en/new_cars/new_cars.jsp

    This is using js though!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,381
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well, as i said, using text links:
    The technique I showed you above works exactly the same with text as it does with images and without js.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    span {
     display:none; 
    } 
    a:hover {
     color: #666666;
     background: #FFFFCC;
     text-decoration: none;
    }
    #textcontainer {
     position:absolute;
     left:200px;
     top:100px;
     width:155px;
     height:102px;
     border:1px solid #000;
    }
    a:hover span {
     display:block;
     position:absolute;
     left:200px;
     top:100px;
     width:155px;
     height:102px;
     border:1px solid #000;
     text-align:center;
    }
    </style>
    </head>
    <body>
    <p><a href="#">Item 1
      <span>This is the text for item 1</span></a></p>
    <p><a href="#">Item 2 
      <span>This is the text for item 2 : some more text :</span></a></p>
    <p><a href="#">Item 3 
      <span>This is the text for item 3 : Lots more text : an more text</span></a></p>
    <p>&nbsp;</p>
    <div id="textcontainer"></div>
    </body>
    </html>
    Paul


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
  •