English Deutsch Français Italiano Español Português 繁體中文 Bahasa Indonesia Tiếng Việt ภาษาไทย
All categories

Right O, i asked this question before and it was removed for some reason.

I am trying to add a javascript to my page, the sort of javascript where it will display a fixed tooltip, on mousing over an image.
The user has to be able to view the tooltip, and there will be links displayed in it for them to click, so, it shouldnt dissapear when they go to click them. , which is what happened before.

Firstly, i am having trouble connecting the javascript to the images, as the images have no link, and just have the tooltip.

Secondly, the user moves mouse over the image, and then tries to click a link in the tooltip, and it vanished.

And finally, i want the tooltip to appear next to the image, and not miles away on the page.

If anyone can help me with my javascript issues i would be very grateful!

2007-02-18 03:25:44 · 3 answers · asked by kinglee28 2 in Computers & Internet Programming & Design

3 answers

The funda is to display a

box when mouse is moved over the image. You will need to set "position:absolute" and "visibility:hidden" styles to the div. Then you need to set the left/top styles of the div in image's onmouseover event.
The algorithm is pretty straight-forward, but getting the correct position is way too complicated then you can imagine (and that with browser compatibility).

You might be happy with the following javascript function:
function getElementPosition(offsetTrail) {
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1) {
offsetLeft += document.body.leftMargin;
offsetTop += document.body.topMargin;
}
return {left:offsetLeft, top:offsetTop};
}


otherwise, you can also use:
if (document.all) {
x = window.event.clientX + document.body.scrollLeft;
y = window.event.clientY + document.body.scrollTop;
} else {
x = Event.pageX;
y = Event.pageY;
}

2007-02-18 06:53:26 · answer #1 · answered by vin 2 · 0 0

Use the mouse over event on the image

and position a

tag (Containing you description) near where the mouse is or near where the Image is

2007-02-18 04:06:19 · answer #2 · answered by id36uk 3 · 0 0

hi! Im from singapore have the very similar issue too!! Im utilising firefox on mac os10.5.5 and not in any respect internet explorer. if anybody knows the thanks to fix it would easily savour it!! Cant even open the messages. And the humorous aspect is, when I login my pal's account on an similar firefox browser, hotmail works completely effective!! it is basically unusual.

2016-12-04 08:12:50 · answer #3 · answered by ? 4 · 0 0

fedest.com, questions and answers