More Than HTML:
Onmouseover/Onmouseout With Style
The onmosueover/onmouseout event no longer is confined to <A> element. It can be used with most HTML elements including <TD>, <P>, and <UL>. You can even change the font face on the fly. Let's take a look at how it's done.
First I will demonstrate the onmouseover/onmouseout in the <A element:
<a href="http://www.anywhere.com/" onmouseover="style.backgroundColor='blue'" onmosueout="style.backgroundColor='transparent'">Anywhere</a>
Pass your mouse over the link below to view results:
Anywhere - This is a bogus link, do not click.
Notice that the text disappears. The text and the background color end up being the same in this example. This problem can easily be solved by adding another line to the code:
<a href="http://www.anywhere.com/" onmouseover="style.backgroundColor='blue',style.color='white'" onmosueout="style.backgroundColor='transparent',style.color='blue'"> Anywhere</a>
Will produce: Anywhere - This is a bogus link, do not click.
The colors can be changed to either the color name or the RGB value. You can add as many specifications as you desire, but you cannot add two of the same methods in one element.
Note: The style properties are CASE sensitive. Each property must by typed exactly as shown.
Paragraphs with Style:
Put your mouse over this paragraph and watch as the font face, font size, and font color changes. Here's how it's done:
<p onmouseover="style.fontFamily='courier', style.fontWeight='bold', style.fontSize='17px', style.color='red'" onmouseout="style.fontFamily='arial', style.fontWeight='normal', style.fontSize='12px', style.color='black'">...
You can also use the <span> element to implement style changes inside a paragraph:
Place your mouse HERE to see the changes.
Here's how it's done:
... <span onmouseover="style.fontStyle='italic', style.fontWeight='bold', style.color='purple'" onmouseout="style.fontStyle='normal', style.fontWeight='normal', style.color='black'">HERE</span>....
The span element is fairly new to HTML. It does absolutely nothing! At least, by itself it does nothing. It is used to 'hold' other attributes such as style specifications, as the examples here show.
You can also change the background color of a paragraph, list, list item, or span with the onmouseover/onmouseout event with style. Place your mouse over this paragraph; the background color should change to pink and the font should change to bold.
Did you notice that the cursor turned to a hand even though this is not a link? Here's how it is all done:
<p style="cursor:hand" onmouseover="style.backgroundColor='pink', style.fontWeight='bold', style.padding='5px'" onmouseout="style.backgroundColor='transparent', style.fontWeight='normal', style.padding='0'">....
The style="cursor:hand" will change the cursor when the mouse passes over the block element. Notice there is a new style property, style.padding=, this property acts similar to the cellpadding within a table cell. It gives a margin inside the element a width of the property value (5px in this case).
The same principle will work on one letter or one word in a paragraph by using the <span> element: Place your mouse HERE to see the example.
Tables with Style
Tables have become very versitile over the past few years. W3C discourages the use of tables for page alignment and formatting; they recommend using style sheets to carry the load of page layouts. But here is a few things you can do to spice up your tables using onmouseover/onmouseout:
<table width=400 align=center cellpadding=5 cellspacing=0 border=2>
This code will produce:
Style can be set to the <tr>, <td>, <caption>, <tbody>, <thead>, and <tbody> elements.
Now you have the knowlege to impliment style with the onmouseover/onmouseout event. Practice this on different elements to see how the effects work for you.