Files used

Right-click, save ...

• mouse_over_effects.shtml
• mouse_over_effects.svg
• mouse_over_effects.js

Technical Details

The combination of SVG, DOM (Document Object Model), ECMAScript and events enables the creation of highly interactive web-maps.

Use of Javascript in combination with SVG

Javascript can be embedded in SVG or referenced in several ways: Short javascript constructs may be written directly within the event handler attribute of an SVG element (e.g. onload="some_js_code"), more complex constructs may be written in the header of the SVG or HTML file. However, in most cases it is recommended to use an external ECMAScript (javascript) (".js") file and set a reference in the header-section of the HTML or SVG file. The following code shows how to do this in an SVG-File (the last line is relevant for referencing external .js-files).

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xml:space="preserve" width="450" height="325" viewBox="480000 0 360000 260000"
  onload="init(evt)" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">

<script xlink:href="mouse_over_effects.js" type="text/ecmascript"/>

Our small project uses 3 files: a HTML-File for the initial layout, an external javascript-file and a separate SVG-File.

Event-Handler

In order to trigger the execution of javascripts one can use event handler attributes. These event handler attributes are compatible with HTML. Following are some of the more important SVG-event-handler: (For a complete list see www.w3.org/TR/SVG11/interact.html#SVGEvents)

• onmouseover: executed when the cursor moves above an object
• onmouseout: executed when the cursor leaves an object
• onmousemove: executed when the cursor moves over an object
• onclick: executed when the user clicks on an object
• onload: triggered after a SVG-File was loaded
• onzoom: triggered after the user changes zoom-factor
• onscroll: triggered after the user scrolls within a svg-graphics
• onresize: triggered when a document-view was resized

Note that there are more events available, but some are not yet supported in every browser/plugin (e.g. mutation events)! Also some events are restricted to specific elements.

<use id="Genf" x="499500" y="181000" xlink:href="#symbolRect" 
                 onmouseover="showCity('Geneva')" onmouseout="emptyCity()" #+
                 onclick="cityClick('Birthplace of the WWW ...')" />

The above SVG-code shows how to use mouseover and click-events. The event handler (javascript-functions) are stored in an external javascript-file.

Simple Javascript-functions to change SVG-elements

In order to change SVG-elements per javascript one needs to first reference them. This is done using the DOM-tree and DOM methods like document.getElementById(). If references are used more than once, one can store them in global variables, typically initialized by an onload event.

//global variables
//global variables
var svgCityText;

function init(evt) {
	//get reference to child (content) of the city text-Element
	svgCityText = document.getElementById("varCity").firstChild;
}

The global variable svgCityText is used as a reference to the first child of the text-object that we want to change. Because the same object is used in more functions we use it in a global context. The function init() is executed after the webpage is loaded and is initializizing this reference. The text-object we want to change has the ID "varCity" and is referenced by the method .getElementById(). In order to access the text-string itself we have to use the property .firstChild.

function showCity(city) {
	//change text-Value
	svgCityText.nodeValue = city;
}

This function changes the text-value itself using the property nodeValue. This function is triggered by the mouseover event.

function emptyCity() {
	//empty text-String
	svgCityText.nodeValue = " ";
}

The function emptyCity(), triggered by the mouseout event, resets the content of the text-element, when the user leaves the SVG graphics element.

function cityClick(text) {
	//show an alert message
	alert(text);
}

The above function is triggered by a mouse-click event and sends a javascript-alert message with the message-text given by the functions parameter.