How to changing font weight when mouse cursor is moved over object?
In this example you will learn how to change the font weight using JavaScript. We use the "onmouseover" and "onmouseout" events.
When you put the cursor on the text 'onmouseover' event will fire and text will turn bold.
When you remove the cursor from the text 'onmouseout' event will fire and text will turn normal.
For Example:
<html>
<head>
<title>Changing the font weight</title>
</head>
<body bgcolor="#ffffcc">
<font color= navy >
<h2>Put the cursor on the following Paragraphs:</h2>
</font>
<b>Paragraph 1:</b>
<P ID="boldpara1" onmouseover=
"javascript:document.all.boldpara1.style.fontWeight='bold'"
onmouseout="javascript:document.all.boldpara1.style.fontWeight=
'normal'">
<font color=red>
Paragraph 1 will turn bold when the mouse cursor is placed on it.
</font>
</P>
<b>Paragraph 2:</b>
<p id="boldpara2"
onmouseover="javascript:document.all.boldpara2.style.fontWeight= 'bold'"
onmouseout="javascript:document.all.boldpara2.style.fontWeight='normal'" >
<font color=green>
Paragrapg 2 will turn bold when the mouse cursor is placed on it.
</font>
</p>
</body>
</html>
Output: Output of the above script is as follows:
Figure 1:
When you put the cursor on the paragraph, text will turn bold like as follows:
Figure 2