HTML Help Online

Getting Started
Editors
Design Tips
Home

HTML:

The Basics
Adding Color
Adding Images
Backgrounds
Links
Text Format
Page Format
Tables
Frames
Forms

More Than HTML:

Audio
Meta Tags
JavaScript
Cut & Paste JScripts
Style Sheets
>>IE with Style
IE Form Colors
MS Trans. Effects
Special Character Set

Help Desk:
Quick Reference

Free Stuff:

Graphic Designs
Fonts
Midis

Onmouseover/Onmouseout With Style

These onmouseover/onmouseout events will work only with Internet Explorer 4.0+ and Firefox. Netscape users will recieve a javascript error on the status bar. To prevent the error message in Netscape, you will need to add this line of code in the <body> of the document:

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.

Events:

style.color= |colorname|RGB value|
style.backgroundColor= |colorname|RGB value|
style.fontFamily= |font name|generic family|
style.fontWeight= |bold|bolder|normal|lighter|[100-900]|
style.fontVariant= |small-caps|normal|
style.fontStyle= |italic|oblique|normal|
style.fontSize= |px|em|length|percentage|

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>
<tr style="cursor:hand">
<td onmouseover="style.backgroundColor='blue', style.fontFamily='courier', style.color='white', style.fontWeight='bold'" onmouseout="style.backgroundColor='transparent', style.fontFamily='arial', style.color='black', style.fontWeight='normal'">
Cell contents.
</td>
<td onmouseover="style.backgroundColor='red', style.fontFamily='courier', style.color='yellow', style.fontWeight='bold'" onmouseout="style.backgroundColor='transparent', style.fontFamily='arial', style.color='black', style.fontWeight='normal'">
Cell contents.
</td>
</tr>
</table>

This code will produce:

Cell contents. Cell contents.

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.