Jan's Web Scripting Demo
DOM sets up a way for you to name any object or property on your web page and grab it to make changes.
CSS allows you to set the properties of every part of the page. This is not limited to things like font and color, but also include source, position, and whether the object is visible or hidden, displayed or not.
If you are not familiar with style sheets, you should first view my examples of Cascading Stylesheets (CSS) in another section of this site, Jan's Cascading Style Sheets Demo.
What reactions might you create? Replace an image with a different image. Check form entries for completeness and reasonableness. Calculate a total price. Change the font size for the whole page. Pop up a message window. Or many, many, many other changes.
The original version of this demo was written for Internet Explorer 4 and Netscape, which each used different methods and could not render effects created with the other's methods. Things have changed! The current major browsers (Internet Explorer, Chrome, and Firefox) support most of the standards in HTML5 and CSS3. So we can now create a responsive web page with a lot more assurance that viewers will see what they are supposed to see. There are still features that are not equally supported by the major browsers. Perhaps someday!
Change Image: Move your mouse over the image to replace it. Move the mouse off the image to return to the original image.
Change Style: Move your mouse over the colored 'Mouse Over Me' rectangle below to show alternate formatting. Move the mouse off the box to return to the original formatting.
Mouse Over Me
Click 'Show less' to hide the new text and show the original again.
Message Box: Move the mouse over the smiley face to show a popup message box.
Move Image and
The rising moon is an animated GIF file.
I did not write the script that controls the dragging. I did write the script that change the image based on mouse clicks.
[This example is also used in my Working with Windows lessons on the page Using a Mouse.]