Javascript Image Tooltip
Do you have a thumbnail? Want to display the full image in a hovering tooltip? - by Boyer
posted 4 May, 2010 @ 15:45:43
last modified: 6 May, 2010 @ 14:25:22
posted 4 May, 2010 @ 15:45:43
last modified: 6 May, 2010 @ 14:25:22
Of course you do! That's why you use the iWebs right?
For something we did at work the other day, I needed to create a javascript lib that would let me hover my mouse over a thumbnail, and float the full sized image above the thumbnail, and track the cursor.
Here's the guts of it:
Here's the accompanying CSS for the tooltip:
Here's an HTML Example:
So we have our thumbnail image, picture_icon.png. We have a span element with a unique ID, and it uses the CSS class toolTipBox. The span is hidden by default, and is only shown when we mouseover our thumbnail. As you can see, the onmouseover event for the thumbnail calls our toolTip method, passes in the image we want to display in the tooltip, the span we want to show it in, and this so we know what the calling element is in order to capture the mouse position on it.
So there you have it. Want to see an example? Hover over any of the Recent or Archive blog post listings on the left. See?
You could include text with the image, or not use an image at all! You could put text in there, or an iframe and call in a website... The world is your oyster. The hard part is the c=attribute]updatePos()[/c] method. You'll notice that diffX = -320, and diffY = -100. That should position the tooltip directly above the cursor, and about 20px above. Why those values? I have no idea.... That's what worked for me. Obviously, you can tweek those values to position your tooltip wherever you like. It's your life!
For something we did at work the other day, I needed to create a javascript lib that would let me hover my mouse over a thumbnail, and float the full sized image above the thumbnail, and track the cursor.
Here's the guts of it:
Javascript
- var tip;
- var tipBoxName;
- /**
- * The guts of the tooltip
- * @param img The Image URL to show
- * @param tipBox The name of the <span> element to use (for multiple tooltips)
- * @param that That is "this" passed from the calling icon
- */
- function toolTip(img,tipBox,that)
- {
- tipBoxName = tipBox;
- tip = that;
- tip.onmousemove=updatePos;
- document.getElementById(tipBoxName).innerHTML='<img src="' + img + '" alt=""/>';
- document.getElementById(tipBoxName).style.display="block";
- window.onscroll=updatePos;
- }
- /**
- * Track the movements of the cursor
- */
- function updatePos()
- {
- var ev = arguments[0] ? arguments[0] : event;
- var x = ev.clientX;
- var y = ev.clientY;
- diffX=-320;
- diffY=-100;
- document.getElementById(tipBoxName).style.top = y-2+diffY+document.body.scrollTop + "px";
- document.getElementById(tipBoxName).style.left = x-2+diffX+document.body.scrollLeft + "px";
- tip.onmouseout=hideToolTip;
- }
- /**
- * This method brushes you teeth for you...
- * Actally, it just hides the tooltip when you
- * fall off the icon you're hovering over
- */
- function hideToolTip()
- {
- document.getElementById(tipBoxName).style.display="none";
- }
Here's the accompanying CSS for the tooltip:
CSS
- .toolTipBox
- {
- display: none;
- padding: 5;
- border: black solid 1px;
- position: absolute;
- background-color: #FFFFFF;
- }
Here's an HTML Example:
What's Going On?
So we have our thumbnail image, picture_icon.png. We have a span element with a unique ID, and it uses the CSS class toolTipBox. The span is hidden by default, and is only shown when we mouseover our thumbnail. As you can see, the onmouseover event for the thumbnail calls our toolTip method, passes in the image we want to display in the tooltip, the span we want to show it in, and this so we know what the calling element is in order to capture the mouse position on it.
So there you have it. Want to see an example? Hover over any of the Recent or Archive blog post listings on the left. See?
You could include text with the image, or not use an image at all! You could put text in there, or an iframe and call in a website... The world is your oyster. The hard part is the c=attribute]updatePos()[/c] method. You'll notice that diffX = -320, and diffY = -100. That should position the tooltip directly above the cursor, and about 20px above. Why those values? I have no idea.... That's what worked for me. Obviously, you can tweek those values to position your tooltip wherever you like. It's your life!
