The example on the introduction page changes the image of cards with clouds on the backs to one with inverted colors when your mouse is over the image. This is done with inline JavaScript using the onMouseOver and onMouseOut event attributes.
OnMouseOver, Inline script
Try it: Move your mouse pointer over the clouds and back out again.
All of the JavaScript code is in the IMG tag in the onMouseOver and onMouseOut event attributes:
The script called by onMouseOver sets the source for the image to a different file.
The script called by onMouseOut sets the source back to the original file.
Writing a one-command script inline can be useful, but it does make the element much harder to read. All of those quote marks get confusing fast!
OnClick, Script in HEAD
TryIt: Click the image to change it. Click again. The first image returns.
(There may be a delay while the second image downloads.)
The onClick event attribute for the image calls the function:
var msmouse=1;
var mousenew="microsoftmouse-rev.gif";
var mouseold="microsoftmouse.gif";
function clickMS()
{
if (msmouse===1)
{document.getElementById("MSMouse").src=mousenew;
msmouse=2;}
else
{document.getElementById("MSMouse").src=mouseold;
msmouse=1;}
}
Try It: Click the image. How many images can you get by clicking?
The onClick event attribute for the image calls a function:
The required code for changing the computer image in the SCRIPT tag in HEAD:
countclick=0;
function clickme()
{
if (countclick===0)
{document.getElementById('myimage').src="laptop.jpg";
countclick=1;}
else
if (countclick===1) {
document.getElementById('myimage').src="smartphone-tablet.jpg";
countclick=2;}
else
{document.getElementById('myimage').src="desktopcomputer.png";
countclick=0;
}
}
Nested If-Else statements can get complex quickly! This one handles just three images.
Page Source
One great way to learn about writing HTML code and JavaScript is to look at the source code for a page that has an interesting effect. Sometimes you have to download several external files to see all of the parts that are used to create the layout or formatting or action.
Try it: Right click on this page and choose View Page Source, or a similar command. It looks like a big mess!
What are some of these messy sections all about?
There are comments on the page that help explain some of these.
Can you find the following scripts? It might be easier to find the parts listed on a printed copy of the source code. It takes about 7 sheets of paper for this page.
Changes the mouse image
Changes the desktop computer image
Google Translate
Google Search
Google AdSense ads (top, left, and bottom) [unless you are using a purchased copy]
Google Analytics [The tracking data does NOT track you individually in any way. It just counts up how many visitors came to a page and from where - a link on a page, organic search results, or by typing in the address.]
Library files: I use Adobe's Dreamweaver to write HTML pages. This page includes several 'library' files for sections that are the same on all or many pages. Dreamweaver lets me edit in one place (the library's copy) and then updates every page that uses that library file. The header, footer, and ad sections are managed this way. Sweet!
AllWebMenus:
The expanding menus at the top and right of the page are controlled by scripts also. Some of the code has to be in exactly the right spot in the source code for the script to work correctly. Yes, this is another way that scripts are picky, picky, picky!
Previous
