Add links to different parts of responsive image

Quote

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 https://www.image-map.net/ 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="https://www.allsortsworkwear.com.au/image/catalog/infobanner-for-shop.png" 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="https://allsortsworkwear.com.au/BLOG/" coords="44,33,492,228" shape="rect">
    <area target="_blank" alt="How to order" title="How to order" href="https://allsortsworkwear.com.au/BLOG/how-to-order/" coords="555,28,983,224" shape="rect">
    <area target="_parent" alt="subscribe to newsletter" title="subscribe to newsletter" href="https://allsortsworkwear.com.au/BLOG/subscribe-to-the-newsletter/" coords="1043,29,1485,215" shape="rect">
    <area target="_blank" alt="request a quote" title="request a quote" href="https://allsortsworkwear.com.au/BLOG/request-a-quote" coords="1537,29,1990,228" shape="rect">
</map>`

https://www.embroidery-allsorts.com/

User avatar
AliceH
Active Member
Posts
189
Joined
Sun Jan 09, 2011 11:00 am
Location - Australia
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: No registered users and 29 guests