Enhancing Drill-Down Behavior in SVG Presentations Using HTML Attributes

Additional Link Enhancements That Are Available with the SVG Graphics Devices

The SVG graphics devices provide additional functionality that you can use to enhance your drill-down links. These devices include SVG, SVGT, SVGView, and SVGZ. For information about these devices, see Using Scalable Vector Graphics. The additional functionality that the SVG graphics devices provide is based on the mouse events that are shown in Mouse Events and Available Functionality.

Mouse Events and Available Functionality

Mouse Event	Available Functionality
The mouse pointer is positioned over a linked shape.	You can add one or more of the following effects for the duration of the event: display a pop-up image in a designated area of the graph change the fill color of the linked shape change the fill opacity of the linked shape
A linked shape is clicked.	In addition to opening a drill-down link, you can add one or more of the following effects: change the fill color of the linked shape change the fill opacity of the linked shape

The ONMOUSEOVER= and ONCLICK= HTML attributes control the mouse event effects with an SVG graphics device. These attributes are added to the HTML string with other attributes, such as HREF and ALT. The ONMOUSEOVER= HTML attribute controls the effects that occur when the mouse pointer is positioned over a linked shape. The ONCLICK= HTML attribute controls the effects that occur when a linked shape is clicked.

Note: The ONMOUSEOVER= and ONCLICK= HTML attributes are supported only by the SVG graphics devices. These attributes are ignored when other graphics devices are used.

Using the ONMOUSEOVER= HTML Attribute

Use the ONMOUSEOVER= HTML attribute in your HTML= option value to display a pop–up image, change the shape fill color, and change the shape fill opacity when the mouse pointer is positioned over a linked shape. The effects that are provided for a linked shape by the ONMOUSEOVER= HTML attribute persist only as long as the mouse pointer is positioned on that shape. The syntax of the ONMOUSEOVER= HTML attribute is as follows:

ONMOUSEOVER=function(s)

To achieve the effects that you want, you can specify one or more of the functions shown in ONMOUSEOVER= HTML Attribute Functions for functions().

ONMOUSEOVER= HTML Attribute Functions

Function	Description
showImage	This function displays a pop–up image in a specified area of the graph. The pop–up image is stored in a separate file.
changeColor	This function changes the color of the linked shape to a specified color.
changeOpacity	This function changes the fill opacity of the linked shape to a specified value.

The syntax of the ShowImage function is as follows:

'showImage(“image-file”, xorigin, yorigin, image-width, image-height)'

The image-file parameter specifies the name of the file that contains the image to be displayed. The filename must be enclosed in quotes. The xorigin and yorigin parameters specify the X and Y coordinates of the origin of the image, which is the lower left corner of the image. The image can be placed anywhere in the graphics output area. However, any portion of the image that extends beyond the graphics output area is clipped. The image-height and image-width parameters specify the size of the image in pixels.

The syntax of the changeColor and changeOpacity functions are as follows:

changeColor(color)

changeOpacity(factor)

The color parameter can be a color name, such as red, green, or blue, or an RGB specification, such as #55CC22. The factor parameter can be a value between 0 and 1, which specifies the desired degree of opacity. A value of 0 makes the shape 100% opaque.

When you specify more than one function in your ONMOUSEOVER= HTML attribute, you must separate each function with a semicolon. Here is an example of an ONMOUSEOVER= HTML attribute that displays image myimage.gif and changes the color of the linked shape to blue when the mouse pointer is positioned over the shape.

'ONMOUSEOVER=ShowImage("./myimage.gif",300,550,200,250); changeColor(blue)'

In this example, the showImage function displays image myimage.gif at coordinates (300, 550), and scales the image to 200 pixels wide by 250 pixels high. The changeColor function changes the color of the linked shape to blue. When the mouse pointer is moved off of the linked shape, the image disappears, and the shape fill color reverts to its original color.

For an additional example, see Enhancing an SVG Drill-Down Presentation Using HTML Attributes.

Using the ONCLICK= HTML Attribute

Use the ONCLICK= HTML attribute in your HTML= option value to change the shape fill color and the shape fill opacity when a linked shape is clicked. The syntax of the ONCLICK= HTML attribute is as follows:

'ONCLICK=function(s)'

To achieve the effects that you want, you can specify one or both of the changeColor and changeOpacity functions that are used with the ONMOUSEOVER= HTML attribute. (See ONMOUSEOVER= HTML Attribute Functions.) When you specify more than one function, separate each function with a semicolon. Here is an example of an ONCLICK= HTML attribute that changes the fill opacity of a linked shape to 50% when it is clicked.

'ONCLICK=changeOpacity(.5)'