限制'onmouseover'到图像的尺寸

时间:2015-02-25 11:43:37

标签: javascript html css onmouseover

我在下一页上有一个小问号的.gif图片:Home Page

不幸的是,我使用的代码并没有限制“onmouseover'问号图像的区域。即,无论何时将鼠标悬停在问号.gif的最左侧/右侧,都会得到相应的消息框。我试图解决此问题,以便只有鼠标悬停在实际图像上时才会显示消息框,而不是图像的左/右等。



<style type="text/css"> <!-- .box {
  height: 75x;
  width: 400px;
  padding: 5px;
  display: none;
  position: absolute;
}
--> </style>
&#13;
&#13;
&#13;

&#13;
&#13;
<span onmouseover="ShowText('Message'); return true;" onmouseout="HideText('Message'); return true;" href="javascript:ShowText('Message')">
<div align=center><img src="https://www.weyhrauchlaw.com/Images/Question_mark.gif" width="13" height="14">
</div>
</span><font size="4">
<div
id="Message"
class="box"
>
Rollover message goes here...
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

将onmouseover / onmouseout attrs放入图片标记:

&#13;
&#13;
<span>
<div align=center><img src="https://www.weyhrauchlaw.com/Images/Question_mark.gif" width="13" height="14" onmouseover="ShowText('Message'); return true;" onmouseout="HideText('Message'); return true;" href="javascript:ShowText('Message')">
</div>
</span><font size="4">
<div
id="Message"
class="box"
>
Rollover message goes here...
</div>
&#13;
&#13;
&#13;

另请注意,现在不鼓励使用event-attrs。相反,通过JS绑定事件,这有助于更好地封装JS并更好地分离内容和表示。

答案 1 :(得分:1)

<span>标记放入<div class="center">

将您的HTML更改为:

<div align="center">
    <span onmouseover="ShowText('Message'); return true;" onmouseout="HideText('Message'); return true;" href="javascript:ShowText('Message')">
        <img src="https://www.yoururl.com/Images/Question_mark.gif" width="13" height="14">
    </span>
</div>

希望这有帮助!