Question

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

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

***需要一些帮助添加更多代码，以便我可以将另一个翻转鼠标悬停图片添加到图像中的其他气球。我不知道怎么。但是通过一个例子和上面的代码添加，我可以学到一点。

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

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

不确定是否需要预先显示图像。它们将在110k或更低。

非常感谢您的帮助。自从我母亲去世以来，我正试图为我的家人做点什么。我想是一个应对的事情。 PC

Answer 1

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

在这种情况下，每个区域都是一个气球，由坐标定义，然后动作“onmouseover”会触发带有属性“changeImage”的javascript函数“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”将区域类型设置为多边形，而coords定义了顶点的位置和数量。尽量保持这些顶点坐标的顺序，以避免混淆某些浏览器。除了多边形之外，还可以使用其他形状，即圆形和矩形。 here描述了这些类型区域的使用。

你问了一个例子，这将在父图像左上角100px的正方形中显示相同的图像（因为我不知道该文件夹中的任何其他图像）：

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

总而言之，您只需为每个气球设置一个新区域，或者就此而言，您想要悬停效果的图像区域。为了让您轻松找到图像上的坐标，我找到了this script，这将使您轻松完成任务

新手需要有关鼠标悬停的帮助，并在HTML页面上映射以在鼠标悬停时显示图像

1 个答案: