Parkland College > CSIT Dept > Web Technology > CSC 121 >
Calendar > Lesson 7


CSC 121 WEB SITE DESIGN
Lesson 7: Javascript Rollovers
 Instructor: Paul Young

 

 
 

Objectives

 

  

To become more comfortable in the Photoshop and Dreamweaver environment by creating rollover buttons similar to the example on this page.

 

 
 

Discussion

 

  

There are many ways to visually convey at clickable button. Creating a change in appearance when the mouse "rolls over" a clickable area is a common strategy. One way to achieve this effect is to swap one image for another using Javascript code.

 

 
 

Procedure

 

  

Overview: Create "normal" and "over" states in Photoshop. Slice and optimize in ImageReady. Add Javascript "swap image" behavior in Dreamweaver. Test, publish to server.

Prepping for the lesson

  1. duplicate "upload/lesson6" folder, rename "lesson7"
  2. open "lesson5.psd", save as "lesson7.psd" (in "prep")
  3. crop links area
  4. delete unneeded layers
  5. duplicate type layer for links, rename "normal" and "over"
  6. hide "over" layer
  7. select "normal" layer: layer > rasterize type
  8. filter > blur > motion blur
  9. jump to ImageReady

Slicing and optimizing in ImageReady

  1. slices > delete slices
  2. view > clear guides
  3. draw new horizontal guides for individual links
  4. slices > create slices from guides
  5. show optimized image (click tab)
  6. choose slice select tool: select > all slices (cmd+A)
  7. window > optimze: GIF 32 no dither
  8. file > save optimized as "links.htm" (HTML and images, all slices, location="upload/lesson7")
  9. select only "over" slices
  10. file > save optimized as "links-over.htm" (images only, select slices)
  11. examine optimized files

Adding rollovers in Dreamweaver

  1. define a new site (site > manage sites > new site): name=lesson7,
    local root folder=jsmith/csc121/upload/lesson7
  2. open "index.htm" and "links.htm"
  3. copy table from "links.htm" to "index.htm" (replace "links.gif")
  4. select first link GIF file
  5. window behaviors: add "swap image" behavior
  6. repeat
  7. save, file > preview in browser (F12)
  8. test, troubleshoot, publish (see instructions from Lesson 4)

 

 

BACK TO TOP

______________________________

Last updated: 9/1/05 • Webmaster: Paul Young

 
 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts