Over time, programmers started paying attention not only to the functionality of their app or website, but also security, manageability and a lot of other additions that are nowadays a requirement. The one who was the most widespread and improved specifically fast was User Experience.
It was given so much attention that by now there are whole concepts, programming languages, techniques and design patterns dedicated specifically to it. While UX has developed to be a whole new strategy in itself, the visual element of it is one that improves with a very fast pace. However, it’s starting point was in simple HTML, CSS and Javascript features, one of them being onmouseover. Let’s give it a more detailed look!
1. Definition and Syntax
The onmouseover event is an event that is executed whenever the mouse pointer is moved inside an HTML element or one of it’s children. That can vary from changing the appearance of the element slightly, to completely changing it. One usage could be changing pictures whenever the event is fired, or changing the size or color of the element, or whatever, really. You want something to change when you hover your cursor over it, this event makes it a reality.
It’s syntax is very simple. It is divided into an HTML part and a Javascript part. The code would go like below:
syntax.html
<element onmouseover="myCode">
All the HTML tags are supported, with the exception of <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>.
In Javascript there are two methods: the straightforward one and the one that uses addEventListener(). The code would go like this:
syntax.js
object.onmouseover=function(){
myCode
};
object.addEventListener("mouseover", myCode);
Even though these two methods do exactly the same thing, the catch is that while the first one is supported by all browsers, the one that uses addEventListener() is not in the versions earlier than IE8. Let’s put these to practical use!
2. Usage
2.1 Using Plain Javascript
First of all, since it is the simplest one (and my favorite for it), let’s see the vanilla Javascript method first. What we will do is create an <img> element with a certain size and when we apply onmouseover on it, it will be zoomed. The HTML part of our code would look like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>On Mouse Over</title>
<script src="index.js" rel="javascript"></script>
</head>
<body>
<img onmouseover="zoom(this)" onmouseout="normal(this)" border="0" src="imgs/js.png" alt="JSLogo" width="32" height="32">
</body>
</html>
As you see, we have taken the Javascript logo as our image, with a width and height of 32px. When we hover our mouse over it, the picture will double and when we go out of the HTML element it will take it’s normal size again. Below is the Javascript part of the code that allows us to do this:
index.js
function zoom(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normal(x) {
x.style.height = "32px";
x.style.width = "32px";
}
You noticed that except for the onmouseover event, we also used the onmouseout event, which is what happens when we get the mouse out of the element. These two events are almost always used together.
2.2 Using Event Listeners
In order to use this method properly, you will have to create an element and give it an id property, based on which you will create the Javascript listeners. The HTML would go like below:
listeners.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>On Mouse Over</title>
</head>
<body>
<h1 id="myelement">Element</h1>
<script src="listener.js" rel="javascript"></script>
</body>
</html>
You might notice that we have put our script in the end of the body of our document. That is done for performance reasons, even though they are practically undetectable with such small scale apps. Now is time to take a look at the Javascript part:
listener.js
document.getElementById("myelement").addEventListener("mouseover", mouseOver);
document.getElementById("myelement").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("myelement").style.color = "red";
}
function mouseOut() {
document.getElementById("myelement").style.color = "green";
}
We have used both onmouseover and onmouseout even in this method. You might notice better the effect of onmouseout here, since the element starts out being black, turns red when hovered, and after that, when the mouse is out of it, it turns green.
3. Similar events and methods
You might be wondering if there are other ways to do what we id with onmouseover. Of course there are, the most basic approach being using CSS’ element hover. The code would be very simple:
cssapproach.css
myelement {background-color:White;}
div:hover myelement {background-color:Blue;}
The are a plenty of discussions regarding the issue of which is the best method. Even though usually the answer to these kinds of dilemmas is “the one you like better!”, in this case you might want to consider that while the CSS approach is easier to read and maintain, Javascript allows far more space for maneuvering and manipulating with your code. You can delay the effect of the event, add or remove it in different points in time etc. My advice is to use the method which best applies to your app and personal preference.
Moreover there are some others of what we call MouseEvents similar to onmouseover. We already had a quick look at onmouseout. Other honorable mentions are: onmousemove and onmouseenter.
onmousemove is effective only when the point of your mouse keeps moving over the element and stops when the mouse stops moving, even though it might be over the element.
onmouseenter is effective only when you first enter the element or it’s children, and not while you stay over it.
Now you are fully able to use onmouseover in your applications. Make them great!
4. Download the source code
This was an example of Javascript Onmouseover.
