Today I Learned - Rocky Kev

TIL image maps

POSTED ON:

TAGS: html

This is a image map.
Forest

Sun

The Code

<img src="img/2020-08-02-forest-bg3.jpg" alt="Forest" usemap="#forest">

<map name="forest">
    <area shape="rect" coords="670,387,703,461,698,514,670,538,637,515,631,454,650,395" alt="Sun" id="Sun" onclick="imageMap(this.id)">
</map>

function imageMap(content) {
    console.log('You selected:', content);
    alert("You have found the person");
}

Responsive version

This doesn't scale. Go ahead and try it. Instead, turn it into a SVG.

  <figure class="clickable">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 1200 808">
        <image width="100%" xlink:href="assets/images/forest-bg.jpg">
        </image>
        <rect x="535" y="300" fill="#fff" opacity="0.25" width="120" height="200"
            onclick="imageMap(this.id)" />
    </svg>
  </figure>

References:
Image map generator
howto

Related TILs

Tagged: html

TIL Gmail has a 102KB size-limit for HTML

PLACEHOLDER

TIL how Error correction works in HTML

You never get an 'Invalid Syntax' error on an HTML page. Browsers fix any invalid content and go on.

TIL what DOCTYPE means

tl;dr: DOCTYPE declaration in the first line of the HTML file, to instruct the browser to run the code in Standard mode.