Image Map in Page

The problem did indeed seem to get solved, but to be honest I was messing with so many “fixes” that I don’t know what actually worked!

Here is code that works in a WordPress post. No need for plugins, or anything else. Just copy and paste it in the post. Make sure you have the html tab clicked

<div>
<img class="alignnone" id="imageMaps" src="https://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="https://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="https://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-a-71-inside-cover/" alt="A-71 Inside Cover" />

</map>
</div>

WordPress seems to get irritated if you create multiple maps around every area. Dreamweaver does that, so that may be the reason so many people are having trouble? I have more example code here if you need further help. newthinktank.com/2011/12/image-maps-in-wordpress-posts/

Zstar7 – Many thanks. That did the trick for me. Had problems with the html, but css worked great. Dropped it in and all worked like a charm. And I must say, who cares if someone has a self hosted site, if they provide a solution that works – get a life esmi . . .

Hi, I am very new to this forum so I hope someone can help me. I am trying to insert an image map of a price comparison table into a post. I have successfullu uploaded the image and have all the correct co-ordinates. I am also able to get the image to load into the post with correct section of the image successfully being linked.

My issue is the following: The image looks very crisp when it is only the image (without image mapping) being uploaded. The moment the image map is loaded (using the same HTML code as derekbanas) the image loses its sharpness.

Would anyone know what might be causing the loss in quality? The image is in .png format.

Thanks for your help

For starters I would convert the file to jpg (use pixlr.com, as it is the easiest coverter). A png file is unnecessarily large unless you need the file to be transparent. If that is the case, your problem is likely that the file is still too large. Try reducing the image size if that is possible. Do you know how large the file is?

Hey smcelligott, thanx so much for taking the time to reply. I checked the size of the png file and it was 94kb, which I would assume is not very big.

However I did, under inspiration from a higher source, figure out that the dimension fo the image was incorrect. In the image map HTML, I used teh wrong domensions for the image. This caused the loss in quality. The image size that is stated in the HTML, needs to match the image size of the image uploaded to WordPress otherwise the image will appear a little funky.

Thanks again

Derekbanas –
Thanks so much for sharing your code! It worked like a charm!!
Best,
Jean

Let me just add that once you do this you can NEVER use the Visual editor to edit (or even look at) that page or WordPress will wipe out the code. So, keep a backup of the code somewhere in case it gets wiped.

Just for the record, I hate the way that WP wipes out code. Is there no way to control that at all? Still?

It’s not WP, per se. It’s the TinyMCE WYSIWYG editor. And, no, there isn’t a fix shorty of installing another WYSIWYG editor plugin.

Ugh. I’ve tried the other editors; they aren’t much better, and lose WP functionality. I just can’t believe that the editor maintainers haven’t ever thought to correct that annoying behavior.

TinyMCE was not developed by WordPress.

Can someone from the WordPress team fix the code stripping visual tab so it doesn’t destroy image maps when we click on it or strip out Rich snippets (Microdata)?