Login/Register
Clickable areas of image - even when screen changes sizes html
Asked Answered
Solved htmlcssimagecoordinatesimagemap
C

2

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!

Comedienne answered 7/11, 2018 at 16:54 Comment(3)
If it must be an image with clickable areas you can use SVG – Tampere
Is it possible to do this without SVG? I cannot convert the image I am using to SVG format without messing up the coloring. – Comedienne
@Comedienne you can embed images in SVG. It would be extremely difficult if not impossible to convert a rasterized image to a SVG – Protochordate
R
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>
Rinee answered 7/11, 2018 at 17:17 Comment(4)
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. – Comedienne
@Ali, you do not need to convert the image to an SVG. Please read the tutorial (or view enxaneta's answer ) – Rinee
@Comedienne view my edit I have made a working version for you. This solves your issue – Rinee
thank you for the helpful insight, I think I have gotten a grasp on the idea and can implement what I have envisioned. – Comedienne
T
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>
Tampere answered 7/11, 2018 at 18:7 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.