What is the best way to add a border to the <map coordinates>?

Question

What is the best way to add a border to the <map coordinates>?

Is there a way to add a border around the active link section of an image defined by coordinates? I have been able to show an outline when the user clicks using outline-color and href, but now I need a default border around the specified coordinates. I am not very familiar with CSS, so any help would be appreciated. Would it be recommended to use JavaScript to mark it at specific intervals?

<!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>

html css imagemap

Answer 1

Answer №1

To ensure that the area remains in focus at all times, we can use the following method:

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

<map name="mark">
   <area onblur="this.focus()" autofocus shape="rect" coords="10,10,50,50" href="#">
   <!-- By using the 'autofocus' attribute here, I am guaranteeing that it will always stay focused -->
</map>

Answer 2

To ensure that the area remains in focus at all times, we can use the following method:

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

<map name="mark">
   <area onblur="this.focus()" autofocus shape="rect" coords="10,10,50,50" href="#">
   <!-- By using the 'autofocus' attribute here, I am guaranteeing that it will always stay focused -->
</map>

Answer 3

Answer №2

It appears that instead of using an anchor tag, you are utilizing an area tag in your code. However, I assume this is the method you have chosen to use. Consider the following:

<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>

If you prefer to achieve this using an actual anchor tag, you could do something like this:

<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>

Answer 4

It appears that instead of using an anchor tag, you are utilizing an area tag in your code. However, I assume this is the method you have chosen to use. Consider the following:

<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>

If you prefer to achieve this using an actual anchor tag, you could do something like this:

<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>

Answer 5

Answer №3

By adding a border to the map element, you will observe that it appears after the image and appears empty with zero width and height.

To address this issue, JavaScript can be used to obtain the area dimensions/position and then apply them to the padding and margin styles of the map. The element's position must be set to absolute in order for the border to display 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/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKC...

Answer 6

By adding a border to the map element, you will observe that it appears after the image and appears empty with zero width and height.

To address this issue, JavaScript can be used to obtain the area dimensions/position and then apply them to the padding and margin styles of the map. The element's position must be set to absolute in order for the border to display 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/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKC...

What is the best way to add a border to the <map coordinates>?

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing flexbox for dynamic width adjustment with flex-grow functionality

Using JQuery to animate a div tag and automatically hide it after a specific duration

Develop a circular carousel using React JS from scratch, without relying on any third-party library

Guide on automatically populating login data in an html5 form using a python script

Retrieve the selected date from the date picker widget

Show equally sized elements using a grid system

Utilizing jQuery to access data stored locally

Exploring HTML5 video playback in AngularJS

How can I showcase Bootstrap cards horizontally within a razor foreach iteration?

Simple HTML files on a local server are having trouble loading images and JavaScript, yet the CSS is loading

Update the radio button to display the value entered in the text input field

using javascript to target a specific css selector attribute

Display "Temporary Text" in an HTML drop-down list if no selection is made

Trigger Polymer() callback when the element is displayed

Customize hover effects in tailwind css with dynamic values

Adding Jquery content to HTML templates using Jinja2: A Simple Guide

Performing a database update in MySQL using user-generated data

What are the steps to overlay a button onto an image with CSS?

javascript variable pointing to an unknown object

Tips for adjusting the height of a fixed-size child element on the screen using only CSS and JavaScript restrictions