Banner Image Map

CREATE A JAVASCRIPT ROLLOVER WITH FIREWORKS

Quick Reference

Step 1: Obtain and install MacroMedia Fireworks.

Step 2: Create a new, original image file (this will be the default image)

  1. From the FILE menu, choose NEW.
  2. Select the dimensions of your graphic (Example: 150 pixels wide, 50 pixels high).
  3. Click OK.

Step 3: Create the original (UP) and rollover (OVER) images

  1. From the INSERT menu, choose NEW SYMBOL. Click BUTTON, then click OK.
  2. In the work area of the button area (the new active window), create or import a graphic that will serve as the "Up" image (default).
    1. Click the text tool () and click inside the work area to insert text.
    2. Choose the text color, font, and size as desired using the tools at the top of the window.
    3. Click OK when finished entering and formatting text.
    4. Click on the Pointer tool () and then click on your text box or other graphics to move them. Once selected, you can make minute changes in position using the cursor keys.
  3. Click the box to choose "Onion Skinning." (this allows you to precisely align your images)
  4. Click the OVER tab. (This image will be displayed when the mouse passes over the graphic.)
  5. Click "COPY UP GRAPHIC" to paste a copy of the "UP" state graphic you just created, and then modify it if desired.
    1. Double click a text box and choose a different text color if desired.
    2. When prompted if the colors "in other button states" should also be changed, choose NO.
  6. Skip the DOWN and OVER WHILE DOWN tabs.
  7. Click the ACTIVE AREA tab.
  8. Click the LINK WIZARD to add a URL to the button.
  9. Click the LINK tab to type a URL, or the FILE tab if you want to create a relative link to a local file.
  10. Click the close box to close the button window.

Step 4: Save your file and export the separate image files and html code

  1. From the FILE menu, choose SAVE.
  2. Save the file in png format on your hard drive.
  3. From the FILE menu, choose EXPORT.
  4. Create a new folder on your desktop or elsewhere to contain the graphics and html code file.
  5. Make sure GENERIC is selected under HTML Settings.
  6. Give your file a name and click EXPORT.

Step 5: Move the image files and copy source code into your webpage

  1. Copy all the image files you exported into the folder containing your webpage. Make sure you copy them at the same level as the page in which they will be used (don't put them in a separate images folder).
  2. Open the HTML file you created in the export process. Copy the source code as explained in the file:
    • Javascript code must be copied/pasted into the <head> section of your webpage.
    • The HTML table that inserts the images into your document should be copied/pasted in the desired location in your webpage.

That's it-- you're finished! :)

Targets/Anchors | Tables | Images | Multimedia | Javascript Rollover Images | Frames | PDFs | HyperStudio: | Guestbook | Uploading

http://www.wtvi.com/html

  Back - Forward

Home - Basic Course - Intermediate Course - Tools for the TEKS

Made on a Mac!Built by Claris HomePageCourse and Website by Wesley A. Fryer of Lubbock, Texas.
Site sponsored by WesTech Vision Inc.