div-map-area的html中，如何写CSS能让鼠标滑过area的超链接时出现效果？

Posted 2023-03-30

<div style="display:block;text-align:left">
<img border="0" src="#" usemap="#map1">

<map name="map1">
<area alt="a" coords="260,22,450,47" href="#" shape="rect" title="a">
<area alt="b" coords="470,19,659,46" href="#" shape="rect" title="b">
<area alt="c" coords="681,21,870,46" href="#" shape="rect" title="c">
</map>
</div>

这样的html，一个图片上用area框出了三个区域做超链接。
目前鼠标滑过只会变成一只手，网页样式没有变化，用户浏览网页的时候容易忽略这里的超链接。
有什么样的CSS（最好是嵌入式的），可以使鼠标滑过的时候此区域有强调效果（比如显示区域边框）

采纳有追加

参考技术A 热区是这样的, 如果要做成你的那种效果, 建议, 把热区的地方单独切出来, 然后定位到图上, 做成a的背景之类, 然后, a:hover的时候, 换背景或者加边框之类的, 更好操作一些追问

我做的这个网站是基于google sites做的，有一个流程图，每一个框都是一个链接。由于是google sites，所以如果把图片切开就不好排版了。只能完整的图片放上去然后用热区做超链接。我就想用嵌入式style让热区在hover或者onmouseover的时候显示出一点效果来，有办法吗？

参考技术B a:link color: #FF0000 /* 未访问的链接 */a:visited color: #00FF00 /* 已访问的链接 */a:hover color: #00FF00 /* 鼠标移动到链接上 */a:active color: #00FF00 /* 选定的链接 */ 参考技术C

首先没法写内联，看下面

area:hover 
    box-shadow: 10px 11px 15px #888888;

HTML如何插入js？

插入js 的方法有很多种，例如，在html 的 head 标签 内 通过 script 标签来写或者在body 结束标签前添加script 标签来写，或者引入外部的js 参考技术A 插入js的方法有很多种，例如，在html的head标签内通过script标签来写或者在body结束标签前添加script标签来写，或者引入外部的js 参考技术B 在html中插入js，就需要用到script组件，使用方法如下：<script src="js文件的路径"></script>，这样就可以把js文件引入到html文件中了。 参考技术C 有这么几种方式|･ω･｀)
在网页中用script标签，可分为外部js和内部js。
放在onload等回调函数里面（img标签）
其它方式暂时没有呀～