image popup tip when mouse hover an object?

N

nickwang

Hi, does any javascript framework can implement image popup tip when
mouse hover an object?

Mootool has a text popup tips. Is it easy to inherit it and create a
popup tip with images or other html code?
 
D

Darko

Hi, does any javascript framework can implement image popup tip when
mouse hover an object?

Mootool has a text popup tips. Is it easy to inherit it and create a
popup tip with images or other html code?

If this is the only thing you need, I don't see a reason to use
another, probably large and poweful, library to do a simple thing.
 
N

nickwang

If this is the only thing you need, I don't see a reason to use
another, probably large and poweful, library to do a simple thing.

I need to show image in the popup tips. However, mootool doesn't have
it. Any suggestion on the solution?
 
D

Darko

I need to show image in the popup tips. However, mootool doesn't have
it. Any suggestion on the solution?

<html>
<head>
<script>
// What you need to do first, is make a function that detects your
// mouse coordinates in the moment of hovering:
function mouseCoords( event )
{
if ( event.pageX || event.pageY )
return {
x: event.pageX,
y: event.pageY
};
return {
x: event.clientX + document.body.scrollLeft -
document.body.clientLeft,
y: event.clientY + document.body.scrollTop -
document.body.clientTop
};
}

// Then you need to make an, e.g. global variable that would hold
information
// if the image is currently visible or not:
window.imageVisible = false;

// Then you need to write a function that'd show the image when the
object is hovered:
function setVisible(image, object, event )
{
var mo = mouseCoords( event ); // get coordinates of the mouse
image.style.top = mo.y; // set image's position to the one
of the mouse
image.style.left = mo.x;
image.style.visibility = "visible"; // set it loose
window.imageVisible = true; // make it known that it's
already visible
setTimeout( function() // in two seconds, order it
to hide again
{
image.style.visibility = "hidden";
window.imageVisible = false;
}, 2000 );
}

// Then you need to set the handler on the object of interest:
window.onload = function()
{
var image = document.getElementById("imageId" );
var object = document.getElementById( "objectId" ); // the one
that will get hovered
object.onmouseover = function(event) // when the object is
hovered, ...
{
if ( window.imageVisible === true ) // if the image is
already visible, then just ...
return; // ...ignore the event
if ( window.event ) // settle some
differences between ie and mozilla
event = window.event;
setVisible( image, object, event ); // call the method from
above
}
}
</script>
<body>
<!-- this is the object to hover -->
<div style="float: left; width: 100px; height: 100px; background-
color: red" id="objectId">
Hover over here!
</div>

<!-- this is the image to show. notice that it has the
position:absolute css value, so you can put
it on any position -->
<img src="dontsmoke.bmp" style="visibility: hidden; position:
absolute;" id="imageId" />
</body>
</html>

Of course, you should adapt it to your needs, and you should make it
available for more objects etc.
which you can do easily I hope, once you understand the techniques
described here.

Cheers.
 
E

Evertjan.

wrote on 07 nov 2007 in comp.lang.javascript:

[please do not quote signatures on usenet. Removed]
in fact, they use word "framework".

Who are "they"?

And if so, do you mean "library"?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top