SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict avstu's Avatar
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    'Disjointed Rollover'

    If you click on the link below, and scroll over the images notice the rollover text effect.

    http://www.westbrom.com/0/programmes/home.html

    Ive been told this is a Disjointed Rollover. But how would i go about doing this myself?

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

    The link you are pointing to uses javascript for the text box rollovers.

    You can do a similar thing with css but the text boxes will be static. I have a tutorial here that shows how to do it.

  3. #3
    SitePoint Addict avstu's Avatar
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You say use this code:

    .example1 a{position:relative;}/* set stacking context*/
    .example1 a span{
    visibility:hidden;/* hide message initially*/
    position:absolute;
    top:-66px;
    left:-70px;
    width:250px;
    padding:5px;
    background:#829900;
    color:#fff;
    border:2px inset green;
    }
    .example1 a:hover{visibility:visible}/* ie bug needed to make span show*/
    .example1 a:hover span{visibility:visible;}/* reveal image*/
    But when you do the rollover i dont understand where you put that text that appears on the rollover? Sorry if i sound stupid im a complete CSS idiot.

    Also, what javascript script is it?

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

    The text goes inside the anchor and inside the span which is then absolutely placed into position.

    Code:
    <p class="example1">First a simple example - roll your mouse over the following <a href="#null">Rollover here please<span>. As you can see a nice little message box appears over the text and provides some more information.</span></a>.</p>
    Also, what javascript script is it?
    Search through the html code (view source) and search for "tooltip" and you will see the javascript embedded half way down the page.


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
  •