Javascript: Adding OnMouseOver And OnMouseOut Using DOM
Posted by triaslama on February 2, 2008
The DOM (Document Object Model) is a standard way to access a document within a browser. The DOM could be Core DOM, HTML DOM, XML DOM. The DOM can be very handy and useful when we need to access the specific elements of the document and add some effects to them.
The two of the most useful of the DOM methods could be getElementById and getElementsByTagName. The getElementById will return an element that specified as a parameter in getElementById DOM method. The parameter that passed is a string that represents the ID of an element. The getElementsByTagName -that receive one parameter, the element name as string- will return array that represents elements in the document with the tag name specified as a parameter in getElementsByTagName method.
Here a simple example utilization of getElementById and getElementsByTagName method to add an effect -change the background color- when the mouse cursor over a <li> element and reset the background color when then mouse cursor out a <li> element:
SimpleDom.htm
<html>
<head>
<title>Test Something</title>
<script lang=”javascript” type=”text/javascript”>
window.onload = function()
{
var lis = document.getElementsByTagName(“li”);
for (var i=0;i<lis.length;i++) {
lis[i].onmouseover = function()
{
this.style.backgroundColor = “gainsboro”;
};
lis[i].onmouseout = function()
{
this.style.backgroundColor = “white”;
};
}
};
</script>
</head>
<body>
<ul>
<li>First Element</li>
<li>Second Element</li>
<li>Third Element</li>
</ul>
</body>
</html>
Let’s look at the code in more details. The body of the document consist of an unordered list (ul). The <ul> element have three list item <li> element as childs. The scenario is simple change the background color of <li> element when the mouse is moved over around them and reset the background color of <li> element when the mouse is moved out of them.
To attain this functionalities we using Javascript and DOM to access the document specified in the <body> element. The first line of our Javascript code is window.onload, this function is executed when the window object is fully loaded, in the other word the window.onload executed only when the elements inside a document has been rendered.
To handle window.onload we create an inline function that tells what must be done when the page has been loaded. In this case we will retrieve all of <li> element in a document using getElementsByTagName DOM method and save this element in a variable named lis.
var lis = document.getElementsByTagName(“li”);.
The next step iterate through all of <li> element inside lis variable:
for (var i=0;i<lis.length;i++).
But the most important part here we install two events for each of <li> element, onmouseover (happens when the mouse cursor over an <li> element) and onmouseout (happens when the mouse cursor out from an <li> element).
To handle the onmouseover event we create an inline function that changes the background color of <li> element when the mouse cursor over it.
lis[i].onmouseover = function()
{
this.style.backgroundColor = “gainsboro”;
};
To handle event when the mouse cursor out of an <li> element we create an inline function that reset the background color back to its original color.
lis[i].onmouseout = function()
{
this.style.backgroundColor = “white”;
};
The word this above refers to the <li> element that being iterated. When everything is ready and we move the cursor over an <li> element we should see that the background color of <li> that is being hovered change to gainsboro, and the background color will back to white when the mouse cursor leaves the specified <li> element.
The Javascript and DOM can have more functionalities and usages I hope this simple article will give me and all the readers a clue about the advantage of DOM.
Rhett P said
Dude, I’ve been wrestling with this exact issue all day. I copied your code and tried to make it work. I changed the color names. Nothing. Didn’t work. I cannot figure out what I am doing wrong. It all looks correct, but nothing happens.
triaslama said
Hello and thanks for your comment.
I am sorry for my delays answering your comment. Your problem maybe caused by quotation marks (“) when you copy & paste code from my blog. Try to remove quotation marks and replace it manually. I hope this help, thanks.
Anil said
Hi Triaslama, I liked your above post but I have a question. I have a DropDownListBox with 4 items in it e.g. Item1, Item2, Item3 and Item4. I want, when I hover my mouse on item1 in the dropdownlistbox I want to display Image1, if I hover my mouse on Item2 I want to diplay image2 and so on…. Can you help me in achieving this .
I tried your above logic for achieving this but I failed, could give me some idea how to achieve this.
Thanks in Advance for help.
Carlos said
You can find a solution by clicking this
cbgraph said
Thank you for onmouseout = function() {…}!