I'm not a programmer/developer. I tried to put this code on the sidebar of my WordPress website, with the HTML widget. It is working on a page (with the HTML block), but not on the sidebar. I tried with two different themes. Anyone has any idea on how to make it work/a possible alternative?
<img src="wp-content/uploads/2022/05/Site2.png" usemap="#image-map" alt="test">
<map name="image-map" id="test-imgmap">
<area target="_blank" alt="test" title="" href="example1" coords="500,398,73,481" shape="rect">
<area target="_blank" alt="test" title="" href="example2" coords="71,493,493,563" shape="rect">
<area target="_blank" alt="test" title="" href="example3" coords="71,570,495,641" shape="rect">
</map>
I have an image with class="img-responsive" which has links on it.
The problem is, when size of image changes, the coords won't be in their correct places.
How can I have dynamic coords for links depend on the size of the dynamic image?
<img class="img-responsive" usemap="#image-map" src="/Content/Images/news/(8).png" alt="">
<map name="image-map">
<area coords="419,64,15,179" shape="rect" href="" target="" alt="" title="">
<area coords="13,184,420,277" shape="rect" href="" target="" alt="" title="">
<area coords="14,283,420,374" shape="rect" href="" target="" alt="" title="">
<area coords="13,380,418,473" shape="rect" href="" target="" alt="" title="">
<area coords="14,481,419,572" shape="rect" href="" target="" alt="" title="">
</map>
Based on last comment from #ShareWin here a solution with Jquery.
Years ago, I faced to the same challenge. Accedently I found an Jquery plugin that allows to change the coodinates, depends on the picture size. The plugin calls jQuery RWD Image Maps.
Here some steps to get it work:
Take the orignal picture and create the area cords (I used Gimp for it)
Publish the original picture to your web project.
Import jquery and this plugin into your site.
Thereby the plugin does working, there are some restrictions.
Here an example code:
<div id="yourDivId" ...>
<img src="yourImage" class="map" usemap="#nameofImagemap" id="elementid" ..>
<map name="nameofImagemap">
<area shape="rect" coords="x,x,x,x" alt="Tooltip" href="yourTarget" />
...
</map>
</div>
The javascript call is as follow:
$( document ).ready(function()
{
$('#yourDivId img').rwdImageMaps();
}
Important note: Whenever the size of used picture changes by hand, you have to recreate the area map.
Website in question (Purple tile at bottom right, green boxes are the targets.
I have the following html using area tags to select the first green box however I can't click it as a link. I am using bootstrap if it makes any difference.
<div class="col-md-4">
<img src="octa.png" usemap="#pmc">
<map name="pmc">
<area shape="rect" coords="978,482,1038,512" alt="pmc" href="www.google.com">
</map>
</div>
Any help is appreciated!
You can include multiple areas in your imagemap.
<img src="octa.png" usemap="#map" />
<map name="map">
<area shape="rect" coords="51,47,112,77" href="..." title="PMC Post" />
<area shape="rect" coords="188,47,249,77" href="..." title="Direct Download" />
</map>
you can use relative and absolute css properties
<div style="position:relative;">
<img src="src/of/img.png" />
</div>
css side
.links {
display:block;
position:absolute;
}
When using the following code, my pointer doesn't turn into the pointer cursor when mousing over the <area> in IE and Chrome, but it works fine in Firefox. How should I change this so that it'll work in IE and Chrome as well?
<img id="fr_main_img" src="image_main.png" usemap="#fr_main_img" alt="" width="700" height="230"/>
<map id="joinReward" name="fr_main_img">
<area shape="rect" coords="551,178,675,211" style="cursor: pointer;"/>
</map>
Instead of specifying cursor:pointer, you could just specify that is must be handled like an anchor by adding the href attribute. I'm guessing that if the cursor needs to change, it is clickable in some way. Try this:
<map id="joinReward" name="fr_main_img">
<area shape="rect" coords="551,178,675,211" href="#" />
</map>
You must specify a value in the attribute href:
<img id="fr_main_img" src="image_main.png" usemap="#fr_main_img" alt="" width="700" height="230"/>
<map id="joinReward" name="fr_main_img">
<area shape="rect" coords="551,178,675,211" href="#" style="cursor: pointer;" />
</map>
I've got a problem with image map HTML.
Working example with no style and no js on:
http://www.download.lagunawebdesign.pl/bug/
<img src="http://www.download.lagunawebdesign.pl/bug/Bez-nazwy-2.png" width="242" height="347" alt="Planets" usemap="#planetmap" />
<map id="planetmap" name="planetmap">
<area shape="poly" coords="31,37,31,68,47,68,47,54,51,54,51,38" title="1" alt="" href="#" />
<area shape="poly" coords="29,48,23,47,23,42,6,42,6,57,13,58,15,67,31,66,30,49" title="2" alt="" href="#" />
<area shape="poly" coords="32,99,31,131,46,131,47,117,51,116,51,99" title="3" alt="" href="#" />
<area shape="poly" coords="32,163,32,196,46,194,46,180,51,180,52,164,31,163,31,196,47,195,46,180,52,180,52,163" title="4" alt="doesnt work" href="#" />
<area shape="poly" coords="32,227,31,258,47,259,47,245,52,245,52,227" title="5" alt="" href="#" />
<area shape="poly" coords="121,297,121,316,153,317,153,302,139,301,139,296" title="6" alt="" href="#" />
<area shape="poly" coords="190,209,191,226,210,227,211,195,195,195,196,209" title="7" alt="" href="#" />
<area shape="poly" coords="5,17,5,0,51,0,51,18" title="8" alt="" href="#" />
</map>
Only fourth area doesnt work properly. On Firefox or Opera is not clickable, Firebug shows good area, but on hover cursor doesnt change (only really small peace close to area on the right side is clickable). On IE works fine.
I really do not know how to fix it.
All coords are putted by customer in CMS, some coords doesnt work (like 3/500).
Looks to me that there are just too many coords in the fourth area. I tried
coords="32,163,31,196,46,194,46,180,51,180,52,164" and it seemed to work for me in Firefox and Opera. Hope this helps!
Just change 164,31,163,31 to 164,31. It will looks almost same, but it's works.