Creating Tooltips This is a Tooltip. Scripts and code used here were obtained from Walter Zorn's Website. on Image Maps in NOF 10
Description:
An image map is a picture with more than one hyperlink or hotspot on it. Using Tooltips, we can bring more information to a static image without taking site visitors away from the page.
Example:
Mouse over the fireworks image below. NOTE: If JavaScripts are disabled in browser, content will appear on the page, so this method is good for search engine optimization.
.
 |
Method:
Download the wz_Tooltip JavaScript library from Walter Zorn's website. Before you start this tutorial, read the tutorials on his site to familiarize yourself with the various tooltip styles and variables. Unzip the tooltip javascript library folder and upload the wz_tooltip.js file to a folder on your server. For this I recommend using a 3rd party FTP program or even IE.
Links to some FTP programs:
Tutorial:
PART I - LINKING TO THE EXTERNAL JAVASCRIPT FILE
1. Click in your Page Layout Area or MasterBorder and hit the HTML button on the Properties Box to invoke a code insertion window.
2. Select the Beginning of Body Tag tab. Paste the following code into the window. In this example, Scripts would be a folder in your server's root directory (where your index page is). And wz_tooltip.js is the javascript file needed for this project.
<script type="text/javascript" src="../Scripts/wz_tooltip.js"></script>
PART II - MAKING AN IMAGE MAP
1. Place an image on your page.
2. Use the Hotspot Tool to draw some regions on the image. Here we used the Circle and Polygon tools.
PART III - ADDING CODE TO HOTSPOTS
1. Click on one of the hotspots and hit the HTML button on the Hotspot Properties Box. This will invoike a new HTML insertion window.
Paste this code in the INSIDE Tag tab. Hit OK.
onMouseOver="TagToTip('Span1', WIDTH, '-400', BGCOLOR, '#CDEAFC', SHADOW, true, SHADOWCOLOR, '#333333', FOLLOWMOUSE, true)" onMouseOut="UnTip()"
2. Paste this code in the AFTER Tag tab and hit OK.
<span id="Span1"><img src="Assets/Images/optional-picture.gif" style="padding:10px" align="left"><strong>Your bold text goes here</strong>The rest of your tooltip content goes here.</span><!--end tooltip content -->
3. Repeat Steps 1-2 above for each Hotspot Region on your Image Map. NOTE: Each Tooltip needs a unique Span ID number. Hotspot #1 would be tooltip Span1, Hotspot #2 would use Span2 and so on.
4. Save your work and publish page to server.
That's all there is to it. We hope you enjoyed this tutorial.
|
