Hotspots, which can be placed anywhere on your web page, usually on top of the background image or on a picture or text widget, enable the user to navigate the browser to another website on the Internet, or to open a web page stored locally on the same server. In the latter case, the web file to be called can be kept in the same folder as the calling webpage, or it can be in an adjacent folder.

In webProg3, you are given the option of opening the new page in the current tab, or in a fresh tab. Although it is possible to use hotpots for opening popup windows as well, no facility for this is provided in the current version of WP3.

At runtime, hotspots are invisible, but when the user moves the mouse over them, the cursor changes into a hand with a pointing finger to indicate that they can be clicked to carry out the navigation.

This very page has several hotspots on it, on the left.

Position the hotspot and resize it so that it covers both the text and the picture.

Then double-click on the hotspot.

We begin by creating 3 widgets, a text widget in which we insert the text "Click here to visit", the second a picture of some kind, and finally an empty hotspot widget.

As you will have gathered from the picture in this example, we wish to navigate to howsoft.com, so type this into the URL box.

The default setting to open the web page in a new tab is what we want, so leave it as it is.

That's all, so click on the "OK" button to dismiss the dialogue and return to the main grid where your hotspot widget will look exactly the same as it did previously. However, the hotspot now holds the information we gave it.

We can now test the hotspot.

Click on the "Preview" button at the top of the screen.

This is what you will see when the widgets are displayed in the iframe (browser substitute).

Now, if you move the mouse over the (invisible) hotspot, the cursor will change into a hand pointer. Click down with the left mouse button.

Lo and behold, we have navigated to howsoft.com in a new browser tab.

It works!

The Hotspot Editor then presents itself.

As you can see, a URL is required for navigation, and an example is already in the typing box. Alter this, or replace it.

URL: "Uniform Resource Locator", or "web address" to you and me.

WALKTHROUGH

URLs

What you saw in the example above was the citation of an almost complete "absolute" URL (which would be "http://www.howsoft.com/index.htm" if we consider that pointing to an actual file represents the "complete" form). Roughly speaking, absolute URLs give the entire path to a web site (or folder/file within it). However, it is not always convenient to use the absolute form. Instead, it is recommended that we use "relative" paths (URLs) whenever we can, to avoid hassle when changes are made to our website in the future. In the relative kind of URL, the path is abbreviated.

I do not intend here to provide a tutorial on absolute vs relative URLs and the considerations for using one form or the other. You can find plenty of information about this subject on the Internet. Instead, I shall simply demonstrate a number of ways of filling in the hotspot's URL typing box with a definition of what each form means.

Navigate to this file within the "current" (i.e. the same) folder.

No file name is given, so look for "index.htm" or "index.html" within this folder.

No leading slash. The "help" folder is WITHIN the current folder.

Look there for the file "my_webpage.htm".

Note the leading slash. This indicates that the "help" folder is located at the root of the current website.

Look for the file "my_webpage.htm" within it.

Note the leading dots. The "help" folder is located ONE LEVEL UP from the current folder.

Look there for the file "my_webpage.htm".

That covers the most common usages I think.