1

I have an image with a map on it, to make clickable elements. The image is responsive, to fit different screen widths. When the image is resized, the image map link breaks, and points to the wrong place, predictably.

I want this to behave in a way where the links remain on the image in the correct places, even when resized.

I have attempted using this plugin https://github.com/davidjbradshaw/image-map-resizer

I have also attempted using this plugin https://github.com/stowball/jQuery-rwdImageMaps

In both cases, I installed the scripts correctly, exactly as instructed, and I experienced no difference in the way my image map wasn't working. Is there a problem in my code that I am missing? Is there a better tool that works, which is comparably simple to implement for a relative beginner?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
  width: 99%;
  height: auto;  
}
</style>
    <link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"><img src="LOGO.png" width="50" height="50" alt=""/> <a class="navbar-brand" href="Home.html">Business Name</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"> <a class="nav-link" href="blog.html">Blog&nbsp;</a></li>
      <li class="nav-item"> <a class="nav-link" href="aboutus.html">About Us<span class="sr-only">(current)</span></a></li>
      <li class="nav-item"> <a class="nav-link" href="forum.html/">Forum&nbsp;</a></li>
      <li class="nav-item"> <a class="nav-link" href="performance.html">Performance</a></li>
      <li class="nav-item"> <a class="nav-link" href="contactus.html">Contact Us&nbsp;</a></li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
    


<img src="home.png" alt="" width="1920" height="1020" usemap="#banners" class="responsive">
<map name="banners">
  <area shape="rect" coords="946,3,1162,218" href="forum.html">
</map>
<script>$('map').imageMapResize();</script>
</body>
    

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script src="js/imageMapResizer.js"></script>
</html>
Oswald
  • 9
  • 4
  • In the code included above is the example of using David Bradshaw's plugin, to no avail. – Oswald Jul 24 '21 at 19:11
  • Update - Tom's answer on https://stackoverflow.com/questions/7844399/responsive-image-map is very promising so far. – Oswald Jul 24 '21 at 19:21
  • No, that also didn't work. Entered his code and moved the links in dreamweaver. When testing the page, links still pointing at wrong place. – Oswald Jul 24 '21 at 19:32
  • Update - Tom's answer did eventually work, when I did it correctly. – Oswald Jul 24 '21 at 20:08

0 Answers0