SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    create html area for map in javascript

    I have had success using html maps and areas. The way I have done it in the past is to simply write the map tags, then inside that, put the area tags.

    My current problem however, is a bit more complicated. I want to create the areas for a particular map with javascript. I will have the following map:

    <map id="pm0102" name="pm0102"> <area name="area" id="pa01021" shape="poly" alt="Sun" onclick="alert('bla')"/></map>
    <map id="pm0102" name="pm0102"></map>

    I need to create an area for it. So I first write (inside a function that I call)

    map1 = document.getElementById("pm0101")




    But how can I now create an area for this map in javascript? Does it go something like the following?

    map1.areas = '<area name="area" id="pa01011"/>'

    I may need to have multiple areas.




    Thanks,

    Sam

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hi Sam,

    First, this sounds like the kind of thing someone's likely already built.

    Second, while it sounds like you mean HTML image maps and not geological maps, this ALA article might still help you, because it sounds like your areas are being dynamically created, right? (otherwise you'd just write this in static HTML):
    http://www.alistapart.com/articles/cssmaps/


    Third...
    Code:
    <map id="pm0102" name="pm0102"> <area name="area" id="pa01021" shape="poly" alt="Sun" onclick="alert('bla')"/></map>
    <map id="pm0102" name="pm0102"></map>
    
    I need to create an area for it. So I first write (inside a function that I call)
    
    map1 = document.getElementById("pm0101")
    You know each element on the page needs its own id, right?

    But yeah, you could make an array of map elements (getElementsByTagName("map")
    and cycle through each map element and add your areas using
    createElement("area")

    Ideally that would be a separate "helper" function, something that, all it does is make areas and all the attributes the tag has (id, name, shape).

    As you cycle through each map of your nodeList (you'd get a nodeList of maps with getElementsByTagName), you add to each map an area, and set the special information of each area there (I don't know where you're getting the data, but again the linkk above might help with that). The onclick function would also be defined elsewhere, and referenced by the area elements.

    Personally, I like CSS maps anyway... more accessible, usually load faster, and work even for me, who has scripts disabled most of the time. Only thing is, they cannot have dynamic properties. If possible, see if you can't start with a working HTML/CSS based image map, then layer JS on top of that.


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
  •