how code imagemaps

  • Gallienus53

    (@gallienus53)


    11 years, 5 months ago

    I am trying to code 2 imagemaps, each of which appear on a separate page. Using WP 4.1, but am using the X theme. Don’t wish to use twenty fifteen theme and am not sure that it’d make too much difference.

    The imagemaps are country maps from Latin America in the 1850’s and have many polyshapes. Originally I used the plugins “ImageMapper” and “Responsive Image Maps” but have disabled those as they don’t work. After using them all of the mapped regions will shift to the left & up so they no longer correspond to the map. It takes a lot of work mapping 30 irregular countries and then when they all mysteriously shift somewhere, all that work is lost. Thus it’s necessary to have the actual poly coordinates.

    Thus trying html code for image maps.
    Site is here:

    http://coinsandhistory.com/
    Have tried 2 coding examples for South America, the menu item
    “mapz South America backup” uses the following code which I found in this forum.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    [ Moderator note: Code fixed, please wrap code in backticks or use the code button. ]

    <div>
<img class="alignnone" id="imagemap" src="http://coinsandhistory.com/www/wp-content/uploads/2014/12/map_South_America_Milners_1850_714px.png" alt="" width="569" height="714" usemap="#southamerica" border="0" />
<map name="southamerica" id="southamerica"> 

<area shape="poly" coords="106, 226, 100, 238, 100, 250" href="http://coinsandhistory.com/countries/Argentina.html" alt="" />

<area shape="poly" coords="353, 126, 318, 132, 296, 145"
href="http://coinsandhistory.com/countries/Peru.html" alt="" />
</map>
</div>

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Note, the poly coords have been truncated to save space here, to only 6 entries. I’ve verified that my maps are in the place quoted. Yes I know after this forum that I should use a .jpg rather than a .png. Also I’ve disabled the visual editor for all users of my website.

    The “South America” Menu item uses other coding for the same imagemap which also doesn’t work.

    Thanks for helping. This is a free informational website, not one that sells anything. After reading these forums, I’ve never found a working imagemap using code. Is this incompatable with WP for some reason?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Peter Lawrenson

    (@lorro)

    11 years, 5 months ago

    Your code looks good to me, although some sources do not use the closing slash for the area tag, but some do.

    I’ve checked the markup using this service:
    http://validator.w3.org/
    and there are only minor errors which I think you should correct though I would not expect to affect function.

    I’ve tried the following maps and they both have clickable areas for me, using Chrome and Safari:
    http://coinsandhistory.com/map-central-america-coins/
    http://coinsandhistory.com/imagemap-central-america-coins3/

    So I don’t think the code is incompatible with WP. Map and area tags have been around for ages. w3schools says they are supported in all major browsers.
    http://www.w3schools.com/tags/tag_map.asp

    I can’t see why the choice of theme would affect this issue.

    Have you had a look at browser issues:
    – what browser are you using?
    – have you tried other browsers?
    – can you try other computers?
    – have you cleared the browser cache?

    After using them all of the mapped regions will shift to the left

    I see that your image is 722px but the img tag size is 100% which works out at 649px so the image is being squashed to fit the space allowed by the page. I don’t know if area coordinates refer to the image or to the space its displayed in, so that might something to look at.

    Thread Starter Gallienus53

    (@gallienus53)

    11 years, 5 months ago

    Thanks very much. I don’t know what is meant by img tag size but this may explain why the “image mapper” plugin never worked properly but always shifted my hot zones around.

    I am just now getting my image maps to work. I found the post by Derek Banas at:

    http://www.newthinktank.com/2011/12/image-maps-in-wordpress-posts/#comment-57588
    extremely useful as it has a map that one can link to to get the code to work.

    I am next going to try to find more options about imagemaps as I can now get the basic code to work but can do little beyond that. For example no one told me about the fact that my image map at 714 pixels didn’t fit the page at 649 pixels, despite my paying my WP expert several hundred $ to develop the code for me. In the end his code didn’t really work so I had to find it myself.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘how code imagemaps’ is closed to new replies.