/    Sign up×
Community /Pin to ProfileBookmark

OnMouse Pop-up Windows

Copy linkTweet thisAlerts:
Jun 17.2006

I got a script from this source: [url]http://javascript.internet.com/navigation/pop-up-link-with-description.html[/url]

I figured it all out except for one thing: when I put an image in the pop-up window, it shows at the BOTTOM of the link.

Is there a way to have the picture show “up” – meaning that it would not show below the link but up.

See:[url]http://www.harborhs.santacruz.k12.ca.us/pops.html[/url]

I’m not sure I even want to use this, but I want to learn it anyway.

Thanks.

Margaret

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceJun 17.2006 — Where is the example in that page of an image in the link popup description?
Copy linkTweet thisAlerts:
@LogicianJun 17.2006 — I got a script from this source: http://javascript.internet.com/navigation/pop-up-link-with-description.html

I figured it all out except for one thing: when I put an image in the pop-up window, it shows at the BOTTOM of the link.

Is there a way to have the picture show "up" - meaning that it would not show below the link but up. [/QUOTE]I presume that you're referring to the 'map' link. This is a tooltip script, which displays the div adjacent to the mouse cursor and is not quite what you require. In the extract below you'll see three instances of: y-5

If you change all those to say: y-500 , I would expect the div to appear in about the right place, however it's still not optimal as it will disappear when the cursor is moved from the link.
[CODE]
if(navigator.family =="nn4") {
document.object1.document.write(desc);
document.object1.document.close();
document.object1.left=x+15;
document.object1.top=y-5;
}
else if(navigator.family =="ie4"){
object1.innerHTML=desc;
object1.style.pixelLeft=x+15;
object1.style.pixelTop=y-5;
}
else if(navigator.family =="gecko"){
document.getElementById("object1").innerHTML=desc;
document.getElementById("object1").style.left=x+15;
document.getElementById("object1").style.top=y-5;
}[/CODE]I suggest abandoning that script and instead create the div manually and style it to overlay the content in the desired position, then style its visibility to hidden. The link should contain code to display the div when hovered, plus its HREF should point to an alternative page in case javascript is disabled.

[CODE]<A href='map.htm' onmouseover="document.getElementById('myDiv').style.visibility='visible';">MAP</a>
[/CODE]The div itself should display a link that hides it.
Copy linkTweet thisAlerts:
@phpnoviceJun 17.2006 — Is there a way to have the picture show "up" - meaning that it would not show below the link but up.

See:http://www.harborhs.santacruz.k12.ca.us/pops.html[/QUOTE]
OK the "map" link... In the script, these two lines (for example) deal with positioning the popup:

document.getElementById("object1").style.left=x+15;

document.getElementById("object1").style.top=y-5;

You can make the popup pop "up" by doing the following (for example):

document.getElementById("object1").style.left=(x+15) + "px";

document.getElementById("object1").style.top=(y-[COLOR=Red]200[/COLOR]) + "px";

The value you would place there is the height of the image.

If the image is too wide, then you can do the same thing for the "left" value.
Copy linkTweet thisAlerts:
@missrumauthorJun 17.2006 — Thanks so much.

I had looked at that code and wondered if I could change a piece of it to fix the map problem.

You gave me permission and voila! It's perfect.

Thank you so much!

Margaret ?
Copy linkTweet thisAlerts:
@phpnoviceJun 17.2006 — You gave me permission and voila![/QUOTE]
Hehehe, that's funny. ?

You're welcome.

Cheers.
×

Success!

Help @missrum 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 5.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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...