4

我有两个问题：

  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 个按钮。我打算这样做： 在此处输入图像描述

所以请帮助我。谢谢

4

4 回答 4

1

是的，为什么不 ！！！

  1. 我想在特定位置的图像鼠标悬停时在图像周围显示 6 个按钮。可能吗？ANS :- 为每个按钮提供与“imgBtn”相同的类，并使其默认不显示。在图像上的鼠标烤箱时，您可以编写代码

在 jquery 中像：- 

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

在 javascript 中：

将此行粘贴到 img 标签上

onmouseover="document.getElementsByClassName("redText").style.visibility = 'visible';"
  1. 是否可以为这些按钮编写 onclick 事件？我没有任何网页设计经验。所以请帮助我。谢谢

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

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

    //button functionality
})
于 2012-09-03T12:17:08.867 回答
1

是的，这是可能的，您要做的就是根据需要定义所有六个按钮并设置属性，display:none当您将鼠标悬停在图像上以及当您想要显示所有六个图像时，然后调用一个函数onmouseover并设置display:none属性display:''这样，当您将鼠标悬停在图像上时，所有图像都会显示

第二，您可以onClick使用每个按钮编写，它会正常工作。

希望对你有用。

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

<input type="button" id="btn1" Onclick="onClickFunc()" style="display:none" value="Button1" />
于 2012-09-03T12:46:45.927 回答
0

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

通常display:none为此按钮 div 设置，当从 javascript 函数悬停该图像时，您可以display:block从 javascript 设置，然后六个按钮将显示在图像上。

以下是为按钮添加 onclick 事件的代码。

<button type="button" Onclick="alert('hai')">Click Me!</button>
于 2012-09-03T12:17:39.490 回答
0

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

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

这是一个演示

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

于 2012-09-03T12:56:09.293 回答