I can't get my image map to work

Community Off Topic
1

I have created a test image map for wordpress but no matter what I do, I can’t get the images to link. I even tried the plugin “Image Map Pro” and the shortcode doesn’t show up at all.

I have no clue what I could be doing wrong since NOTHING has worked.

Here is the code:

<center><img src="/wp-content/uploads/2018/07/den.png" usemap="#Den" width="1200" height="600" border="0" /></center>
<map name="den"><area title="Register" coords="544,185,624,257" shape="rect" href="#"/><area title="door" coords="352,328,426,388" shape="rect" href="#"/><area title="right" coords="732,327,798,403" shape="rect" href="https://google.com"/></map>

The image is 1200x600. The image shows up but isn’t clickable. I am just testing it so this obviously isn’t the image I’ll be using. Just trying to get the code down before I create the actual one.

In this image, the register, the left door, and the right door should all be clickable/ linkable.

Thank you in advance.

2

match the letter case. Lower is most always favored…

4

FYI

This topic was unlisted for two reasons…

  1. It is solved; but more importantly,
  2. we cannot leave the urls facing the web.

You may wish to put the most important link in your profile if it is your own site. That would be okay. In order for this topic to remain listed we will need to remove the URLs. Give a nod and I’ll be happy to edit it and put it back out front, solved or not.

1 Like
5

Thank you. I should have known that.

1 Like
7

And thank you, that worked!!! Though I must have to play with the coordinates because it isn’t clicking as it should be. But thank you so much. I knew it had to be something very simple. THANK YOU ! THANK YOU! THANK YOU!

1 Like
8

Use your image editor RULER and SELECT TOOL to determine the coords, write them down, then use those in your code.

If your are not using an XML namespace then drop the XML compliance. The self closing tag is not needed for text/html, which is what HTML5 is, by default. No need for / in void element tags.

9

That’s what I used to get my coordinates so I was sure they were right, but when I click on the image, nothing happens. I have to click around a bit to find the link and there seems to be a delay. So I’m assuming it’s a coordinate issue.

10 
<map name="den">
<area title="Register" coords="505, 165, 640, 270" shape="rect" href="#">
<area title="door" coords="325, 285, 445, 445" shape="rect" href="#">
<area title="right" coords="700, 285, 815, 445" shape="rect" href="#">
</map>
11

wow. How am I that far off? Could the problem have been that the default width in my WP theme was only 1140 while my image width was set at 1200?

12

PERFECT!!! Thank you again. You have no idea how much you have helped me. I will be able to sleep tonight. :wink:

1 Like
13

Dimensions are absolute, and mapping is from top, left, so I don’t see that as an issue. However, any inconsistency or incongruence can/may lead to ghost behavior. (You know that last sentence is balderdash, right?)