Jan's Web Scripting Demo

Web pages that react to your mouse movements or clicks require combining your knowledge of Cascading Style Sheets (CSS) and an understanding of the Document Object Model (DOM) for a web page with some JavaScript.

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.

JavaScript lets you change those properties in response to something that the user does, like clicking on a button, dragging an image, or hovering over something with the mouse.

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!

Simple Examples:

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.

JavaScript is used to change styles for background color, color, font, font size, and width of the DIV. The larger font size makes the rectangle taller. The browser moves the rest of the page down to make room.

Reveal/Hide:
Click the link 'Show more' to reveal new text and hide the original text. The browser would move the page contents down if necessary.

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.

Change Mouse Pointer: Move your mouse pointer over the text below to see some of the shapes that are available. In this example the mouse pointer shape is set with an inline style but the shape can also be changed with JavaScript.

Default    Help   Cross-hair   Move   Not-allowed   Pointer   Text   Wait

Complex Example:

Move Image and
Replace Image:
The cards at the right can be moved by dragging. Some card images change if you click or double click. One card does one thing when clicked and another when double-clicked.

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.]