CSS mousover graphic, simple, but how?

Discussion in 'CSS' started by malcolmlo, Feb 27, 2007.

0
  1. #1
    Okay so I am sort of a CSS novice.

    I need to do exactly THIS with CSS:

    http://www.xara.com/products/webstyle/

    The circular menu you see there. Whenever someones mouse hits one of the elements a small graphic (text) is displayed. When they mouseout no graphic (or null graphic is displayed). When they click what theyre over they are taken to that URL.

    Simple, compatible, and exactly what I need.

    Can you help direct me?

    Thanks so much,
    -Malcolm
     
    malcolmlo, Feb 27, 2007 IP
  2. MrBaseball34

    MrBaseball34 Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    View the source here: http://www.xara.com/products/webstyle/map/

    That is how they do it. It is shown inside the iframe on the main page.
     
    MrBaseball34, Feb 28, 2007 IP
  3. malcolmlo

    malcolmlo Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Awesome! Thankyou!

    Now I just need to figure out how to create an image map with coordinates like that.

    Any suggestions? There must be an app that can do it. I will check and see if adobe imageready can.

    Thanks again.
     
    malcolmlo, Feb 28, 2007 IP
  4. malcolmlo

    malcolmlo Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Just in case anyone else reads this, you can do the whole thing quite easily in Adobe Imageready. And it writes the code for you.

    Thanks!
     
    malcolmlo, Mar 1, 2007 IP