Changing Text

You can manipulate text using Style and onmouse events.

Example 1.

This is the style command line:

This is the effected line:

<p onmouseover="this.className='enlarge'" onMouseOut="this.className=''">Pass your mouse over this line of text and it will become larger.

If you are going to use more than one effect on the same page then each event must have a unique identity and the style command line placed between <style>....</style> tags.

this.className='enlarge' is the identity in the link and relates to its style command .enlarge

Note the . (Dot)

Example 2.

Style command

.caps{color: #f00000;font-weight: bold;text-transform:uppercase}

Effected line:

<p onMouseOver="this.className='caps'" onMouseOut="this.className=''">Placing your mouse over this line will cause it to be displayed in red bold capitals.

Example 3.

Style command

.italic{font-style:italic;font-weight:bold}

Effected line:

<p onMouseOver="this.className='italic'" onMouseOut="this.className='over3'">Placing your mouse over this line will transform it into bold italics.

Example 4.

<P onmouseover="this.innerHTML='told you didn\t I.'" onmouseout="this.innerHTML='Refresh the page to see again.'" style="width:420">Place your mouse over this text and it will disappear

To give you some idea how you can have multiple events on one page, below is how I have set out the style commands for the three examples on this page.

<style>
.enlarge{font-size:25px}
.caps{color: #f00000;font-weight: bold;text-transform:uppercase}
.italic{font-style:italic;font-weight:bold}
</style>