In this tutorial we will learn how to change text color when user puts the mouse on it .This is very useful when you have a very long text divided into paragraphs . So, if the color of the paragraph changes when user takes the mouse on it , then it will be helpful for the user to concentrate on that paragraph only.
You can check the example belowl.
Paragraph 1 : Color of this text will change
when you move the mouse over the text
Paragraph 2 :Color of this text will change
when you move the mouse over the text
Paragraph 3 :Color of this text will change
when you move the mouse over the text
Now let us examine the code behind this
The basic javascript code that is written behind each paragraph is
<span id="myDiv1"
onMouseOver="var div1 = document.getElementById('myDiv1'); div1.style.color='red';"
onMouseOut="var div1 = document.getElementById('myDiv1'); iv1.style.color='black';">
Paragraph 1 : Color of this text will change <br> when you move the mouse over the text</span><br>
Here each of the paragraphs are written in separate "<span>" tags and each "<span>" tags are given separate ID's. Then the ID of the current span , on which user takes the mouse is passed to the function using the Id. Inside the function we are catching the <span> element using the javascript function
document.getelEmentById(cId)
Now when the user moves the mouse over the span , the onMouseOver event of the span is fired.Now , in this eavent we are catching the span element using var div1 = document.getElementById('myDiv1');
and assign it to variable div1. Now, div1 represents the span element and we can chage different attributes of the span by the help of div1. Here , we have changed the color attribute,
div1.style.color='red';
So, the text color becomes 'red' .
In the similer manner, when the user moves out the mouse from the text , the onMouseOut
event fires. So in this event we have to write the code so that the text color goes back to black
onMouseOut="var div1 = document.getElementById('myDiv1');
Here is the full code:
<span id="myDiv1"
onMouseOver="var div1 = document.getElementById('myDiv1'); div1.style.color='red';"
onMouseOut="var div1 = document.getElementById('myDiv1'); div1.style.color='black';">
Paragraph 1 : Color of this text will change <br> when you move the mouse over the text</span>
<span id="myDiv2"
onMouseOver="var div2 = document.getElementById('myDiv2'); div2.style.color='red';"
onMouseOut="var div2 = document.getElementById('myDiv2'); div2.style.color='black';">
Paragraph 2 :Color of this text will change <br> when you move the mouse over the text</span>
<span id="myDiv3" onMouseOver="var div3 = document.getElementById('myDiv3'); div3.style.color='red';"
onMouseOut="var div3 = document.getElementById('myDiv3'); div3.style.color='black';">
Paragraph 3 :Color of this text will change <br> when you move the mouse over the text</span>
So , you see it is very simple . Hope you have enjoyed the tutorial. Thank You.
Back to Tutorial Index page
Your comments are most welcome admin@koderguru.com
|
