鼠标悬停和 HTML 区域元素答案

【问题标题】：mouse hover and HTML Area Element鼠标悬停和 HTML 区域元素
【发布时间】：2019-07-26 19:13:02
【问题描述】：

我正在尝试构建带有区域的地图，当鼠标悬停在某个区域上时，我想将地图图像更改为不同的地图图像，其中使用 onmouseover="changeBgImage" 函数突出显示该特定区域我使用了这段代码来自代码共享网络，它不起作用 “mapa”是主地图，“galil”是我要更改的地图（“mapa”在 scss 中）

   <div id="mapa" >
 <img src='assets/map/map-reka.png' usemap="#tiulim-map" border="0" alt="">

                    <map name="tiulim-map">
                         <area id="galil" target="" alt="גליל" title="גליל" href="/noar/tiulim/tracks/upper-galilee-area/Pages/upper-galilee-main.aspx" coords="178,103,173,94,175,87,177,78,179,71,180,63,180,55,188,55,196,56,200,59,204,55,212,56,216,51,224,53,226,58,230,64,236,64,243,62,247,58,252,56,258,57,262,61,261,52,264,48,266,41,268,35,269,26,269,16,276,9,278,18,278,26,276,33,276,40,276,48,274,56,274,63,274,72,272,80,269,88,269,95,270,102,258,100,248,98,236,97,226,99,214,102,202,100,191,101" shape="poly" 
  onmouseover="changeBgImage('assets/map/galil.png', 'mapa')" onmouseout="changeBgImage('assets/map/mapa.png', 'mapa')">

scss 中的“mapa”代码：

#mapa{
    background-image: url(C:\Users\פניני\TRIP4U\נוכחי\TRIP4U\src\assets/map/mapa.png);
            background-repeat:no-repeat;
            width: 344px;
            height: 927px;

}

浏览器给了我以下错误消息：

(index):13 Uncaught ReferenceError: changeBgImage is not defined
    at HTMLAreaElement.onmouseover

【问题讨论】：

changeBgImage函数在哪里定义的？
在导出类 MapComponent 中实现 OnInit {

标签： html angular

【解决方案1】：

我认为问题出在您的事件绑定中。

尝试： (mouseover)="changeBgImage('assets/map/galil.png', 'mapa')"

onmouseout 事件也是如此。

见：https://angular.io/guide/template-syntax#target-event

【讨论】：

您可能希望使用(mouseenter) / (mouseleave) 只设置一次背景图像，而不是每次更改鼠标位置时