Menu
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>
550
To make a border around an element, all you need is border-style . The values can be solid , dotted , dashed , double , groove , ridge , inset and outset . Basic border styles. border-width sets the width of the border, most commonly using pixels as a value.
To set the font border in CSS, the “-webkit-text-stroke” property and the “text-shadow” property can be used to add the font border in certain ways. The property text-stroke is not included in the W3c standards; however, it can be utilized with the -webkit keyword.
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! ^^
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
