Question

希望在onmouseover上添加播放/停止按钮。我在同一个div中有几个单独调用的图像。如果调用图像A，我希望图像上出现箭头图标/按钮。并且onmouseout，箭头/图标按钮从图像中消失。我的所有图像都不需要这个。

图标/按钮的功能是将图像A更改为循环形式并返回。

感谢您的帮助。

这是我到目前为止所使用的：不确定这是最有效的方法，但我有主图表并将其他图表称为叠加层，有些是透明层，有些则不是。显示主地图时，我想调用浮动在地图顶部的按钮。这些将使用onmouseover / mouseout。点击后，我想将主地图更改为循环版本。

#chart
{

width: 1000px;
height:700px;
border: solid 1px #d9d9d9;
vertical-align: middle;
position: relative;
z-index: 1;
float: left;


}

<div id="chart">
<img name="mymap" src="http://www.dalta.com/still_image.gif" 
width="1000px" height="700px" alt="Map" align="middle" />

<div class="basemap" id="HI_basemap" >
<img src="WEB_HI_BASEMAP.gif" width="1000" height="700"></div>


<div class="basemap" id="HI_etp" >
<img src="WEB_HI_ETP_BASEMAP.gif" width="1000" height="700"></div>


<div class="basemap" id="HI_vor" >
<img src="WEB_VOR_HAWAII.gif" width="1000" height="700"></div>

<div class="basemap" id="HI_route" >
<img src="WEB_ROUTES_HI.gif" width="1000" height="700"></div>

</div>

尝试了这一点，但需要一种方法在2张图像之间进行无限循环。

intImage = 2;
   function swapImage() {
   switch (intImage) {
   case 1:
   IMG1.src = "http://ftpweb.delta.com/weather/WEB0HR.gif"
   intImage = 2
   return(false);
   case 2:
   IMG1.src = "http://ftpweb.delta.com/weather/WEB.gif"
   intImage = 1
   return(false);
   }
   }

我用onClick调用它，但它只允许我执行该功能1次。有什么想法吗？

Answer 1

这可以通过为每个图像提供唯一ID来实现。然后使用getElementById（“some id”）来获取对该图像的引用。然后将onMouseOver和onMouseOut事件附加到这些引用。如果你给像img1，img2等图像系统id，这个任务将变得非常简单，因为在这种情况下你可以使用for循环。

Answer 2

然后你可以将id属性添加到图像A.例如：

<img src="link/to/file.png" alt="photo" id="a" />

现在JS将如下：

$('#a').hover(function () {
  // do what so ever,
}
$('#a').mouseleave(function () {
  // do what so ever,
}

API中还有许多其他事件。您可以使用它们，并执行代码。但是要玩/停止你可以这样做：

$('#a').hover(function () {
  $('.audioFile').play(); 
}

添加onmouseover控件

2 个答案: