Show and hide elements

To show and hide the stamp backdrop, mouse on and off the stamp. To change the color of the hidden element, click on the stamp.

To create the above rollover, download the zip files or hqx files, then do the following:

  1. Name the solid red stamp element backdrop. Be sure to name the element and not the layer.
  2. Select all of the stamp elements and group them. DO NOT include the "backdrop" element in this group.
  3. Make sure the above group is selected.
  4. Using the "Windows" menu, show the SVG Interactivity Palette.
  5. Using the SVG Interactivity Palette, link in the events.js file.
    1. Click on the folder icon.
    2. Click on the "Add" button to source in a JavaScript file.
    3. In the "URL" text field, type events.js . Note: If the events.js file will not be located in the same directory as the SVG file, add the relative path of the events.js file.
    4. Click the "OK" button and then click the "Done" button.
  6. Using the SVG Interactivity Palette, add the mouse events.
    1. Select "onmouseover" from the "Event" drop-down menu.
    2. In the "JavaScript" text field, type elemShow(evt, 'backdrop') and press <Enter>.
    3. Select "onmouseout" from the "Event" drop-down menu.
    4. In the "JavaScript" text field, type elemHide(evt, 'backdrop') and press <Enter>.
    5. Select "onclick" from the "Event" drop-down menu.
    6. In the "JavaScript" text field, type elemColor(evt, 'backdrop', '#336699') and press <Enter>.
  7. Create a new layer and on that layer, draw a rectangle or path, with no stroke and no fill, around the "backdrop" element. This invisible but non-hidden boundary will ensure the viewable area of the SVG is large enough to display the hidden backdrop when it is made visible.
  8. Hide the "backdrop" element. DO NOT hide the layer.
  9. Using the default settings, export the file as SVG and name it show_hide.svg.
  10. Copy a version of Samples/SVG_Iteractivity_Palette/mouse_events/events.js into the same directory as the SVG file or to the relative location you specified earlier.
  11. Embed SVG within an HTML document by adding the following to the <BODY> of your HTML:
    <EMBED SRC="show_hide.svg" TYPE="image/svg-xml" PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/" HEIGHT="191" WIDTH="157">

    This presumes that the SVG file is in the same directory as the HTML and that the height and width correspond with those of the SVG file.