如何为鼠标悬停时出现的按钮添加点击事件

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 button上编写任何函数，如：

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函数中时，您可以从javascript设置display:block，然后图片上会显示六个按钮。

以下是为按钮提供onclick事件的代码。

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

Answer 4

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

我已经构建了一个粗略的演示，您可能需要根据您的要求进行增强。

这是demo

除中心区域外的所有方框都是图像地图。当您将鼠标悬停在任何图像映射上时，我会在jquery的帮助下显示一个按钮。