<HTML> <HEAD> <TITLE>Dynamic Styles</TITLE> <META NAME="FILENAME" CONTENT="dynamic_JS.HTM"> <STYLE> .bigChange {color:blue; font-weight:bolder; font-size:175%; letter-spacing:4px; text-transform: uppercase; background:yellow} .start {color:yellow; background:navy} A:link { color:#003399; text-decoration:none; } A:visited { color:#6699CC; text-decoration:none; } A:hover { text-decoration:underline; } </STYLE> <SCRIPT LANGUAGE=JAVASCRIPT> function highlightButton(s) { if ("INPUT"==event.srcElement.tagName) event.srcElement.className=s } </SCRIPT> </HEAD> <BODY TOPMARGIN=20 LEFTMARGIN=40 BGCOLOR="#FFFFFF" LINK="#000066" VLINK="#666666" TEXT="#000000"> <!--TOOLBAR_START--> <!--TOOLBAR_EXEMPT--> <!--TOOLBAR_END--> <H2> </H2> <P> <P> <P> <FONT SIZE=4>Move the mouse over "Make this text bigger."</FONT> <P> <FONT FACE="verdana,arial,helvetica" SIZE=2> Text can change in size and style at any time! <span onmouseover = "this.style.fontSize = 'larger'" onmouseout = "this.style.fontSize =''" style="color:red">Make this text bigger.</span> Notice how the text automatically reflows. </FONT> </P> <P> <FONT FACE="verdana,arial,helvetica" SIZE=2> And one more time but use the class attribute: <SPAN onmouseover = "this.className = 'bigChange'" onmouseout = "this.className='start'" class=start>Make this text bigger.</SPAN> This page demonstrates how the style can be changed through interactions with the user. This technique makes the Web page more lively and interactive. </FONT> <P> <P> <P> <P> </BODY> </HTML>