/    Sign up×
Community /Pin to ProfileBookmark

Making Mouseover Area Bigger

Copy linkTweet thisAlerts:
Jul 20.2007

Hi,

I am using this as my code and woundering about how to make the mouseover area bigger. Right now it is very small and I was woundering were and how I would get it bigger.

Thanks for your reponse.

[QUOTE]

<html>
<head>
<script type=”text/javascript”>
function shImage(url) {
if (url) {
var elm = document.getElementById(’employeeImage’);
elm.src = url;
elm.style.display = ‘block’;
}
else
elm = document.getElementById(’employeeImage’).style.display = ‘none’;
}
</script>
</head>
<body>
<a href=”#” onmouseover=”shImage(url_to_pic);” onmouseout=”shImage();”>employee name</a>
<img id=”employeeImage” src=”” style=”display: none;” /></div>
</body>

[/QUOTE]

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@thechasboiJul 20.2007 — jreed

If you want to increase the onmouse over size use css and insert a div over the top of the area and add a clear gif background to that div this will give the feeling of larger area and be larger as well with out making the image larger.
Copy linkTweet thisAlerts:
@jreedauthorJul 20.2007 — I really know nothing about HTML, or Javascript so what you just said means nothing to me sorry.

If there is somthing simple that I can try that would be better.

Thanks
Copy linkTweet thisAlerts:
@thechasboiJul 20.2007 — Can you give me a more definitive explanation to the problem. It would be easier to answer from that.
Copy linkTweet thisAlerts:
@jreedauthorJul 20.2007 — the area were you have to hover the mouse over in order to get the picture to show up is really small and touchy. Can I get it a little bigger so its not so small the area is like the size of the underlining under your name.
Copy linkTweet thisAlerts:
@thechasboiJul 20.2007 — [CODE]
 --------------- <--- newDiv
| |
| |
| |---------| <-|------oldDiv
| |---------| |
| |
----------------
[/CODE]
ok what this is take the old element whether a div or what ever and insert a div inside with a width that is 10% wider and 10% taller in px not percentages ie old width 100px new width 110px. ok next assign a style to the new div like thisstyle="position:absolut;top-1/2 of the percent increase in height 5px in the example;left:top-1/2 of the percent increase in width 5px in the example;width:being a percent larger say 10% and that being 110px as in example;height:being a percent larger say 10% and that being 110px as in example;background:url(clear.gif) repeat;" add the onclick event to that that should work. I hope the little diagram does not throw things off too much.
Copy linkTweet thisAlerts:
@jreedauthorJul 20.2007 — Sorry but I know very very little HTML. That went right over my head.
Copy linkTweet thisAlerts:
@DokJul 20.2007 — [CODE]<div onmouseover="shImage(url_to_pic);" onmouseout="shImage();" style="border: 1px solid #ff0000; width: 200px; height: 200px;>
<a href="#">employee name</a>
<img id="employeeImage" src="" style="display: none;" />
</div>[/CODE]
You can edit the width and height properties of the div tag to your needs. The red border is just there so you can see the coverage area.
Copy linkTweet thisAlerts:
@jreedauthorJul 20.2007 — Thanks it works great. Can you maybe help me with another problem. I have 60 Employees and when I mouseover most of the peoples name it brings the picture up in a totaly different persons box. It should be showing right under there name but shows in a different person's box.

Anyone suggestions in my code from above.

Thanks alot for the size of the mouseover.
Copy linkTweet thisAlerts:
@DokJul 20.2007 — You have to work it out yourself using CSS positioning. Do a google search and read some tutorials - its not difficult but its too much to explain here.
Copy linkTweet thisAlerts:
@jreedauthorJul 23.2007 — I have really no HTML experiance and I dont have a clue about css. Is there any easy HTML fix that will do it for me.
Copy linkTweet thisAlerts:
@thechasboiJul 23.2007 — I am sure some one on this forum will help you out further with a small consulting fee. If you were a nonprofit I am certain some one here will help for free. Either way I can help you with a small fee, maybe just lunch. Give the person who help you out most a private message and they may be inclined to help out.
×

Success!

Help @jreed spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...