Clickable Area of Image

Clickable areas of image - even when screen changes sizes html

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>

CSS/html - Clickable area is larger than image

Your images have margin so all the space created by the margin is also clickable because they are inside your a tag

Clickable area map on a large image (requiring scrolling) on Wordpress

Measure everything in terms of the image. Its width, height, central position of each clickable area from left and top of the image and the width and height of each clickable area. These are set as CSS variables and CSS can calculate the relevant %s so the system is responsive, adjusting to any viewport dimensions/aspect ratio.

The image can then be put as a background to a containing div with the right aspect ratio and a given width. Each child div is a clickable area.

In this snippet the text about an area simply shows on hover on a pseudo element just for demo purposes. You will probably want to put clickable elements there, perhaps of type radio and reveal more complex info on click.

The snippet has two clickable areas, scroll down to see the second. They have been given borders just for the demo.

.bg {
  --w: 500;
  /* measured width of the image */
  --h: 1500;
  /* measured height of the image */
  width: 100vw;
  height: calc(var(--h) / var(--w) * 100vw);
  background-image: url(https://picsum.photos/id/238/500/1500);
  background-size: 100% auto;
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
}

.bg div {
  position: absolute;
  left: calc((var(--dpx) - (var(--dpw) / 2)) / var(--w) * 100%);
  top: calc((var(--dpy) - (var(--dph) / 2)) / var(--h) * 100%);
  width: calc(var(--dpw) / var(--w) * 100%);
  height: calc(var(--dph) / var(--h) * 100%);
  border: 2px magenta solid;
  /* put in just for demo so you can see the areas */
  display: inline-block;
}

.bg div[data-point="The very top"] {
  --dpx: 240;
  /* measured distance of the central point of the area from the left of the image */
  --dpy: 65;
  /* measured distance of the central point of the area from the top of the image */
  --dpw: 10;
  /* width of the clickable area */
  --dph: 20;
  /* height of the clickable area */
}

.bg div[data-point="Water towers"] {
  --dpx: 418;
  --dpy: 1155;
  --dpw: 40;
  --dph: 40;
}

.bg div:hover::after {
  content: attr(data-point);
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  z-index: 1;
  background-color: black;
  color: white;
}

<div class="bg">
  <div data-point="The very top"></div>
  <div data-point="Water towers"></div>
</div>

Clickable link on specific area of an image

You are looking for map element,

The HTML <map> element is used with <area> elements to define an image
map (a clickable link area).

And you will need to take a look at area to see its attributes in order to get the desired outcome

Here is a basic DEMO

The links won't load inside the SO snippet

<img usemap="#image-clickable" src="http://placehold.it/350x150" alt="image">


<map name="image-clickable">

  <area shape="circle" coords="75,75,75" target="_blank" href="https://google.com">

  <area shape="circle" coords="275,75,75" target="_blank" href="https://google.com/ncr">

</map>

How to make area of image clickable

Give a try to these -

http://polymaps.org/
http://www.amcharts.com/javascript-maps/
Raphael JS

You can try making an SVG version of your map and then implement it's clickiness with one of these libraries depending on which one you choose.

Here's one tutorial to do this with Raphael JS - http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map

How do I create image maps (clickable areas on an image using map ) with React and JSX?

Here is what got the code to work:

I needed to add an href attribute to the area tag
I needed to prevent the default behavior of redirecting to the href when clicking on the clickable area. To do so, I needed to change my code as follows:

    const handleOnClick = (e) => {
        e.preventDefault();
        console.log("You have clicked in the specified area")
    }

        return (
        <div>
            <img src={url} height={height} width={width} alt={alt} useMap="#workmap"/>
            <map id = "workmap" name="workmap">
                <area shape="poly" coords="50,47,56,454,257,357,254,139" alt="test" href="https://c1.staticflickr.com/5/4052/4503898393_303cfbc9fd_b.jpg" onClick={handleOnClick}/>
            </map>
        </div>
    )

Clickable Area of Image

Clickable areas of image - even when screen changes sizes html

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

What can you do instead?

USE SVGs

Show me How!

CSS/html - Clickable area is larger than image

Clickable area map on a large image (requiring scrolling) on Wordpress

Clickable link on specific area of an image

How to make area of image clickable

How do I create image maps (clickable areas on an image using map ) with React and JSX?

Related Topics

Leave a reply

Clickable areas of image - even when screen changes sizes html

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

What can you do instead?

USE SVGs

Show me How!

CSS/html - Clickable area is larger than image

Clickable area map on a large image (requiring scrolling) on Wordpress

Clickable link on specific area of an image

How to make area of image clickable

How do I create image maps (clickable areas on an image using map ) with React and JSX?

Related Topics

Leave a reply

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