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