image popup tip when mouse hover an object?

Discussion in 'Javascript' started by nickwang@gmail.com, Nov 7, 2007.

  1. Guest

    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?
    , Nov 7, 2007
    #1
    1. Advertising

  2. Evertjan. Guest

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

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


    Framework???? You mean library?

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


    Overlib

    <http://www.macridesweb.com/oltest/commandRef.html>


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Nov 7, 2007
    #2
    1. Advertising

  3. Darko Guest

    On Nov 7, 6:52 am, wrote:
    > 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.
    Darko, Nov 7, 2007
    #3
  4. Guest

    On Nov 7, 3:32 pm, Darko <> wrote:
    > On Nov 7, 6:52 am, wrote:
    >
    > > Hi, does any javascriptframeworkcan 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.


    I need to show image in the popup tips. However, mootool doesn't have
    it. Any suggestion on the solution?
    , Nov 7, 2007
    #4
  5. Guest

    On Nov 7, 3:49 am, "Evertjan." <> wrote:
    > wrote on 07 nov 2007 in comp.lang.javascript:
    >
    > > Hi, does any javascriptframeworkcan implement image popup tip when
    > > mouse hover an object?

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

    >
    > Overlib
    >
    > <http://www.macridesweb.com/oltest/commandRef.html>
    >
    > --
    > Evertjan.
    > The Netherlands.
    > (Please change the x'es to dots in my emailaddress)


    in fact, they use word "framework".
    , Nov 7, 2007
    #5
  6. Darko Guest

    On Nov 7, 11:46 pm, wrote:
    > On Nov 7, 3:32 pm, Darko <> wrote:
    >
    > > On Nov 7, 6:52 am, wrote:

    >
    > > > Hi, does any javascriptframeworkcan 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.

    >
    > 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.
    Darko, Nov 8, 2007
    #6
  7. Evertjan. Guest

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

    > On Nov 7, 3:49 am, "Evertjan." <> wrote:
    >> wrote on 07 nov 2007 in comp.lang.javascript:
    >>
    >> > Hi, does any javascriptframeworkcan implement image popup tip when
    >> > mouse hover an object?

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

    >>
    >> Overlib
    >>
    >> <http://www.macridesweb.com/oltest/commandRef.html>
    >>


    [please do not quote signatures on usenet. Removed]

    >
    > in fact, they use word "framework".
    >


    Who are "they"?

    And if so, do you mean "library"?

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Nov 8, 2007
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. msnews.microsoft.com
    Replies:
    0
    Views:
    2,306
    msnews.microsoft.com
    Jun 26, 2003
  2. =?Utf-8?B?am9qb2Jhcg==?=
    Replies:
    1
    Views:
    4,073
    wwwtar
    Oct 2, 2006
  3. Fokke Nauta

    Image in frame on mouse hover

    Fokke Nauta, Jan 26, 2006, in forum: Javascript
    Replies:
    4
    Views:
    99
    Fokke Nauta
    Jan 30, 2006
  4. David Mark
    Replies:
    16
    Views:
    893
    Scott Sauyet
    Nov 11, 2011
  5. David Mark
    Replies:
    58
    Views:
    1,388
    David Mark
    Dec 6, 2011
Loading...

Share This Page