To Notes

IT 130 -- 3/8/10

Midterm Exam

• Go over the midterm exam.

Horizontal Navigation

• Modify Example 77 (greece-page.htm) so that the navigation links are horizontal instead of vertical.

Times in Different Time Zones

• Look at Example 79 (time-zones.htm).

More Examples with Buttons and Images

1. Use a button to manually advance a slide show:
    
   
   Button Slide Show 1 Example
   
   
2. Use the mousedown and mouseup events and two images to simulate pressing and releasing a button. Also incorporate the mouseover and mouseout events to change an image.
    
   
   Button Slide Show 2 Example
   
   
3. Use a link instead of a button to advance the slideshow.
    
   
   Link Slide Show Example
   
   
4. Use a button instead of a link to change pages.
    
   
   Button Instead of Hyperlink Example
   
   To change the page with JavaScript, change the document.URL property.

Disappearing Acts and Other Magic Tricks

• Look at the Disappear Example.
   
• To alter values of the CSS style of a tag, spell the property name with camel casing, instead of using dashes between words.
   
• Example: Suppose that the tag is
   
  

  <p id=a style=background-color:pink;>
  

  Use this JavaScript statement to change the background color of the document:

  document.getElementById(a).style.backgroundColor = beige;
  

  or

  document.getElementById(a).style.backgroundColor = rgb(255,255,230);
  

  or

  document.getElementById(a).style.backgroundColor = #FFE0FF;
  

• Use the innerHTML property of a tag to change the actual text of the tag.

Changing Background Color Dynamically

• Change the background color by using the getElementById function to get the body and then changing the backgroundColor property of the body style. Use a user defined rgb function to get the hex color code corresponding to r, g and b values.
   
  
  Background Color Change Example

A Menu with Hidden Submenus

• Hide Submenus Example, Example 78 on Examples Page.

Final Website Project

• Work on the Final Website Project.