Image Maps in WordPress Posts

Posted by on Dec 1, 2011 in Web Design | 30 comments

Wordpress Problems SolvedI’ve received a few requests on how to put an Image Map in a WordPress Post. So, in this tutorial I’ll show you.

WordPress is a bit picky about how you create your image map, but by copying the code below you’ll be making image maps in no time.

You can map out your coordinates using many tools. Dreamweaver actually makes image maps that don’t work in WordPress. A free site image-maps.com, a free site, however creates great image maps.

The major error I see you guys making is that you are not keeping your coordinates inside of just one map. This is proper image map code that will work in a WordPress post. (Easier to understand code is further down the page)

<div>
<img class="alignnone" id="imageMaps" src="http://businessplumbing.com/wp-content/uploads/2011/11/Sloan-Royal-Flushometer.png" alt="" width="298" height="595" usemap="#flushometer" border="0" />

<map name="flushometer" id="flushometer"> 

<area shape="rect" coords="219,6,277,41" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-a-72-cp-cover/" alt="A-72 CP Cover" />
<area shape="rect" coords="218,42,278,70" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-a-71-inside-cover/" alt="A-71 Inside Cover" />
<area shape="rect" coords="219,72,277,110" href="http://businessplumbing.com/?s=a-19-a&amp;search=Search" />
<area shape="rect" coords="95,174,131,211" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-b-73-a-cp-handicap-handle-assem/" alt="B-73-A CP Handicap Handle Assembly" />
<area shape="rect" coords="23,266,49,299" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-a-6-cp-handle-coupling/" alt="A-6 CP Handle Coupling" />
<area shape="rect" coords="51,244,98,279" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-b-7-a-cp-socket-assemble/" alt="B-7-A CP Socket Assembly" />
<area shape="rect" coords="99,215,131,253" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-b-74-a-cp-handicap-handle-grip/" alt="B-74-A" />
<area shape="rect" coords="141,161,205,226" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-b-51-a-handle-repair-kit/" alt="B-51-A" />
<area shape="rect" coords="209,161,229,190" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-a-31-handle-gasket/" alt="A-31 Handle Gasket" />
<area shape="rect" coords="230,349,265,413" href="http://businessplumbing.com/?s=F-5-A&amp;search=Search" alt="F-5-A" />
<area shape="rect" coords="236,183,260,248" href="http://businessplumbing.com/products-page/lavatory-sink/v-651-a-sloan-vacuum-breaker-repair-kit/" alt="V-651-A" />
<area shape="rect" coords="268,253,292,280" href="http://businessplumbing.com/products-page/product-category/v-500-aa-34-x-9-cp-vacuum-breaker/" alt="V-500-AA" />
<area shape="rect" coords="233,321,264,344" href="http://businessplumbing.com/products-page/lavatory-sink/v-553-a-sloan-cp-vacuum-breaker-coupling/" alt="V-553-A" />
<area shape="rect" coords="26,552,55,579" href="http://businessplumbing.com/products-page/lavatory-sink/h-550-sloan-cp-stop-coupling/" alt="H-550" />
<area shape="rect" coords="61,543,86,569" href="http://businessplumbing.com/products-page/lavatory-sink/h-551-a-1-116-sloan-cp-adjustable-tailpiece/" alt="H-551-A" />
<area shape="rect" coords="66,517,83,534" href="http://businessplumbing.com/products-page/lavatory-sink/h-553-sloan-o-ring/" alt="H-553" />
<area shape="rect" coords="58,671,80,697" href="http://businessplumbing.com/products-page/lavatory-sink/h-552-sloan-stop-lock-ring/" alt="H-552" />
<area shape="rect" coords="48,522,63,541" href="http://businessplumbing.com/?s=h-700-a&amp;search=Search" alt="H-700-A" />
<area shape="rect" coords="110,443,132,504" href="http://businessplumbing.com/products-page/lavatory-sink/h-541-a-sloan-1-control-stop-repair-kit/" alt="H-541-A" />
<area shape="rect" coords="107,389,139,422" href="http://businessplumbing.com/products-page/lavatory-sink/h-1010-a-sloan-1-vandal-resistant-control-stop-cap-assembly/" alt="H-1010-A" /></map>

</div>

The Working Image Map in a WordPress Post

A-72 CP Cover A-71 Inside Cover B-73-A CP Handicap Handle Assembly A-6 CP Handle Coupling B-7-A CP Socket Assembly B-74-A B-51-A A-31 Handle Gasket F-5-A V-651-A V-500-AA V-553-A H-550 H-551-A H-553 H-552 H-700-A H-541-A H-1010-A

The most important thing you most do is link to the map like I show in the img tag usemap=”#flushometer”. You then have to create the mapping area with the following tag

.

Then you have to place all of your area tags inside of JUST ONE map tags. The error I’m seeing people make is that they are creating a separate map tag around each area tag. WordPress doesn’t like that.

So use this code to make your image map and you should have no problems. I provide a simple map here that should be easier to follow.

