如何為鼠標懸停時出現的按鈕添加點擊事件

Question

我有兩個問題：

1. 我想在特定位置上的圖像mouseover事件上圍繞圖像顯示6個按鈕。 可能嗎？

2. 是否可以為這些按鈕編寫onclick事件？

我沒有任何網頁設計經驗。 我使用下面的代碼

使用Javascript：

function showIt(imgsrc)
{
document.getElementById('imageshow').src=imgsrc;
document.getElementById('imageshow').style.display='';
}

function hideIt()
{
document.getElementById('imageshow').style.display='none';
}

HTML：

<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button1"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button2"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button3"/><br>
<img src="Images/Image1.jpg" onmouseover="showIt(this.src)"><br>
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button4"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button5"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button6"/>

但是當我從圖像中mouseout時，按鈕正在消失。 如果我刪除onmouseout事件，按鈕保持只有我不想要的那個。 我真的沒有開始如何在圖像周圍放置6個按鈕。 我打算這樣做：

所以請幫助我。 謝謝

Answer 1

是的，為什么不 ！！！

1. 我希望在特定位置的圖像鼠標懸停時在圖像周圍顯示6個按鈕。 可能嗎？ ANS： - 為每個按鈕提供相同的類，如'imgBtn'，並默認顯示為none。 在鼠標烤箱上映像時，您可以編寫代碼

在jquery中：

jQuery('#imageID').hover(function(){
    jQuery('imgBtn').show();
})

在javascript中：

將此行粘貼到img標記中

onmouseover="document.getElementsByClassName("redText").style.visibility = 'visible';"

---

1. 是否可以為這些按鈕編寫onclick事件？ 我沒有任何網頁設計經驗。 所以請幫助我。 謝謝

ANS：是的，您可以在onclick on按鈕上編寫任何函數，如：

jQuery('#buttonID').click(function(){

    //button functionality
}) 

Answer 2

是的，這是可能的，您需要做的是根據需要定義所有六個按鈕並在樣式display:none設置屬性，當您在圖像上鼠標懸停時以及當您顯示所有六個圖像時，然后調用函數onmouseover並設置display:none屬性display:''這樣當你將鼠標懸停在圖像上時，所有圖像都會顯示出來

第二，你可以用每個按鈕寫onClick ，它會正常工作。

希望對你有用。

這將是六個中每個按鈕的代碼

<input type="button" id="btn1" Onclick="onClickFunc()" style="display:none" value="Button1" />

Answer 3

將圖像設置為一個div的背景。 在div內部創建另一個div並在其中編寫6個按鈕的代碼。

通常為此按鈕div設置display:none ，當從javascript函數懸停該圖像時，您可以設置display:block from javascript，然后六個按鈕將顯示在圖像上。

以下是為按鈕提供onclick事件的代碼。

<button type="button" Onclick="alert('hai')">Click Me!</button>

Answer 4

好的，我想到的唯一解決方案是使用圖像映射和jquery。

我已經構建了一個粗略的演示，您可能需要根據您的要求進行增強。

這是一個演示

除中心之外的所有框都是圖像映射。 當您將鼠標懸停在任何圖像映射上時，我會在jquery的幫助下顯示一個按鈕。