Currently I have image map on that I am plotting Area
Ex.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
once we hover the area how to add border around it.
following code works fine in Javascript but how can I do that in React.
var areas = document.getElementsByTagName( 'area' );
for( var index = 0; index < areas.length; index++ ) {
areas[index].addEventListener( 'mouseover', function () {this.focus();}, false );
areas[index].addEventListener( 'mouseout', function () {this.blur();}, false );
};
you can write your js codes before return. And here`s a example for you
import React, { useEffect } from "react";
export default function Header() {
useEffect(() => {
function myFunction() {
var areas = document.getElementsByTagName("area");
for (var index = 0; index < areas.length; index++) {
areas[index].addEventListener(
"mouseover",
function () {
this.focus();
},
false
);
areas[index].addEventListener(
"mouseout",
function () {
this.blur();
},
false
);
}
}
myFunction();
}, []);
return (
<div>
<img
alt="img"
id="map"
src="http://thinkingstiff.com/images/matt.jpg"
usemap="#map"
/>
<map name="map">
<area alt="area" shape="circle" coords="50,50,50" href="#" />
<area alt="area" shape="circle" coords="100,100,50" href="#" />
</map>
</div>
);
}