Learning Javascript #2


Interactivity with Javascript - Week 2 Example

Dr. Lent's page shows three images. When you hover over an image, its alt text will be displayed in that large box.

That large, bluish box is a div with the id of "message". Her simple function called "showProperties" changes the contents of that box by specifically picking out that box with the id of "message".

The function is triggered using the "onmouseover" event. It is done by simply doing: onmouseover = "showProperties(this)" where showProperties is the name of the function and 'this" is the argument passed in (which is the img object).

One important part to remember is that her function changes the contents of the "message" div in one direction. To reverse the changes made to the div when a user moves their mouse off the image, she use the onmouseleave event to change the text to "Hover over an image".

Hover over an image to display the alt text.
Taco Tuesday on Cinco de Mayo Funny message from tequila Soccer Ball

Interactivity with Javascript - Week 2 Homework Practice




This is my div

Javascript Next Level

All Javascript from here on down is in colinsjs.js