Results 1 to 2 of 2

Thread: Making Picture Tooltip

  1. #1
    Join Date
    Aug 2009
    Posts
    2

    Thumbs down Making Picture Tooltip

    I want to make picture tooltip with 300 x 400 resolution....when mouseover on a picture of the page...how do i do it with javascript.and another picture tooltip with close button(sticky tooltip)...Please help me.

  2. #2
    Join Date
    Sep 2008
    Posts
    899
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function mouseOver(){t=setTimeout("document.b2.src='desc3.gif'",500);}
    function mouseOut(){clearTimeout(t);var u=setTimeout("document.b2.src='transparent.gif'",500);}</script>
    </head>
    <body>
    <img border="0" src="transparent.gif" name="b2" style="z-index: 2; position: absolute; top: 400px; left: 231px;"></style>
    <img src="arrow.gif" onmouseover="mouseOver()" onmouseout="mouseOut()" />
    </body>
    </html>
    I haven't done it, but I would imagine to make the TT sticky, you'd just eliminate the onmouseout in the "arrow.gif" tag. You'll have to include a onClick function on the sticky TT image to make the entire image a close button, although you can create your image with a "close button" layered down as part of the image. I'm not sure if putting a anchor and an onClick function on the "transparent.gif" will carry that function over to the new image or not. The "transparent.gif" should be a 1px by 1px transparent image, so it doesn't interfere with the page. You can also include a fade in the mouseOver and mouseOut functions, but I've never done it, and I'd have to look it up. Can someone respond and throw that in?

    Also, I made this by modifying an "image-switch" code and I put the tooltip in an absolute position which doesn't work well with different resolutions if you've got a fluid page. You'd have to work with offsets if you have a fluid format. I believe that you can also do the whole thing by eliminating any "transparent.gif" and changing the display: or visibility: style via onmouseover and onmouseout. That way you could easily put your onClick "close" function on the "desc3.gif" image and thereby close the TT by changing the style back to display: none; or visibility: hidden;.
    Last edited by djlebarron; 26 Aug 2009 at 10:41 AM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •