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)
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
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.
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.
It was my relative path that had changed, all is good. Thanks again for your help in 2011 (wow, how time flies!)
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
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.
Yes you can upload files as well as point to urls elsewhere on the web. Feel free to ask questions
Could you do this using tool tips when you hover over the area instead of clicking for a link? If so, how. Thanks.
I think this is what you are looking for CSS tooltip
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.
That is the way WordPress is set up. You’ll have to remain in the html code to do this and many other things
Hello,
I used this code but it doesn’t work with more than 4 mappings.
Is there an explanation?
I have 7 area tags in one map tag, but then i have a empty page. Up to 4 area tags it works fine, as soon as I add a fith tag (doesn’t matter which one) it won’t work anymore.
I’m not sure why? Are you getting an error. What problem are you having. Do all of the mappings break?
The page is totally empty
When I use more than 4 area tags the page is completely emtpty….
I tried it again adding 1 area tag at the time and now it works. I don´t understand it but for now my problem is over. Thanks for your time.
I’m glad you fixed it. Somewhere along the way a little bug probably slipped in and it was also corrected soon after. That’s programming 🙂
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.
Thank you for providing input. I really appreciate that 🙂