To Notes

IT 130 -- 3/10/10

Review Questions

1. How do you change a CSS property using JavaScript?
    
   Ans: Take the property, say text-indent, remove the hyphen(s), and convert the capitalization to camel casing: textIndent. Then change it in JavaScript like this:
   document.getElementById(idnum).style.textIndent = 1cm;
    
2. Which CSS property can make an element invisible?
   Ans: visibility.
    
3. Guess how to change the page title dynamically.
   Ans: document.title = New Title;
    
4. How do you change the text in an HTML element?
   Ans: document.getElementById(idnum).innerHTML = New text;

Final Website Project

• Review the requirements of the Final Website Project.
   
• Recall that your final website should have at least two JavaScript items, including an order form or an entry form.

Horizontal Navigation

• Here is the modified Greece Page example with horizontal navigation.
   
• Here is the new CSS style page.

A Centered Div Area

• To center a div area, set margin property to auto. See the Side Margins Example

Image Rollovers

• Move the mouse over the image you wish to enlarge in puppies.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.

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

Hex Color Codes

• Professional web designers do not use rgb color codes, they use hex color codes.
   
• In fact, rgb color codes are not officially XHTML complient, although they are recognized by all major browsers.
   
  
• In additional to hex color codes, these HTML colors are XHTML complient:
   
  
  Red   Lime   Blue   Yellow   Fuchsia   Aqua   Black   White   Maroon   Green   Navy   Olive   Purple   Teal   Gray   Silver
  
  
• Hex color codes start with # and use base-16 numbers to represent the red, green, and blue color components of a color.
   
• Here is a Hex-to-decimal conversion table.
   
• Base-16 numbers are represented by these 16 digits:
  

  0  1  2  3  4  5  6  7  8  9  a  b  c  d  e  f
  

  where a==10, b==11, c==12, d==13, e==14, f==15.
   
• Here are some important numbers:
   
  
  255 → ff   128 → 80   0 → 00   196 → C0
   
• Practice Exercise:   Convert the HTML colors above to hex color codes.

Final Website Project

• Work on the Final Website Project.