CODEWITHSUNDEEP
javascripthtmlcssonmouseover
BSimons
BSimons

Reputation: 9

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>

Upvotes: 0

Views: 124

Answers (2)

Jako Basson
Jako Basson

Reputation: 1531

Put your <span> tag inside your <div class="center">.

Change your html to :

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

Hope this helps!

Upvotes: 1

s-ol
s-ol

Reputation: 1754

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.

Upvotes: 1

Related Questions