Great Use for a Spry Tooltip in Dreamweaver

13
Nov

Use a Spry Tooltip in Dreamweaver to display a larger version of an image when you “mouse over” a thumbnail.

Create two versions of an image — one a small thumbnail, and the other the full size version of an image.

Insert the thumnail image into your html page with the Insert/Image command.
Click on the thumbnail in the document window. Go to the Insert Panel/Spry Category and click on Spry Tooltip.
Scroll to the bottom of the document window and observe that a Spry Tooltip element is added displaying the content “Tooltip content goes here.” Highlight that text to replace it with the full-size image, then Insert/Image and select the image file. (Make sure the text has been deleted and that the image now appears in the yellow tip window.)
Specify the properties for the tooltip by selecting the blue handle at the top of the Spry Tooltip: sprytooltip1 in the document window.
In the Dreamweaver Property Inspector, check the Hide on mouse out checkbox, and fill in the Show delay and Hide delay text boxes with the desired rate (e.g., 100 milliseconds). You can also apply a Fade in the Effect radio buttons area.
Save the document in DW, then preview it in your browser to see the effect. Provided your browser allows scripting, you should now see the larger image when you mouse over the thumbnail.

Learn about the Spry Tooltip and other Spry User Interface Widgets in the Dreamweaver Advanced Course at Full Circle!