PDA

View Full Version : Making Picture Tooltip



souravthakurta0
26 Aug 2009, 02:23 AM
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.

djlebarron
26 Aug 2009, 09:55 AM
<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;.