Use HTML img map tag on WP sidebar

  • Resolved Giovanni Castellotti

    (@giovannicas)


    4 years ago

    Hello, I’m trying to display an HTML mapped image on WordPress in the sidebar. While working on a normal page with the HTML block, it does not work in the sidebar, it just shows the image without the mapping. Is there a way to make it work?
    Here is my code for the mapped image:

    <img src="https://mydomain.it/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="https://test1.com" coords="500,398,73,481" shape="rect">
<area target="_blank" alt="test" title="" href="https://test2.com" coords="71,493,493,563" shape="rect">
<area target="_blank" alt="test" title="" href="https://test3.com" coords="71,570,495,641" shape="rect">
</map>
Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz

    (@bcworkz)

    4 years ago

    Without a link to the page demonstrating the issue, we can only speculate. I’m guessing the sidebar image size is scaled from its native size. Image maps don’t scale so easily, certainly not on their own. You need a dedicated script to resize the map to match the scaled image. For example:
    https://github.com/davidjbradshaw/image-map-resizer

    Thread Starter Giovanni Castellotti

    (@giovannicas)

    4 years ago

    Thank you so much for the response. I’ll make sure to post the link to a page containing the sidebar with the mapped image as soon as I’ll get home.

    Thread Starter Giovanni Castellotti

    (@giovannicas)

    4 years ago

    Dear @bcworkz, this is the webpage with the sidebar and the widget:

    https://www.giovannicastellotti.com/

    I’m using Blocksy as the theme. You can notice the links are not clickable.
    This is the code I used

    <img src="https://www.giovannicastellotti.com/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="https://test1.com" coords="500,398,73,481" shape="rect">
<area target="_blank" alt="test" title="" href="https://test2.com" coords="71,493,493,563" shape="rect">
<area target="_blank" alt="test" title="" href="https://test3.com" coords="71,570,495,641" shape="rect">
</map>
    Moderator bcworkz

    (@bcworkz)

    4 years ago

    Thanks for the link. It’s as I thought, the image is not at its native resolution. Images are easily re-scaled by browsers, but not so for the related maps. Your map coordinates now reference areas well outside of the image.

    You need a script that will re-scale the map to match how the image was scaled, such as the one I linked in my previous reply. I’ve no personal experience with it, but I do know such a script is necessary when images are scaled.

    One alternative would be to rebuild the image content with HTML and CSS so the buttons are real responsive buttons instead of a mere image. This IMO is actually preferable to image mapping, but obviously involves a fair bit more coding over making a map.

    Thread Starter Giovanni Castellotti

    (@giovannicas)

    4 years ago

    Alright @bcworkz , thanks! I found out a plugin which perfectly fits my needs, I’ll use that one instead. It’ll quite complicated for me to recreate the image in CSS. https://wordpress.org/plugins/draw-attention/

    Moderator bcworkz

    (@bcworkz)

    4 years ago

    Looks like a good plugin. Thanks for sharing what you found!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Use HTML img map tag on WP sidebar’ is closed to new replies.