SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Relative positioning of clickable graphic icons over a map

    Can anyone point me in the right direction here?

    Let's say I've got a map as a gif graphic, and I want to place clickable (ie. hyperlinked) graphic icons over it based on known x,y co-ordinates.

    Layers and CSS2 relative positioning? Any way of doing this in a way that will be more compatible with older browsers?

    Thanks for the head start.
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  2. #2
    SitePoint Enthusiast hex's Avatar
    Join Date
    Jul 2002
    Location
    Cambs, UK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did something like this recently, check out the source on http://www.evilwalrus.com/david/rnli.php

    It's achieved by using divs like so:
    PHP Code:
      <OUTER DIV> - relative positioning
       
    <INNER DIV> - absolute positioning (top-left of above)
        <
    IMG> - no css positioningmain image
       
    </INNER DIV>
       <
    IMG> - floating image1absolute positioning
       
    <IMG> - floating image2absolute positioning
       
    <...>
      </
    OUTER DIV
    Last edited by hex; Jul 19, 2002 at 02:51.
    :: David Speake
    :: EvilWalrus.com Content Dev.
    :: david@evilwalrus.com
    :: david.bigbluebang.com

  3. #3
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Viewing the source of your example url doesn't employ the technique you are describing - or is it just me?
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  4. #4
    SitePoint Enthusiast hex's Avatar
    Join Date
    Jul 2002
    Location
    Cambs, UK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't give you HTML source, just showed how it worked. The floating images did not appear as the page the map is grabbed from (http://www.rnli.org.uk/wales.asp) didn't have any (e.g. there's been no calls). There's an example at http://www.rnli.org.uk/seast.asp (the red dot is 'floating' over the map).
    :: David Speake
    :: EvilWalrus.com Content Dev.
    :: david@evilwalrus.com
    :: david.bigbluebang.com


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
  •