Change stroke width and color

To change the stroke width of the stamp outline and the atom, move the mouse on and off the stamp. To change the stroke color of the atom, depress the mouse button while mousing over the stamp.

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

  1. Name the styled ellipse(s) element atom.
  2. Select all of the stamp elements and group them.
  3. Name this group whole stamp.
  4. Make sure the "whole stamp" group is selected.
  5. Using the "Windows" menu, show the SVG Interactivity Palette.
  6. 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.
  7. 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 elemStrokeWidth(evt, 'whole stamp', '2.5') and press <Enter>.
    3. Select "onmouseout" from the "Event" drop-down menu.
    4. In the "JavaScript" text field, type elemStrokeWidth(evt, 'whole stamp', '1') and press <Enter>.
    5. Select "onmousedown" from the "Event" drop-down menu.
    6. In the "JavaScript" text field, type elemStrokeColor(evt, 'atom', '#003399') and press <Enter>.
    7. Select "onmouseup" from the "Event" drop-down menu.
    8. In the "JavaScript" text field, type elemStrokeColor(evt, 'atom', '#000000') and press <Enter>.
  8. Using the default settings, export the file as SVG and name it change_stroke.svg.
  9. Copy a version of Samples/SVG_Interactivity_Palette/mouse_events/events.js into the same directory as the SVG file or to the relative location you specified earlier.
  10. Embed SVG within an HTML document by adding the following to the <BODY> of your HTML:
    <EMBED SRC="change_stroke.svg" TYPE="image/svg-xml" PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/" HEIGHT="165" WIDTH="130">

    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.