REFERRING TO HTML OBJECTS IN CODE

• Can modify elements style properties and attributes with code
• Elements need id's
  • id's should be unique
  • id's should start with a letter
• Use ID attribute of tags. Example for a div with an id = myDiv:

  • myDiv.innerText = "hi" //Referring to element by ID only works in IE.
  • alert(myDiv.innerHTML)
  • myDiv.style.color = "red"
  • myDiv.style.backgroundColor = "blue"
  • document.getElementById("mydiv").innerHTML = "hi"//Should work in all browsers
• Other ways to refer to an element:
  • document.all.ID (Internet Explorer)
  • document.layers (Netscape)
  • window.document.all[index]
• Use name or ID attribute of form elements. 
  • If the element is in a form then you must preface the name/id with the form name.
• When coding an event for an object, the keyword "this" can be used instead of the id.

EXAMPLE

PRACTICE

1. Add a textbox (<input type = text>) a button and a div. When the user clicks on the button, the contents of the textbox should be displayed in the div, and the color of the div should be set to yellow.
2. Add two divs. When the page loads, a prompt should appear asking the user for HTML code. After the user clicks OK, the innerHTML of div1 should be set to the text entered in the prompt.
3. Modify #2 so that the innerText is set to the text in the prompt. Test the code. Notice the difference between innerText and innerHTML. (FYI - innerText is not supported by Mozilla).
4. Add a button. Set its position using style (style="position:absolute; left:20; top:100"). When the user clicks the button, move it to left = 40, top = 200.
5. Add a div. When the user moves the mouse over the div, change its color to "blue". When the user moves the mouse off of the div, change its color to black.
6. Add an image. When the user moves the mouse over the image, change its "src" property to another image. When the user moves the mouse off of the image, change the src to its original file.
7. Create a rollover using Dreamweaver. Check Insert...Image Objects... Rollover Image in the menu. Compare the code to your code from #6.

Example Solution

Caching Images

SELF-QUIZ