How do I give a border around the <area coords>?

html css imagemap

Souvik Das · Jun 19, 2015 · Viewed 16.4k times · Source

I want a border around the active link part of the image that is defined by the coordinates. I currently have implemented to the extent that when the user clicks, the outline is visible by using: outline-color, thanks to href. I need a border around the coordinates specified by default. I am not very much experienced in CSS, so some guidance would be appreciated. If I need to mark it at respective intervals. Would use of javascript be a good practice?

<!DOCTYPE html>
<html>
<style>
img[usemap], map area[shape]{
    outline-color: #F00;
}
</style>
<body>
<img src="unnamed.png" usemap="#mark">

<map name="mark">
    <area shape="rect" coords="10,10,50,50" href="#">
</map>

Answer

We can ask the area to always be onfocus like this


      <img src="unnamed.png" usemap="#mark">

     <map name="mark">
        <area onblur="this.focus()" autofocus shape="rect" coords="10,10,50,50" href="#">
        <!-- here ^ I say to let it always on focus -->
     </map>

Hope it works for you! ^^

How do I give a border around the <area coords>?

Answer

Related questions