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

Question

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

26.4k views Asked by Souvik Das At 23 November 2024 at 15:31

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>

Original Q&A

There are 3 answers

**jsg** · Answer 1 · 2015-06-19 09:14:11

Well what I can see from this is that you're not really using an anchor tag but an area tag, however I'm presuming this is the method you're choosing over using an anchor tag. Follow this:

<style>
  area:link, area:hover, area:active, area:focus {
   border: 5px #f00 solid;
  }
</style>
   <body>

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

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

or if you want to do this with an actual anchor tag maybe

<style>
  a:link, a:hover, a:active, a:focus {
   border: 5px #f00 solid;
  }
</style>
   <body>

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

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

**L777** · Answer 2 · 2021-04-19 00:51:05

If you add border to the map element you will notice that it shows up after the image and it looks empty (zero width and zero height).

So you can use Javascript to get the area dimensions/position and transfer them to the padding and margin styles of the map. The elements position would need to be absolute in order to the border get over the image.

Ps: the yellow rectangle represents the image.

function buildborder(map,area){
var coords = document.getElementById(area).coords.split(",");
document.getElementById(map).style.paddingLeft = coords[2] - coords[0] + "px";
document.getElementById(map).style.paddingTop = coords[3] - coords[1] + "px";
document.getElementById(map).style.marginLeft = coords[0] + "px";
document.getElementById(map).style.marginTop = coords[1] + "px";
}

buildborder('mark','innerarea')

#mark {
border: 2px dotted red !important;
position:absolute;
}
#mark:hover {
border: 2px solid blue !important;
cursor: pointer;
}
img {
position:absolute;
}

<body>
<img usemap="#mark" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAClAWEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9EKKKK/xjP6oCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9k=">
<map name="mark" id="mark">
    <area shape="rect" id="innerarea" coords="10,10,50,50" href="#">
</map>

**TechEdd_YT** · Answer 3 · 2021-01-02 21:58:48

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>

TechQA.

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

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in IMAGEMAP

Popular Questions

Popular Tags

Trending Questions