Clickable Areas Of Image - Even When Screen Changes Sizes Html

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

Solution 1:

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;
}

<figureid='backing'><svgversion="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" ><imagewidth="1280"height="504"xlink:href="https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_1280.jpg"></image><axlink:href="game1.html"><circlecx="243"cy="133"r="79"fill="#fff"opacity="0.15" /></a><axlink:href="game2.html"><rectx="870"y="147"width="680"height="33"fill="#fff"opacity="0.25"/></a><axlink:href="game3.html"><circlecx="889"cy="379"r="80"fill="#fff"opacity="0.1"/></a><axlink:href="https://code.org/educate/csp"><circlecx="770"cy="671"r="73"fill="#fff"opacity="0.2"/></a><axlink:href="game4.html"><polygonid="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>

Solution 2:

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)}

<svgviewBox="0 0 1800 1800"><imagexlink:href="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg"width="100%"  /><axlink:href="https://stackoverflow.com"><circlecx="243"cy="133"r="79" /></a><axlink:href="https://stackoverflow.com"><rectx="870"y="147"width="680"height="33" /></a><axlink:href="https://stackoverflow.com"><circlecx="889"cy="379"r="80" /></a><axlink:href="https://stackoverflow.com"><circlecx="770"cy="671"r="73" /></a><axlink:href="https://stackoverflow.com"><polygonid="test"points="163,587 214,492 267,473 335,483 377,603 327,631 249,658 211,641" /></a></svg>