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

Question

请访问www.peterbio.com/mom/test.htm获取小型网页

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

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

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

2. ***还需要知道我可以使用哪些免费地图程序来创建图像地图,这样我就可以对其余的气球做同样的事了---除了---你是如此善良,以便为图像地图添加其他坐标并使用相同的图像对于所有其他气球.

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

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

Answer 1

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

在这种情况下,每个区域都是一个气球,由坐标定义,然后动作" onmouseover"触发changeImage带有属性" newimage" 的javascript函数" ",该属性是要显示的图像的名称.

您要设置的气球的坐标是成对插入的.例如,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定义了顶点的位置和数量.尽量保持这些顶点坐标的顺序,以避免混淆某些浏览器.除了多边形之外,还可以使用其他形状,即圆形和矩形.这里描述了这些类型区域的使用.

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

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

总而言之,您只需为每个气球设置一个新区域,或者就此而言,您需要悬停效果的图像区域.为了让您轻松找到图像上的坐标,我找到了这个脚本,可以让您轻松完成任务