Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Mouseover popup text

Options
  • 12-06-2006 7:16pm
    #1
    Registered Users Posts: 35,524 ✭✭✭✭


    I can never get my head around Javascript, it's as understandable as women to me. But I like women more.

    Is there any way of (an easy way) having text popup with javascript? I have a little information text that would be nice if it popped up onMouseover but I have no idea how to do it. Unfortunately the <a href title="" only allows a small amount of text on Firefox, about 15 words, I need about three times that amount.

    I've tried using iFrames too but I can't get the mouseover to work to make it visible.

    Thanks


Comments

  • Closed Accounts Posts: 17,208 ✭✭✭✭aidan_walsh


    Why need so much? If you need that much text, surely there is a better way to display it than in a tool tip? But anyhoo...

    What about a floating div that displays when you hover over a link?


  • Registered Users Posts: 8,488 ✭✭✭Goodshape




  • Registered Users Posts: 683 ✭✭✭Gosh


    Here's a Javascript example


  • Registered Users Posts: 35,524 ✭✭✭✭Gordon


    Thanks a million guys, I couldn't find these kinds of rollovers. I'm going to use this one as it is the only one that works for me right now!

    Aidan, I tried a floating div (if this is the same as you mean) but the text didn't slot correctly with the rest of the text. Although it's more of a hidden div I was trying. Here's an example (modified from an original a list apart article). Unfortunately I couldn't get it to work in the context I needed it.
    <link rel="stylesheet" href="/css/article.css" type="text/css" media="all" />
    <!--
    
    a.biglink {
    width: 80px;
    height: 21px;
    background-color: white;
    color: #ccc;
    overflow: hidden;
    font: 10px arial;
    float: left;
    text-align: center;
    }
    
    a.biglink:hover {
    color: black;
    background-color: pink;
    overflow: visible;
    text-decoration: none;
    }
    -->
    
    </style>
    
    </head>
    
    <body>
    
    <div>
    <a href="#" class="biglink"><img src="button.gif" border="0" alt="blah" /><br />hidden text</a>
    </div>
    
    </body>
    </html>
    

    Thanks again


  • Registered Users Posts: 6,511 ✭✭✭daymobrew


    I've always been a fan of overLib. Move the mouse over the links on that page to see a quick demo.


  • Advertisement
Advertisement