Very amateur, but trying to create a one-image newsletter through Mailchimp with several hyperlinks. Image should adjust responsively to fit displays and map should adjust along with it. Using percentage coordinates to hopefully achieve that. The original image is 1200x6000 pixels.
The issue is the links aren't clickable, even when tested on https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro.
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.image {
width: 100%;
height: auto;
}
.map-container {
position: relative;
width: 100%;
padding-bottom: 500%; /* Adjust this value as needed for the aspect ratio */
}
.map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="image-container">
<img class="image" src="https://mcusercontent.com/c710611bd15699992a8990323/images/72afc2f2-1786-771e-ea25-5004d43e812e.png" alt="Your Image" usemap="#image-map">
<div class="map-container">
<map class="map" name="image-map">
<area target="_blank" alt="How Zero-Click Content Benefits B2B Brand Perception" title="How Zero-Click Content Benefits B2B Brand Perception" href="https://crimsonparkdigital.com/zero-click-b2b-content-marketing/?utm-source=email" coords="9.83%, 25.8%, 60.83%, 32.88%" shape="rect" style="z-index: 1;">
<area target="_blank" alt="Sustainable SMART Goals for Startups" title="Sustainable SMART Goals for Startups" href="https://crimsonparkdigital.com/sustainable-business-growth-for-startups?utm-source=email" coords="38.75%, 33%, 89.92%, 40.18%" shape="rect" style="z-index: 2;">
</map>
</div>
</div>
</body>
</html>
Tried above code, image loads, no links. In email, image loads and clicking image resutls in it moving into preview mode on display, no links. Feel like it should be working but something is missing...ChatGPT is trying to help me but I need a human lol.
There are many links meant to be included in this image map, but Stack Overflow keeps marking my question as spam so I'm reducing it to 2.
Try inserting the image into a link like this.