新手需要鼠标覆盖和HTML页面上的地图来显示鼠标上的图像。

Question

网址: www.peterbio.com/mom/test.htm

有人用鼠标编写了代码，并创建了图像地图。当你点击一个紫色气球时，会出现另一个图像。

1. *需要一些帮助，添加更多的代码，以便我可以添加另一个滚动鼠标的图片到一个不同的气球在图像。我不知道怎么做。但是通过一个例子和上面页面上的代码，我可以学到一点。

然后，我可以做同样的事情，这样图片中的所有气球都可以执行鼠标操作，并显示其他JPG的(稍后我将添加不同的图像)。您可以使用相同的jpg在那里添加一个第二，第三，等翻滚图像。

1. *我还需要知道我可以用什么免费的地图程序来创建图像地图，这样我就可以对剩下的气球做同样的事情--除非--除非--你能在图像地图中添加其他坐标，并对所有其他气球使用相同的图像。

不确定图像是否需要预先保护。他们将是大约110,000或更少。

非常感谢你的帮助。自从我母亲去世后我就想为我的家人做点什么。我想是一种应对的方式。个人电脑

Answer 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“将区域类型设置为多边形，而和弦定义了顶点的位置和数量。尽量保持这些顶点坐标的顺序，以避免混淆某些浏览器。除了多边形，还有其他形状可以使用，这些形状是，圆圈和矩形。这些类型区域的使用被描述为这里。

您需要一个示例，它将在父图像左上角的100 of正方形中显示相同的图像(因为我不知道该文件夹中的任何其他图像)：

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

​

总之，你只需要为每个气球设置一个新的区域，或者任何你想要悬停的图像区域。为了让您轻松地找到图像上的和弦，我找到了这个剧本，它将简化您的任务