如何为鼠标悬停时出现的按钮添加点击事件 [英] How to add on click event for button that appeared on mouseover

问题描述

我有两个问题:

1. 我想在图像的mouseover事件的特定位置上在图像周围显示6个按钮.有可能吗?

1. I want to display 6 buttons around an image on mouseover event of the image on specific positions. Is it possible?

是否可以为这些按钮编写一个onclick事件?

Is it possible to write an onclick event for those buttons?

我没有任何网页设计经验.我用下面的代码

I don't have any experience in web designing. I used the below code

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个按钮.我打算这样做:

but when I mouseout from the image, the button is disappearing. If i remove the onmouseout event, the button stays like that only which i don't want to. And I really didn't get on how to place 6 buttons around the image. I am planning to do like this:

请帮助我.谢谢

推荐答案

是的，这是可能的，您需要做的就是定义所有六个按钮，并设置样式为display:none的属性，以及何时将鼠标悬停在上面在图像上，当您通过魔杖显示全部六个图像时，调用函数onmouseover并以这种方式设置display:none属性display:''，当您将鼠标悬停在图像上时，将显示所有图像

Yes this is possible, what you have to do is define all six button as you want and set property in style display:none and when you will over the mouse on the image and when you wand to show all six images then call a function onmouseover and set the display:none property display:'' in this way when you will mouse over on the image all the images will get displayed

2，您可以使用每个按钮编写onClick，它将正常工作.

2nd you may write the onClick with each button and it will work fine.

希望会为您服务.

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

This will be the code for each button out of six

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

这篇关于如何为鼠标悬停时出现的按钮添加点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！