Making Popup captions?!

Discussion in 'Web Design and Development' started by Simplesimon101, Jan 9, 2010.

  1. Simplesimon101 macrumors regular

    Joined:
    Oct 5, 2006
    #1
    Hi All,

    I have a question. I've know XHTML & CSS and I've recently just started learning Javascript. I've been building a website but I really want to know how to make a pop up captions that appear when you hover your mouse over links. An example is the Radio Times Website - has a caption that appears in an orange box when you hover over the program which gives you more information (See attachment).

    How would I do this? is it all javascript?

    Thanks in advance,

    Simon
     

    Attached Files:

  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    That uses JavaScript for it, but this type of thing can be done purely with CSS depending the exact effect you want and what content is going into it. The CSS method would be the same as a rollover menu, using a:hover type CSS along with using the display property to turn on/off the visibility of the element. The JavaScript method would attach a mouseover event to the item you want the hover effect to apply to, and then the JavaScript can modify the CSS or add new content to the DOM, etc. There's a number of ways to accomplish it via JavaScript really.

    I'm not sure if your desire is to learn how to do this, or simply to get it done using pre-built solution. Here's one example of a CSS-based solution. Using the keyword "tooltip" will be of help tracking done other solutions.
     
  3. Simplesimon101 thread starter macrumors regular

    Joined:
    Oct 5, 2006
    #3
    thanks,

    yep I used the CSS example and tweaked it for my own use.

    I'll probably keep an eye out for the javascript one and tweak it eventually.

    Thanks for the help.
     
  4. katy macrumors member

    Joined:
    Jun 19, 2006
    Location:
    UK

Share This Page