Post by AliceH » Sun Jul 23, 2017 5:00 am

I want to have an image in my html content module and make different parts of my image clickable while the image is responsive, I have found a way to map the image to add the links using but when the image changes size the coordinates remain the same thus are no longer in the correct place in the image. I have seen solutions using java script but I don't have a clue how to implement that.
What I need to know is how to make the coordinates responsive with the image.

Code: Select all

<img src="" style="max-width:100%; height:auto;" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Check out my blog" title="Check out my blog" href="" coords="44,33,492,228" shape="rect">
    <area target="_blank" alt="How to order" title="How to order" href="" coords="555,28,983,224" shape="rect">
    <area target="_parent" alt="subscribe to newsletter" title="subscribe to newsletter" href="" coords="1043,29,1485,215" shape="rect">
    <area target="_blank" alt="request a quote" title="request a quote" href="" coords="1537,29,1990,228" shape="rect">

User avatar
Active Member


Sun Jan 09, 2011 11:00 am
Location - Australia
Who is online

Users browsing this forum: No registered users and 29 guests