Image map not original size on mobile

  • Resolved patrickpreuss

    (@patrickpreuss)


    4 years, 6 months ago

    Hi,

    I have an image map roughly 700 x 900 pixels.

    On the PC and the ipad it shows just fine.

    On the mobile it is too small, only the very upper left hotspot coordinates fit.

    Can you tell me how I can get a regularly sized image on my mobile where the coordinates match the image ?

    Or do I get the problem wrong ?

    Thank you,
    Patrick

    • This topic was modified 4 years, 6 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    I think the problem may be because the image is wrapped in <p> tags and the map is not. Both image and map need to have a common parent element so they get scaled together.

    Thread Starter patrickpreuss

    (@patrickpreuss)

    Thank you for your answer !

    The image is in <p> tags and the map is in <p> tags, I think.

    <p><img src="https://www.earth-myhome.net/wp-content/uploads/2020/05/GartenPlanKl.jpg" alt="" usemap="#Map"></p>
<p><map name="Map"> 
<area alt="

    etc.

    I removed the closing <p> from the image and the opening <p> from the map, but nothing changes.

    I checked it in the page source code in the browser on the mobile, they are removed.

    What am I doing wrong ?

    Thread Starter patrickpreuss

    (@patrickpreuss)

    It seems to be a general problem, imagemaps just do not scale, I found it in several places.

    I think I have to go with a specific responsive image map plugin …

    Thread Starter patrickpreuss

    (@patrickpreuss)

    Whohooo !

    I did it !

    I used https://researchasahobby.com/responsive-image-clickable-areas-free/

    It does not really seem to be supported anymore, but it works.

    I installed it (no configuration necessary), removed all <p>s (just a hunch), et voilá … all good, even on the tiniest screen ??

    Moderator bcworkz

    (@bcworkz)

    Some scripts stand the test of time without needing updates. Thanks for the link, I’m sure others will find it useful. It’s a startlingly crude but necessary solution. It loops through all area elements and recalculates every coordinate based upon how much the image was scaled. Original source code for the script used is available on GitHub.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image map not original size on mobile’ is closed to new replies.