Results 1 to 7 of 7

Thread: CSS mouse over

  1. #1
    Join Date
    May 2008
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default CSS mouse over

    I am looking for code where I don't use the neatly lined up thumbnails but instead, circles with coordinates (x, y and radius) spread over a map. Ihope somebody can help.

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    What you're looking for is an image map. Here is a tutorial to create one.

    Find the coordinates etc.. can be kind of annoying without some tools. I sometimes use this online image map editor to write the coordinates.

  3. #3
    Join Date
    May 2008
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much for your reply and help. I do have a map with circles that are coordinated and I can call up another html file from each circle. What I need to know is how I can mouse-over a circle on the map and an image shows up instead.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    CSS cannot do this with an image map, javascript (using onmouseover and onmouseout events) should be able to.

    Often in javascript (when no image map is involved) we just find the position of the element that the mouse is over. However, with an image map, different browsers see things quite differently, with some seeing the position of the area tag, which is good, but others seeing the position of the entire map.

    Another frequently used method is to track the position of the mouse.

    You would need to do that, see:

    http://www.quirksmode.org/js/events_....html#position

    or figure out a way to track the position of the area tag in those browsers which don't report it accurately.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2008
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much, seems I have some work to do, but I don't mind that, it is very enjoyable to learn new things, 'code wise' in particular. Thanks again.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The script from this thread:

    http://www.dynamicdrive.com/forums/s...ad.php?t=33058

    a modification of:

    http://www.javascriptkit.com/script/...agetrail.shtml

    might work. Any script (perhaps with some modification to work with area tags) that tracks the mouse instead of the element that the mouse is over would do.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    May 2008
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much, I'll try it.

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
  •