Adding SVG interactivity to artwork
You use the SVG Interactivity palette 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 palette also lets you see all the events and JavaScript files associated with the current file. To add SVG interactivity features to your artwork, select an object using a selection tool, and then add the event and corresponding JavaScript to that object in the SVG Interactivity palette. For example, you could select an object in your artwork and specify that the object will move on a Web page when a user clicks on the object in a Web browser. Object with normal appearance and with glow activated by mouse rollover
To add a JavaScript event to an object: - Select an object on the artboard, or target an item in the Layers palette. (See Changing the appearance of artwork using the Layers palette.)
- Choose Window > SVG Interactivity.
- In the SVG Interactivity palette, choose an event in the Event pop-up menu:
- onfocusin to trigger the action when the element receives focus, such as selection by the pointer.
- onfocusout to trigger the action when the element loses focus, often when another element receives focus.
- onactivate to trigger the action with a mouse click or keypress, depending upon the SVG element.
- onmousedown to trigger the action when the mouse button is pressed down over an element.
- onmouseup to trigger the action when the mouse button is released over an element.
- onclick to trigger the action when the mouse is clicked over an element.
- onmouseover to trigger the action when the pointer is moved onto an element.
- onmousemove to trigger the action while the pointer is over an element.
- onmouseout to trigger the action when the pointer is moved away from an element.
- onkeydown to trigger the action when a key is pressed down.
- onkeypress to trigger the action while a key is pressed down.
- onkeyup to trigger the action when a key is released.
- onload to trigger the action after the SVG document has been completely read and parsed. Use this event to call one-time only initialization functions.
- onerror to trigger the action when an element does not load properly or other error occurs.
- onabort to trigger the action when the page loading is stopped before the element is completely loaded.
- onunload to trigger the action when the SVG document is removed from a window or frame.
- onzoom to trigger the action when the zoom level is changed for the document.
- onresize to trigger the action when the document view is resized.
- onscroll to trigger the action when the document view is scrolled or panned.
- In the JavaScript text box, write a JavaScript command that will be triggered by the event you selected in step 3.
- Press Enter to add the entry to the event list.
To delete a JavaScript event from the SVG Interactivity palette: - In the SVG Interactivity palette, click on a JavaScript event to highlight it.
- Click the Remove Selected Entry button
, or choose Delete Event from the SVG Interactivity palette menu.
To list, add, or remove JavaScript events linked to the file: - In the SVG Interactivity palette, click the Link JavaScript Files button
, or choose JavaScript Files from the SVG Interactivity palette menu. - In the JavaScript Files dialog box, select a JavaScript entry. Click Add to browse for additional JavaScript files; click Remove to remove the selected JavaScript entry.
|