Image Maps in WordPress Posts
I’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&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&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&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
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
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
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.
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.
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.
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?
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
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.
Di you copy and paste my code directly into your post? Make sure you have the html tab selected
Yes, I did-and then I put in the right coordinates etc. Not sure what is going wrong-
Never mind-I installed a different theme (Atahualpa) and the image map code you provided works fine. Thanks!
Wo that is strange that you had trouble with 2011? They just updated it. Maybe they fixed some strange bug
Really its working…..Thank u very much
You very welcome