Search code examples
javascripthtmlcssonmouseover

Limiting 'onmouseover' to image's dimensions

I have a small .gif image of a question mark located on the following page: Home Page

Unfortunately, the code I'm using doesn't limit the 'onmouseover' area for the question mark image. I.e., whenever you mouseover anything to the far left/right of the question mark .gif, you get the appropriate message-box. I'm trying to fix this so that you only get the message-box when you mouseover the actual image, not to the left/right of the image, etc. 

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

Solution

  • Just put The onmouseover/onmouseout attrs into The image Tag:

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

    Also please note that usage of event-attrs is discouraged nowadays. Instead bind events via JS, this encourages better encapsulation of JS and better separation of content and presentation.