Website Development

1
Website Development Management
MIS 3353 -- Fall 2002

• Some Image Editing Plus More JavaScript

Instructor John Seydel, Ph.D.
2
Student Objectives

• Distinguish between bitmap and vector graphics
• Compare and contrast jpg and gif image types
• Perform basic editing of bitmap images
• Create image maps
• Use JavaScript to create image rollovers
• Work with the onSubmit and onLoad event handlers
  to do form validation and control selection

3
First, Some Administrative Stuff

• Exam 1
• Grading
• Return exams
• Questions?
• Next week Exam 2
• Format
• Two parts
• In-class portion
• Lab portion
• Todays quiz a little later

4
Images and Editing

• Recall image types
• Bitmap
• JPG loads line at a time (more colors, 24 bit)
• GIF loads increasing levels of clarity
  (interlacing)
• Vector (e.g., Flash)
• Often much smaller
• Much more scalable
• However, need player
• Well work soon with Flash MX
• For now, simple editing MS Photo Editor
  (PhotoEd)

5
Some Basic Editing

• Capturing images (if given permission)
• Right-click
• Screen print
• Resizing
• Simple, but can lead to deterioration of image
  quality
• Best to use software that resamples
• Cropping
• Adding transparency
• Choose pixel color to make transparent
• Must convert file type to GIF
• Determining image properties
• For width and height attributes
• For generating image maps
• Touchup
• Includes sharpen/soften levels pixel level
  modifications
• Use sparingly
• Alternatives to PhotoEd PhotoShop PS Pro
  FrontPage

6
Image Maps

• Allow parts of images to serve as links to other
  pages
• New items
• usemap attribute within img element
• map element
• area element (contained within map element)
• Interesting example
• the-light.com/colclick.html
• Why client-side?

7
Specifying Image Maps

• Tags involved
• ltimg . . . usemapmapname /gt
• ltmap namemapnamegt . . . lt/mapgt
• ltarea shapeshape coords . . . gt
• Shapes (0,0 is image top left coordinate)
• rect specify upper left and lower right
• circle specify center and diameter
• poly specify each point (self-closing)
• Also use alt attribute for tool tip on mouseover

8
Image Design Guidelines

• Use sparingly
• Arrange to achieve balance with text and white
  space
• Keep small (page should take no more than 10
  second to load at 28kbs)
• Reduce size
• Use thumbnails
• Add warnings
• Maintain contrasts when using background images

9
Now, Another Quiz

• First
• Get out a plain sheet of paper
• Put your name at the upper right
• Put away your books and notes
• Youve been exposed to several HTML (i.e., XHTML)
  tags that represent empty elements list 3 of
  these tags
• Briefly compare and contrast three methods of
  output used with JavaScript
• Briefly compare and contrast two methods of input
  used with JavaScript
• List 3 advantages GIF files have over JPG files
• Draw the DOM

10
Here are the Answers

• Consider br, img, link, hr, input, . . .
• Output window.alert, document.write, form
• Input window.prompt, form
• GIF vs JPG interlacing, lossless, transparency
• Heres the DOM

11
Typical JavaScript Applications

• Note our focus is on functionality and web page
  usefulness, not flashiness
• Means of providing web page interactivity
• Rollovers more info on a single screen
• Images
• Menus
• Popups provide info and help without taking
  permanent screen space
• Alerts
• Prompts
• New windows
• Form handling
• Calculations
• Validation

12
Working with Image Objects

• Rollovers
• Trigger other actions
• Replace images
• Animations
• Open windows
• Navigate to other pages
• . . .
• Typically declare in document head
• Example imgButton new Image()
• Main property is src example
• imgButton.src ../pics/rbtn.gif

13
Images Array Part of the DOM

• Each image is an element within theimages
  array

14
A Look at Rollovers

• Typically done within the ltagt element
• Refer to the images array within the document
  object
• On event (usually mouseover), change source
  attribute to new file
• Example
• lta
• hrefhome.htm
• onMouseOver
• window.document.images1.srcbutton2.gif
• gt
• ltimg srcbutton1.gifgt
• lt/agt

15
More on Rollovers

• Things to note
• Each rollover affects 2 images
• Elements in images are indexed in order of
  occurrence in the XHTML
• Two events onMouseOver onMouseOut
• Images are preloaded
• Why?
• How?
• Beyond fancy buttons HRU Parade of Homes
• Rollover buttons
• Preview image displayed

16
Some Other Important Event Handlers

• Weve recently seen
• onMouseOver
• onMouseOut
• onClick
• Now onLoad and onSubmit
• Using the onLoad event handler to set focus or
  select form control
• Use either select() or focus()
• Include in ltbodygt tag
• Using the onSubmit event handler for form
  validation
• Write function in ltheadgt element
• Call function from ltformgt element

17
Summary of Objectives

• Distinguish between bitmap and vector graphics
• Compare and contrast jpg and gif image types
• Perform basic editing of bitmap images
• Create image maps
• Use JavaScript to create image rollovers
• Work with the onSubmit and onLoad event handlers
  to do form validation and control selection

18
Appendix
19
Events That Affect Objects

• Mouse actions
• Most common
• onClick
• onMouseOver
• Others (onMouseDown, onMouseUp, . . . )
• Other important events
• onLoad
• onSubmit
• This list is by no means exhaustive many other
  events exist, but these are the most typically
  encountered ones