新手需要鼠标悬停的帮助和 HTML 页面上的地图以在鼠标悬停时显示图像

Posted 2023-03-05

【中文标题】新手需要鼠标悬停的帮助和 HTML 页面上的地图以在鼠标悬停时显示图像

【英文标题】：Newbie needs help on mouseover and map on HTML page to show images on mouseover

【发布时间】：2010-12-29 07:49:34

【问题描述】：

有一个小网页在 www.peterbio.com/mom/test.htm

有人用鼠标悬停并创建图像映射来编写代码。当您单击其中一个紫色气球时，会显示另一个图像。

***需要一些帮助来添加更多代码，以便我可以将另一个鼠标悬停图片添加到图像中的不同气球。我不知道怎么。但是通过上面页面中的示例和代码补充，我可以学到一些东西。

然后我可以这样做，以便图片中的所有气球都将鼠标悬停并显示其他 JPG（稍后我将添加不同的图像）。您可以使用相同的 jpg 添加第二、第三等翻转图像。

***还需要知道我可以使用什么免费地图程序来创建图像地图，这样我就可以对其余的气球做同样的事情---除非---你好心将其他坐标添加到图像地图和对所有其他气球使用相同的图像。

不确定图像是否需要预先处理。他们将是大约 110k 或更少。

非常感谢您的帮助。自从我母亲去世以来，我试图为我的家人做点什么。我想这是一种应对方式。 电脑

【参考方案1】：

<map name="momMap" id="momMap">

在这种情况下，每个区域都是一个气球，由坐标定义，然后动作“onmouseover”触发javascript函数“changeImage”，该函数采用属性“newimage”，这是图像的名称显示。

您要设置的气球的坐标是成对插入的。例如，0,0 表示左上角，添加的对越多，形状的顶点就越多，连接这些顶点形成的区域将受到 javascript 操作的影响。

<area shape="poly" coords="326,93,316,136,275,165,250,163,235,127,261,100,286,66,308,68" href="#" onmouseover="changeImage('momf.jpg')" onmouseout="resetImage()"/> 

所以“poly”将区域类型设置为多边形，坐标定义了顶点的位置和数量。尽量保持这些顶点坐标的顺序，以避免混淆某些浏览器。 除了多边形之外，您还可以使用其他形状，即圆形和矩形。描述了这些区域的使用here。

您要求举个例子，这将在距父图像左上角 100 像素的正方形中显示相同的图像（因为我不知道该文件夹中的任何其他图像）：

<area shape="poly" coords="0,0,100,0,100,100,0,100" href="#" onmouseover="changeImage('momf.jpg')" onmouseout="resetImage()"/> 

因此，总而言之，您只需为每个气球设置一个新区域，或者就此而言，为您想要悬停效果的图像的任何区域设置一个新区域。为了减轻您在图像上查找坐标的费用，我已找到this script，这将减轻您的任务

【讨论】：

谢谢。我多么愚蠢。简单的。有什么好的免费地图程序来获取坐标吗？谢谢彼得

没问题，我是来帮忙的。我添加了一个网站链接，可以让您轻松映射图像，只需选择形状类型并开始单击顶点即可。玩得开心！

欢迎您，如果我的回答消除了您的所有疑虑，请考虑单击勾号，使其成为您接受的回答，这样这个问题就会成为已回答的问题，谢谢。