dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to do floating thingy when mouseover?

  1. #1
    Join Date
    Nov 2007
    Posts
    5

    How to do floating thingy when mouseover?

    For example. There is a link (or text or image). User hovers the mouse over it, and there it appears a small window (not a new window, but floating over the existing window) some predefined text.

    Site example: tvguide.com (hover to a movie name on a channel, and you see the movie description etc).

    How do you do that?
    Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Simplest way to display text like that is to add a title attribute to the tag.

    eg.

    <span title="display this text">mouse over this</span>

    it works with all modern browsers (including IE4+) and can be added to any tag that you want the text attached to (eg. <a> <img> <h2>)

    If you want something fancier than plain text then you need a JavaScript Tooltip script eg. http://javascript.about.com/library/bltip1.htm

  3. #3
    Join Date
    Nov 2007
    Posts
    5
    Ok that helped. Thanks!

    Edit:
    Now what if I want to add a 1-second delay before displaying the extended tooltip? I tried setTimeOut but it didn't work.

    Thanks.
    Last edited by ssalim; 11-11-2007 at 11:33 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    onmouseover="setTimeout('popUp('+event+',\'+t1+'\')',1000)"

  5. #5
    Join Date
    Nov 2007
    Posts
    5
    Something's not right... it did not work.

  6. #6
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Slight typo, try this:

    onmouseover="setTimeout('popUp('+event+',\'t1\')',1000)"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles