bbb Home
Manipulating HTML Objects Contents        

REFERRING TO HTML OBJECTS IN CODE



EXAMPLE

Font: 8pt   12pt   20pt   24pt   Width: Min. 50%   75%   100%   

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