Javascript 如何为鼠标上方出现的按钮添加单击事件

我有两个问题：

我想在图像的特定位置上的

mouseover

事件上显示图像周围的6个按钮。可能吗

是否可以为这些按钮编写一个

onclick

事件

我在网页设计方面没有任何经验。我使用了下面的代码

Javascript:

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

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

<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"/>

HTML:

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

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

<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"/>

但是当我从图像中移出鼠标时，按钮消失了。如果我删除

onmouseout

事件，按钮将保持我不希望的状态。我真的不知道如何在图像周围放置6个按钮。我计划这样做：

所以请帮助我。谢谢你

是的，为什么不呢

我想在特定位置上的图像上方的鼠标图像周围显示6个按钮。可能吗？ ANS:-为每个按钮指定与“imgBtn”相同的类，并使其默认显示为“无”。在鼠标烤箱的时候就可以在图像上写代码了

在jquery中，例如：-

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

在javascript中：

将此行粘贴到img标签中

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

---

是否可以为这些按钮编写onclick事件？我在网页设计方面没有任何经验。所以请帮助我。多谢各位

答：是的，您可以在onclick on按钮上编写任何函数，如：

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

    //button functionality
}) 

---

将图像设置为一个div的背景。在该div内创建另一个div，并为其中的6个按钮编写代码

通常为这个按钮div设置

display:none

，当从javascript函数悬停该图像时，您可以从javascript设置

display:block

，然后图像上将显示六个按钮

以下是显示按钮onclick事件的代码

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

点击我！

是的，这是可能的，您需要做的是根据需要定义所有六个按钮，并在样式

display:none

中设置属性，当您将鼠标悬停在图像上时，当您想要显示所有六个图像时，然后调用函数

onmouseover

并在鼠标悬停时以这种方式设置

display:none

属性

display:'

在图像上显示所有图像

第二，您可以用每个按钮编写一次

onClick

，它将正常工作

希望对你有用

这将是六个按钮中每个按钮的代码

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

---

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

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

这是一个

---

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

所有可能的操作..您做了任何事情/一些代码？？如果是，则粘贴它。请按您的代码以便更好地理解？但按钮将在鼠标退出时消失。如果我不写onmouseout事件，他们只会这样。如何克服这个问题否，当您将鼠标移到该图像上时，在javaScript中，您将把display属性从none更改为空i-e（display:）。这将显示所有六个按钮，即使您不想再次隐藏它们，这些按钮也不会再次消失。如果您想再次在鼠标上隐藏它们，请在mouseout上编写另一个函数，只需再次设置显示：无，它将再次隐藏按钮。如果我使用display:empty，它仍会保留。我的意思是，当光标范围穿过按钮时，按钮应该隐藏。如果我不清楚，请告诉我您使用的是document.getElementById（'imageshow'）.style.display='block'；应该在其中使用document.getElementById（'imageshow'）.style.display=''；请参考我上传的图片，并向我建议解决方案