将 'onmouseover' 限制为图片尺寸
Limiting 'onmouseover' to image's dimensions
我在以下页面上有一个问号的小 .gif 图片:Home Page
不幸的是,我使用的代码没有限制问号图像的 'onmouseover' 区域。即,每当您将鼠标悬停在问号 .gif 的最远 left/right 处时,您都会看到相应的消息框。我正在尝试解决此问题,以便您仅在将鼠标悬停在实际图像上时才会收到消息框,而不是图像的 left/right 等。
<style type="text/css"> <!-- .box {
height: 75x;
width: 400px;
padding: 5px;
display: none;
position: absolute;
}
--> </style>
<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>
只需将 onmouseover/onmouseout 属性放入图像标签中即可:
<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>
另请注意,现在不鼓励使用事件属性。而是通过 JS 绑定事件,这鼓励更好地封装 JS 和更好地分离内容和表示。
将您的 <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>
希望对您有所帮助!
我在以下页面上有一个问号的小 .gif 图片:Home Page
不幸的是,我使用的代码没有限制问号图像的 'onmouseover' 区域。即,每当您将鼠标悬停在问号 .gif 的最远 left/right 处时,您都会看到相应的消息框。我正在尝试解决此问题,以便您仅在将鼠标悬停在实际图像上时才会收到消息框,而不是图像的 left/right 等。
<style type="text/css"> <!-- .box {
height: 75x;
width: 400px;
padding: 5px;
display: none;
position: absolute;
}
--> </style>
<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>
只需将 onmouseover/onmouseout 属性放入图像标签中即可:
<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>
另请注意,现在不鼓励使用事件属性。而是通过 JS 绑定事件,这鼓励更好地封装 JS 和更好地分离内容和表示。
将您的 <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>
希望对您有所帮助!