Creating Websites home
Introduction to the Web
Marking up text
FTP and FileZilla
Links and anchors
Getting some style
Testing and debugging
Images and maps
Audio and video
The DOM and scripting
Logic and Arrays
Functions and document.write
Forms and INPUT
Scripting w/ tables
Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.
A cumulative summary of the contents of the course so far: Click here
Hands on exercise
First, create a new page, scripts1.html. (Remember, 'html_skel'
Add a paragraph with two event handlers:
onclick - turn the text blue
ondblclick - turn the text red
The text of the paragraph should be: Click is blue, dblclick is red.
After you get that working, add an image element with two event handlers:
the 'src' for the image should be daffy-teria.jpg, the event handlers:
onmouseover - set document.images.src='conf_b.jpg';
onmouseout - set document.images.src='daffy-teria.jpg';
After you have both sets of event handlers working, add a link to scripts1.html from your index.html page.
Regarding the "document.images.src" notation: "document" is a reserved word representing the whole page; "images" is an array of all the images in the document (all the 'img' elements) and "images" references the first img element in the page; then adding ".src" specifies the "src" attribute of the chosen <img> element. This is explained further in the next lesson.
back list forward