Giving an image map a dashed outline

Berkay 0
Viewed 42

I've made an image map whereas I tab through the page, it outlines the <area> element with the given color (in Firefox it just has a thin dotted line, in Chrome it happens to show the outline in a solid color) but doesn't apply any of the other given parameters.

*:focus-visible {
    outline: 2px dashed #000 !important;
    z-index: 1010;
    outline-offset: 0;
    -webkit-box-shadow: 0 0 0 2px #fff !important;
    box-shadow: 0 0 0 2px #fff !important;
}
map {
    display: inline-block;
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imagemap</title>
</head>


<body>
    <!-- Image Map Generated by http://www.image-map.net/ -->
    <img src="https://simplenotes.nl/img/foto.jpg" usemap="#image-map">

    <map name="image-map">
        <area target="" alt="kosten" title="kosten" href="#"
            coords="379,239,364,109,506,0,600,0,601,41,437,165,443,217,426,224,407,234,395,236" shape="poly">
    </map>
</body>

</html>

So when tabbing through the page it should show a dotted line like: Example picture

imagemap css html
1 Answers

I think you also need to apply an area css attribute so that you can click on the area and it will highlight it in red.

Like so:

area{
    outline-style: dashed;
    outline-color: red;
}

This made it clickable and would light up when tabbed over as well. I even removed the focus-visible and it still worked.

<!DOCTYPE html>
<html>
<style>

map {
    display: inline-block;
}
area{
     outline: 5px dashed    red;
}
</style>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imagemap</title>
</head>


<body>
    <!-- Image Map Generated by http://www.image-map.net/ -->
    <img src="https://simplenotes.nl/img/foto.jpg" usemap="#image-map">

    <map name="image-map">
        <area target="" alt="kosten" title="kosten" href="#" coords="379,239,364,109,506,0,600,0,601,41,437,165,443,217,426,224,407,234,395,236"shape="poly">
    </map>
</body>                     
</html>

Is this what you're looking for? Let me know how else I can help!

v/r Harp

Also, how did you get your coords? Trying to figure out why there's a tiny box at the corner where the dashes are applied correctly.

enter image description here

This gets rid of the extra box but still no dashed line. Just note how you were doing it earlier with the *:Focus-visible{ will highlight everything on the page with that css style when focused. If you only want the key highlighted then you have to call the specific div to have the focus area (in this case you called it "area").

area:focus-within{
     outline: 5px dashed    red;
}

If you read all the above and my train of thought and you made it this far, thanks!

So last possible solution: Make your polygon a CSS attribute class and call that class to overlay on top of the image. Once you make your polygon CSS shape, you can overlay it onto the image and do :focus-within to have it appear and disappear when not focused over.

Example:

 div {
            float: left;
            width: 250px;
            height: 160px;
            shape-outside: polygon(0 0, 100% 50%, 0 100%);
        }

Good luck, if you still need help later I can keep trying things until then!

harp0
Related