/    Sign up×
Community /Pin to ProfileBookmark

popup menu over word

Copy linkTweet thisAlerts:
Jun 12.2009

Hi,
I would like to write a script that creates a pop-up menu of links [like tool-tip, but with links], whenever the user hover over certain words.
For example, I will mark the word [B]Great Britain[/B] and when the user will move the mouse over it, there will be a small menu of links:
Link1
Link2
Link3
etc.

Let’s assume the links are fixed and not related to the word. My challenge is how to create this tool-tip of links.

Any idea on how to do that?
Thanks.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@SyCoJun 12.2009 — Not perfect but it should get you going.

[code=html]<html>
<head>
<script language="JavaScript">
<!--

function viewMe2(e,id,ccid){
var myId=document.getElementById(id);
//capture the mouse
e = e || window.event;
myId.style.position = "absolute";
myId.style.top = e.clientY + 10 +"px";
myId.style.left = e.clientX + 10 +"px";
show(id);
}
function show(id){
document.getElementById(id).style.display="block";
}

function hide(id){
document.getElementById(id).style.display="none";
}
</script>
</head>
<body>
<a href="#" onmouseover="viewMe2(event,'myDiv','123');" >Menu</a>
<br />
<div id="myDiv" style="border:1px solid black;display:none;" onmouseover="show('myDiv')" onmouseout="hide('myDiv')">
<a href="">Linky</a><br />
<a href="">Linky</a><br />
<a href="">Linky</a><br />
</div>

</body>
</html>[/code]

I'm about to make a post on a similar thing with a problem you might run into. Making the menu less sensitive and passing the mouse event.
Copy linkTweet thisAlerts:
@atazurauthorJun 13.2009 — Thanks man, that is *exactly* what I needed.

----------------
Now playing: [url=http://www.foxytunes.com/artist/the+swish+***+-+the+hold+steady/track/a+positive+rage+2009]The Swish/*** - The Hold Steady - A Positive Rage/2009[/url]
Copy linkTweet thisAlerts:
@atazurauthorJun 13.2009 — As I said, the code works great, but now I noticed that when I scroll down and place the link at the bottom of the page - the menu appears at the top of it, not close the mouse (I actually need to scroll back up to find it).

Any ideas on how to prevent it and display the menu always near the mouse?

Thanks again.
Copy linkTweet thisAlerts:
@atazurauthorJun 13.2009 — [CODE]
function viewMe2(e,id,ccid){
var myId=document.getElementById(id);
//capture the mouse
e = e || window.event;
//myId.style.position = "absolute";

//screenX,screenY
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}

myId.style.top = posx + 10 +"px";
myId.style.left = posy + 10 +"px";
//myId.style.top = e.clientY + 10 +"px";
//myId.style.left = e.clientX + 10 +"px";
show(id);
}
[/CODE]
That seems to work... any other ideas?
×

Success!

Help @atazur 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.1,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

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