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

What is the best way to extend an image to fill the width of a webpage?

Swipe horizontally on mobile devices with text scrolling

The v-autocomplete feature in vuetify doesn't allow for editing the text input after an option has been selected

Unable to generate file with Compass

What is the best way to superimpose an image onto a canvas?

Problem with displaying fonts in web browsers

Troubleshooting inconsistent htaccess changes across different pages?

Bring in the content to Notepad utilizing jQuery

Tips for highlighting a Material UI Button when pressing the Enter key

I need to remove the mobile view of my Angular application because it is not optimized for smaller screens

The function given to requestAnimationFrame is not being triggered as expected

Learn how to automatically retrieve messages without refreshing the page by leveraging the power of AJAX

When the height of the window decreases, scrolling is not implemented

How can we restrict a textbox to only accept alphanumeric characters using solely HTML code?

Display HTML element within the <samp> tag using PHP

The combination of Backbone.js and underscore.js is causing disorganized HTML code

What is the best way to incorporate data from my Input field into my Vue.JS application's existing data structure

How can I modify the color scheme of radio buttons to include a variety of different hues?

Steps for positioning a div with list items to match the height of its parent container

Is there a way to retrieve the modal's viewport height in Angular?