Operation Manual

397
USING ILLUSTRATOR
Web graphics
Last updated 11/8/2011
SVG Interactivity panel overview
You use the SVG Interactivity panel (Window > SVG Interactivity) to add interactivity to your artwork when it is
exported for viewing in a web browser. For example, by creating an event that triggers a JavaScript command, you can
quickly create movement on a web page when the user performs an action such as moving a mouse cursor over an
object. The SVG Interactivity panel also lets you see all the events and JavaScript files associated with the current file.
More Help topics
“Save in SVG format” on page 283
Delete an event from the SVG Interactivity panel
• To delete one event, select it and click the Delete button or choose Delete Event from the panel menu.
• To delete all events, choose Clear Events from the panel menu.
List, add, or remove events linked to a file
1 Click the Link JavaScript Files button .
2 In the JavaScript Files dialog box, select a JavaScript entry and do one of the following:
• Click Add to browse for additional JavaScript files.
• Click Remove to remove the selected JavaScript entry.
Add SVG interactivity to artwork
1 In the SVG Interactivity panel, select an event. (See “SVG events” on page 397.)
2 Enter the corresponding JavaScript, and press Enter.
SVG events
onfocusin Triggers the action when the element receives focus, such as selection by the pointer.
onfocusout Triggers the action when the element loses focus (often when another element receives focus).
onactivate Triggers the action with a mouse click or keypress, depending upon the SVG element.
onmousedown Triggers the action when the mouse button is pressed down over an element.
onmouseup Triggers the action when the mouse button is released over an element.
onclick Triggers the action when the mouse is clicked over an element.
onmouseover Triggers the action when the pointer is moved onto an element.
onmousemove Triggers the action while the pointer is over an element.
onmouseout Triggers the action when the pointer is moved away from an element.
onkeydown Triggers the action when a key is pressed down.
onkeypress Triggers the action while a key is pressed down.
onkeyup Triggers the action when a key is released.
onload Triggers the action after the SVG document has been completely parsed by the browser. Use this event to call
one-time-only initialization functions.
onerror Triggers the action when an element does not load properly or another error occurs.