Actualmente tengo un mapa de imagen en el que estoy trazando Área
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>una vez que pasamos el cursor sobre el área, cómo agregar un borde a su alrededor.
El siguiente código funciona bien en Javascript , pero ¿cómo puedo hacerlo en 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 ); };Puedes escribir tus códigos js antes de regresar. Y aquí un ejemplo para ti
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> ); }