5

I am trying to learn how to make a simple website in HTML. Currently I have created a background image that image has multiple shapes on it. I want different parts of the image to be clickable links. I understand how to find the coordinates and use an image map however the clickable links are not working when I change the screen size. How can I make the clickable areas work for different screen sizes?

body, html {
        height: 100%;
        margin: 0;
    }
    
    .bg {
        background-position: left;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    <div class="bg"></div>
    <body>
    <img src="https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_1280.jpg" width="100%" height="100%" usemap="workmap" class="bg">
    <map name="workmap">
        <area target="_blank" alt="Game1" title="Game1" href="game1.html" coords="243,133,79" shape="circle">
        <area target="_blank" alt="Game2" title="Game2" href="game2.html" coords="870,147,680,33" shape="rect">
        <area target="_blank" alt="Game3" title="Game3" href="game3.html" coords="889,379,80" shape="circle">
        <area target="_blank" alt="CS" title="CS" href="https://code.org/educate/csp " coords="770,671,73" shape="circle">
        <area target="_blank" alt="Game4" title="Game4" href="game4.html" coords="163,587,214,492,267,473,335,483,377,603,327,631,249,658,211,641" shape="poly">
    </map>

Thank you!

Nimitt Shah
  • 4,477
  • 2
  • 10
  • 21
Ali
  • 67
  • 2
  • 6
  • If it must be an image with clickable areas you can use SVG – enxaneta Nov 07 '18 at 17:12
  • Is it possible to do this without SVG? I cannot convert the image I am using to SVG format without messing up the coloring. – Ali Nov 07 '18 at 18:39
  • @Ali you can embed images in SVG. It would be extremely difficult if not impossible to convert a rasterized image to a SVG – zgood Nov 07 '18 at 18:54

2 Answers2

12

Why the <map> approach is not the best way:

There are numerous disadvantages to using the HTML image <map>/<area> system in your HTML pages. Most notably because when the image itself will (should) be scalable and dynamic based on client screen size, the process of adjusting the clickable elements relating to the image to whatever size display is required, simply doesn't exist here.

As HTML <map> elements are absolute in their scale and size, they will not work with dynamicly sized content (width:80%, etc.).

What can you do instead?

There are a few options. There are some Javascript systems you can find that will dynamically resize the <map> area boundaries when it detects the window (re)size. These will of course add some overhead as well as JS bloat to page loads.

OR Wait for it, there's a drumroll coming... can you hear it?

USE SVGs

Yep - Scalable Vector Graphics are the future present with regards to image-mapping clicks without the Javascript overhead, you can read about them on their wiki or on MDN.

So, using SVGs you can import a standard image format (such as JPG, etc.) and then overlay this with anchor points and clickable elements that you can style with CSS-like styling, which gives vastly more support and possibilities than the old <map> syntax, such as fades, hovers, blends and blurs all happening on static images due to user interaction, at any set point, on any sized screen.

Show me How!

Highly Recommended is this tutorial on making an SVG clickable area map on an HTML image element.

(links are highlighted for illustration purposes)

#backing {
 vertical-align: middle;
 margin: 0;
 overflow: hidden;
}
#backing svg { 
 display: inline-block;
 position: absolute;
 top: 0; left: 0;
}
    <figure id='backing'>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 504" preserveAspectRatio="xMinYMin meet" >
     <image width="1280" height="504" xlink:href="https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_1280.jpg">
     </image>
   <a xlink:href="game1.html"><circle cx="243" cy="133" r="79" fill="#fff" opacity="0.15" /></a>
  <a xlink:href="game2.html"><rect x="870" y="147" width="680" height="33" fill="#fff" opacity="0.25"/></a>
  <a xlink:href="game3.html"><circle cx="889" cy="379" r="80" fill="#fff" opacity="0.1"/></a>
  <a xlink:href="https://code.org/educate/csp"><circle cx="770" cy="671" r="73" fill="#fff" opacity="0.2"/></a>
  <a xlink:href="game4.html"><polygon id="test" points="163,587 214,492 267,473 335,483 377,603 327,631 249,658 211,641" fill="#fff" opacity="0.3"/></a>
     </svg>
      </figure>
Martin
  • 22,212
  • 11
  • 70
  • 132
  • Thank you for the response, however I am having some troubles using SVG. Is it possible to do this without SVG? I cannot convert the image I am using to SVG format without messing up the coloring. Also I do not want colored blocks on top of the picture representing the SVG areas. – Ali Nov 07 '18 at 18:40
  • @Ali, you do not need to convert the image to an SVG. Please read the tutorial (or view [enxaneta's answer](https://stackoverflow.com/a/53195272/3536236) ) – Martin Nov 07 '18 at 18:42
  • @Ali view my edit I have made a working version for you. This solves your issue – Martin Nov 07 '18 at 18:53
  • thank you for the helpful insight, I think I have gotten a grasp on the idea and can implement what I have envisioned. – Ali Nov 08 '18 at 06:03
4

I agree with @Martin. The best option here is SVG. Your SVG can look like this: (I'm using your coords.)

*{margin:0;padding:0;}
svg{width:100vh;border:1px solid;}
svg *{fill:rgba(0, 255, 255, .4)}
<svg viewBox="0 0 1800 1800">
   <image xlink:href="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" width="100%"  />
  <a xlink:href="https://stackoverflow.com"><circle cx="243" cy="133" r="79" /></a>
  <a xlink:href="https://stackoverflow.com"><rect x="870" y="147" width="680" height="33" /></a>
  <a xlink:href="https://stackoverflow.com"><circle cx="889" cy="379" r="80" /></a>
  <a xlink:href="https://stackoverflow.com"><circle cx="770" cy="671" r="73" /></a>
  <a xlink:href="https://stackoverflow.com"><polygon id="test" points="163,587 214,492 267,473 335,483 377,603 327,631 249,658 211,641" /></a>
  
</svg>
enxaneta
  • 31,608
  • 5
  • 29
  • 42