Example of Dynamically changing Text style

The example, which is laid out, improves the usability of the Web page by dynamically presenting the story headlines one at a time. If a reader is interested in only one town's news, he or she will be able to move his or her mouse cursor to that town's identifier and read just the story in which he or she is interested. If only one story is presented at a time, you can add more information to the Web page without it appearing cluttered. As a representation of additional information, the day's projected high temperature has been added to the page.

The news stories are loaded initially with a font size of 2 points. At 2 points, the stories are not readable, so the emphasis is on the information to the left, A reader can see the high temperatures for each town in the valley and, if he or she is interested in the top news story for a certain town, can move the mouse over that town's name and the news story headline will appear large to the right. This example focuses on the onmouseover event as the initiating event for changing text. Example of dynamic text styles <HTML>

<TITLE> Today's High Temperatures </TITLE>
</HEAD>

<BODY>

<H3> The India News </H3>
<HR>

<P ID = T1 CLASS ="redPlain" onmouseover ="redP ();"> Chennai 71

T2CLASS="redPlain" onmouseover ="redP ()';"Banngalore63

<P 10 = T3 CLASS ="redPlain" onmouseover ="redP (),">Delhi 69
</TD>
<TD>
<P ID = PG1 CLASS = "redsmall>
As usual it is hot
<P ID = PG2 CLASS = "redSmall">
The climate is going from bad to worse
<P ID = PG3 CLASS =red$ Mafl">
The forecast is heavy showers
</TD>
</TR>
</TABLE>
<SCRIPT LANGUAGE =JavaScript>
var source;
function redP(){

source = window.event.srcElement; T1 . className="redPlain"; T2.className="redPlain"; T3. className="redPlain";

PGI. className="redSmall";
PG2. className='"redSmall"
PG3. className="redSmall"
source.className='blackPlain"

if (TI. className=='blackplain")
PG1.cIassName=" blackPlain";
if (T2.className=="blackPlain" PG2.className="blackPIain";
if (T3. className=="blackPlain") PG3.className="blackPlain";

}
</SCRIPT>
</FONT>
</BODY>
</HTML>

The first step, defines the styles you will use within the page. The redPlain style has been applied to all text blocks that have a CLASS=redPlain attribute in their opening tag. The redSmall style is red with a 2-point font and no styling. The blackPlain style is black with a 16-point font and no styling.

The second step, apply the appropriate attributes to the opening tags for each text block that contains the changing style feature. Each <P> tag for the town and temperature text looks like the first one:

It contains an ID attribute to name the paragraph, a CLASS attribute to set a style for initial loading, and an EVENT attribute to initiate an action and associate the appropriate script function to that action.

The third step is to write the script functions that handle the events we added in the text block tags. Each town header calls only one script when the mouse passes over. The script is placed within the <SCRIPT> </SCRIPT> tag pair. The redP( ) function resets each town header and news story back to their initial styles and then enlarges the appropriate items based on the mouse cursor position on the page. The script is simplified by the line.

sourse = window.event.srcElement

Dynamic HTML includes the capability to read the object that initialized an event through the window.event.srcElement method. Be sure to declare the variable where you want to store the event earlier in the function. Through the source variable, the appropriate town header changes to the blackPlain style. After it is changed, to town headers are interrogated to find the black one. Then, the respective news story headline's is enlarged as well.

Domain Name Search

Example of Dynamically changing Text style

Domain Names

DHTML

Web Design

Web Hosting

E Commerce

Email