HOW TO ADD HYPERLINKS TO A HYPERCOSM APPLET
This section describes how to add hyperlinks to an applet. This can be very useful since it allows you to use your model to index all sorts of auxilliary information, whether it's web pages, photographs, PDF files or any other type of file that you can view on the web. This example is only a slight modification to the previous lesson on adding mouse events, so if you have not read the previous lesson about mouse event handling, we suggest that you take a look at that so you understand this before moving on to adding hyperlinks.
In the previous lesson, we showed how an event handler can be added to handle mouse clicks and how that handler can take differnt actions depending upon what object was clicked upon. In this example, the action that we will take is to open a new window to display a picture. This could be used to organize your pictures from a vacation, for example. If you wanted to display another type of information such as a web page instead of a picture, you'd simply change the URL of the target from "name.jpg" to "name.html", substituting the name of your web pages where appropriate.
Add Javascript "include" files
The first step is to include the neccessary Javascript resource files that contain the definitions of mouse events and the methods used to handle them (in this case, just one file). You must also include the set of Javascript files mentioned previously to add markers. So see the full set of files, just click on the example image at the bottom of this page and click on the "view source" menu option in your web browser.
<script src="scripts/interface/hc_events.js"></script> |
Create a mouse event handler function
The next step is to create a function to handle mouse events. When you create this function, it should accept two parameters, an overlay and a point. The first parameter, the overlay, tells whether the mouse event has occcured on a particular overlay, for example, if you've clicked on a marker (markers are considered overlays). The second parameter, the point, contains the XYZ location of where the user has clicked in the scene.
applet.onload = function() {
// create new mouse event handler function
//
var handler = function(overlay, point) {
if (overlay) {
// an overlay has been clicked - link to a new window
//
window.open("http://www.hypercosm.com");
}
}
}
|
Assign mouse handler to mouse event "listeners"
Now that you have a function to handle mouse events, the last step is to add it to the set of "listeners" that listen for mouse events to occur. This is done using the HCEvent's "addListener" method. The first parameter to this method is the applet. The second parameter is the type of event to listen for, in most cases a "click". The last parameter is a reference to a function to call when this mouse event occurs. Whenever a mouse event occurs, this function will automatically be called.
applet.onload = function() {
// create new mouse event handler function
//
var handler = function(overlay, point) {
if (overlay) {
// an overlay has been clicked - link to a new window
//
window.open("http://www.hypercosm.com");
}
}
// add listener for mouse events
//
HCEvent.addListener(applet, "click", handler);
}
|