添加小配偶控件

-3

想要在onmouseover上添加一個播放/停止按鈕。我在同一個div中分別調用了幾個圖像。如果圖像A被調用，我想在圖像上出現一個箭頭圖標/按鈕。並且，在圖像上，箭頭/圖標按鈕將消失。我不需要所有的圖像。添加小配偶控件

圖標/按鈕的功能將會將圖像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次函數。有任何想法嗎？

來源

2014-02-28 wxchic

你可以提供任何代碼，你已經嘗試到目前爲止？ –

那麼你可以添加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(); 
}

來源

2014-02-28 19:08:17

好吧我認爲我找到了一個更簡單的解決方案來滿足我的需求。在靜態鏡頭和動畫之間來回切換的功能。唯一的問題是它只允許2點擊。有什麼辦法可以循環或提供無限循環嗎？上面添加了代碼。 – wxchic

這可以通過給每個圖像賦予一個唯一的id來實現。然後使用getElementById（「some id」）來獲取對該圖像的引用。然後將onMouseOver和onMouseOut事件附加到這些引用。這個任務將變得非常簡單，如果你給像img1，img2等圖像系統化的id，因爲你可以在這種情況下使用for循環。

來源

2014-02-28 19:01:52 light94

添加小配偶控件

回答

相關問題