| JAVAScript
1. Basic JAVAscript
JavaScript is a platform-independent, event-driven, interpreted programming
language developed by Netscape Communications Corp. and Sun Microsystems.
JavaScript is useful for adding interactivity to the World Wide Web because
scripts can be embedded in HTML files (i.e., web pages) simply by enclosing
code in a <SCRIPT> </SCRIPT> tag pair. All modern browsers
can interpret JavaScript .
In practice, JavaScript is a fairly universal extension to HTML that
can enhance the user experience through event handling and client-side
execution, while extending a web developer’s control over the client’s
browser. Below is a list of common JAVAScript uses.
- image swapping
/ mouseovers
- forms
- show/hide layers
- dropdown menus
- check boxes
- drop down boxes
- text fields
- specific size pop-up
windows
2. Creating image swaps on mouseovers Back
to top
You
can use either Dreamweaver or Fireworks
to create an image swap or mouseover
effect for your images or graphics.
Here are the steps for Fireworks: |
| |
Step
1
Creating the Object to Use as an Image Swap |
Open
a new window 400px X 200px.
We'll use a button as an example for our image swap. Create a rectangle
to use as our button example. |
 |
Step
2
Selecting
the Frames Tab |
Select the FRAMES tab on
the on screen dialog box. Back
to top
|
 |
Step
3
How to Add
a New Frame |
Select
the black arrow pointing to the right
at the top of the dialog box (the red
circle below). Select ADD FRAMES. Back
to top
|
 |
Step
4
Adding a New Frame |
Accept
the defaults in the dialog box that
appears. Notice that in the FRAMES
toolbox that frame 2 has been added. Back
to top
|
 |
 |
Step
5
Duplicating the Image on Frame2 |
- Select Frame
1 in the toolbox.
- Select the rectangle
image on the stage and copy it.
- Then select
Frame 2 in the toolbox and paste
the rectangle image on the stage.
Back
to top
|
 |
Step
6
Create the Rollover Frame Image Change |
Stay in frame 2 and make
changes to the image. For our example
we'll change the color.
Back
to top
|
 |
Step
7
Slicing the Image for Export |
- Select
frame 1.
- Select
the layers tab.
- Select
the "web layer".
- Use the
slicing tool to slice the object
as shown below.
Back
to top
|
Slicing
tool |
|
 |
Step
8
Creating the JAVAScript Rollover Effect |
- Select the slice
over the image to make it active.
- Select the options
menu in the white circle in the center
of the object slice.
- Select the first
option "Add Simple Rollover
Behavior".
Back
to top
|
 |
Step
9
Exporting the HTML file and Rollover |
Choose
FILE/EXPORT from the toolbar. Back
to top
|
 |
Step
10
The Export Menu |
- Select the file
name and location to save your files.
- Select HTML
and Images in the "SAVE AS TYPE:" dropdown
menu.
- Select "EXPORT
HTML FILE" in the HTML dropdown
menu.
- Sect"EXPORT
SLICES" in the SLICES: dropdown
menu.
- Check the box "Include
Areas Without Slices".
- Check the box "Put
Images in Subfolder".
- Finally click
the "OPTIONS" button.
Back
to top
|
 |
Step
11
The Options Button in the Export Menu |
Make
sure "NESTED TABLES - NO SPACERS" is
selected from the CONTENTS: dropdown
menu. Back
to top
|
 |
Step
12
Closing the Dialog Boxes |
- Click OK in
the OPTIONS MENU.
- Click OK in
the EXPORT dialog box.
- The process
is now complete.
Back
to top
Click
here for some of the most popular scripts. |
