有小网页在 www.peterbio.com/mom/test.htm
有人用鼠标悬停并创建图像映射来编写代码。当您单击其中一个紫色气球时，会显示另一张图片。
- *** 需要一些帮助来添加更多代码，以便我可以将另一个鼠标悬停图片添加到图像中的不同气球。我不知道怎么。但是通过示例和对上面页面代码的补充，我可以学到一些东西。
然后我可以做同样的事情，这样图片中的所有气球都会进行鼠标悬停并显示其他 JPG(我稍后会添加不同的图片)。您可以使用相同的 jpg 来添加第二张、第三张等翻转图像。
- *** 还需要知道我可以使用什么免费 map 程序来创建图像 map ，以便我可以对其余的气球做同样的事情 --- 除非 --- 你好心地向图像 map 添加其他坐标和对所有其他气球使用相同的图像。
不确定图像是否需要预先处理。它们将约为 110k 或更少。
非常感谢您的帮助。自从我母亲去世后，我一直在努力为我的家人做点事。我想这是一件应对之事。 电脑
最佳答案
<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这将减轻你的任务
关于javascript - 新手需要有关鼠标悬停和在 HTML 页面上映射以在鼠标悬停时显示图像的帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1949915/