Question 196377 in Html Question posted in
Some basic documentation can be found here.

Html – Responsive image map not clickable – how to fix hyperlinks?

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 1200×6000 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.

Tags:

2

Answers


  1. 0

    Try inserting the image into a link like this.

    <a href=“Example.html”><img src=“”><a>
    Login or Signup to reply.
  2. 0

    I used this code a LONG time ago, but seems to work fine.

    The coordinates I acquired with MS Paint. If you open the image with MS Paint and put the mouse cursor at the top left corner, then bottom right corner, that will be the pixel coordinates for the rectangle. It’s displayed in the status bar, at the bottom of the window.

    <map name="main">
<area shape="rect" coords="525,124,628,144" target=_blank" href="example1.html">
<area shape="rect" coords="395,125,484,143" target=_blank" href="example2.html">
</map>
<img src="image.jpg" usemap="#main" border="0">

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search