<div>

<img class="alignnone" id="imageMaps" src="http://businessplumbing.com/wp-content/uploads/2011/11/Sloan-Royal-Flushometer.png" alt="" width="298" height="595" usemap="#flushometer" border="0" />

<map name="flushometer" id="flushometer"> 

<area shape="rect" coords="219,6,277,41" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-a-72-cp-cover/" alt="A-72 CP Cover" />

<area shape="rect" coords="218,42,278,70" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-a-71-inside-cover/" alt="A-71 Inside Cover" />

</map>

</div>

Leave any questions or comments below. If you like articles like this, feel free to share them easily here

Till Next Time
Think Tank

30 Responses to “Image Maps in WordPress Posts”

  1. supprof1 says:
    December 1, 2011 at 5:47 pm

    thank you derek for this useful tutorial
    i saw your youtube channel new look and it’s amazing. so noticed that there are some chages in youtube site. than i went to see other channels there wasn’t as changed as your’s?
    thank you very mutch derek banas you’re a sutch great teacher

    Reply
    • admin says:
      December 1, 2011 at 5:57 pm

      Thank you 🙂 All of the YouTube Partners were given the opportunity to test out the new YouTube channels. I thought you guys may want to see it so I set it up. I’ll make it look nicer as soon as I get a chance. Most of the partners are choosing not to use it because they don’t like to change I guess? I’ll get up another video tomorrow.

      Reply
  2. Mary says:
    December 8, 2011 at 4:13 pm

    Thanks so much for giving a practical way to do this. So many people on the WordPress forums seem to give a part of the solution, but are far above actually explaining how it works. I don’t know why they bother! This is great, as it was so easy to do this in Dreamweaver and people still want image maps to work in WordPress!

    Thanks for being so generous with your knowledge and time.

    Reply
    • admin says:
      December 8, 2011 at 5:17 pm

      You’re very welcome. Yes, there are many ignorant people in the WordPress forums. It is a shame because it is such a great piece of software. Probably the worst part of WordPress is their forums. There are some people that are very helpful though. I have tons of other WordPress tutorials on my site. I’ll try to spend more time in the forums to answer as many questions as I can.

      Reply
      • Mary says:
        November 18, 2014 at 3:07 pm

        I migrated a site and this code doesn’t work anymore for some reason. Do you know if WP has updated their software and it isn’t valid? I can’t figure out why if the code is working in it’s current site, the new migrated site wouldn’t work the same.

        Reply
  3. will says:
    December 12, 2011 at 7:08 am

    The problem I’m having is that WordPress is *adding* the map tag around every area tag automatically. I can’t get it not to do this. This is on a self-hosted WordPress site, not WordPress.com. Any clues?

    Reply
    • admin says:
      December 12, 2011 at 7:50 am

      Update your version of wordpress. Also paste everything directly into the post with the HTML tab selected. Try using my code that I know works and then replace it with your own code piece by piece. I hope that helps

      Reply
  4. Kate says:
    December 13, 2011 at 11:10 am

    Hello-this entry is very clearly written, however, I still can’t seem to get image maps to work in WordPress even though I used your code as my foundation-I am using the Twenty Eleven theme, not sure if that has anything to do with it. I am using wordpress.org and I have a separate hosting service. Thanks for any advice.

    Reply
  5. Kate says:
    December 13, 2011 at 12:07 pm

    Never mind-I installed a different theme (Atahualpa) and the image map code you provided works fine. Thanks!

    Reply
  6. selva says:
    March 14, 2012 at 11:46 pm

    Really its working…..Thank u very much

    Reply
  7. nilanjan says:
    July 8, 2012 at 11:24 pm

    Can you use a image file which is not on a hosted site? Can I upload my own image to wordpress?

    I am new to wordpress.

    Reply
  8. Betty says:
    August 8, 2012 at 7:01 am

    Could you do this using tool tips when you hover over the area instead of clicking for a link? If so, how. Thanks.

    Reply
  9. Tara says:
    August 16, 2012 at 7:29 am

    I tried entering your code in my website under the twenty eleven theme, but the coordinates are being deleted after I switch form html to visual mode. The picture will appear, but no links will work due to this. Any help would be greatly appreciated.

    Reply
  10. Andries van der Heide says:
    October 8, 2012 at 7:29 am

    Hello,

    I used this code but it doesn’t work with more than 4 mappings.
    Is there an explanation?

    Reply
  11. Tarmo Toikkanen says:
    October 29, 2012 at 11:28 pm

    The major error I see you guys making is that you are not keeping your coordinates inside of just one map.

    When in the WordPress editor you go and do stuff in the graphical editor, the editor will (once) incorrectly “clean up” the html, wrapping each area inside its own map tag. So you just need to watch out for that and fix what the editor breaks. For some reason, after it’s first broken and fixed manually, it then stays fixed. Probably something in the line breaks of image-maps.com that’s not going down too well.

    Reply

Leave a Reply to Kate Cancel reply

Your email address will not be published.

Google+