Light JavaScript Rollover

June 13, 2008

Light JavaScript Rollover

By combining both JavaScript and CSS, you can create a very nice roller over effect. This is similar to the CSS rollover effect in previous tutorials, but with this effect, we can even use an image to create a rollover effect.

Before we get into the effect, let’s go over some of the JavaScript that we will be using to create the effect. If you have ever used JavaScript you more then likely know about JavaScript events. If you haven’t used JavaScript, the events will allow elements to be interactive. The JavaScript event that we will be using is onmouseover, and onmouseout. These events allow the element to interact with the mouse. If the mouse touches the element, then the event onmouseover is activated. When the mouse leaves the element then onmouseout is activated. These events will allow us to control what part of the CSS changes when the mouse interacts with the element. We can use the onmouseout event to reset the element back to its original state. If I have lost you, let me give an example of what I mean.

When the mouse touched this element the background will turn blue. When the mouse no longer touches the element the background will be white.

If you were to copy the code above and place it in a HTML document, when a visitor touched the span element with their mouse the background will turn blue. When the mouse is no longer touching the span tag, the background will return to white.

What you may have noticed in the example is the this.style.background part of the code. You may also be asking what does this mean. JavaScript is what is called an object oriented language, this means that we can tell JavaScript to change elements based on the element’s name. The “this” part of the code, is a short way of saying this element. So, “this.style” is telling JavaScript to change the style of this element. Since we are wanting to change the background, we just add “.background” to “this.style” to change the background. Now that we know how to change the style of an element based on a JavaScript event, we have created a rollover. The rollover in the example above can be done with the :hover attribute in CSS.

To create the rollover effect with an image we need to use the CSS opacity attribute. This attribute allows us to change the opacity of the image without editing the image itself with a image editor. The value for opacity has to be between 0.0 and 1.0. The lower the number, the more transparent the image is.

The only issue with using the opacity filter is that Internet Explorer does not support it. To get around this issue, we will have to use IE’s filter attribute. The first thing we need to do is create a class with the opacity set for the “off” status of the element. Here is the code that will do that. IE’s filter attribute accepts values between 0 and 100. The format for this attribute is filter: alpha(opacity=XX) where XX is the value of the opacity.

The first thing we need to do is choose what opacity the image will have in the “off” status. For this example we will use an opacity of 0.4, or 40 for the IE filter. Below is the code that will set the opacity to the class menu. We have also set color to white so that we can see the text that is on top of the image.

.menu {
background: url(images/cssjuice_fade.jpg) repeat;
filter: alpha(opacity=40);
opacity: 0.4;
}

Now the image has a opacity set, we need to look at the JavaScript code. To change the opacity in a browser that supports opacity other then Internet Explorer, the code would be this.style.opacity=X. For IE, we have to also add this.style.filter.alpha.opacity=XX. With our effect we want the opacity completely removed when the user’s mouse touches our element so we will need to set the values to 1 and 100 for IE. Here is the JavaScript we will need to add to the tags in order to change the opacity:

onmouseover=”this.style.opacity=’1′; this.style.filter.alpha.opacity=’100′”

We also have to reset the opacity to the original “off” state. To do this we will have to set the opacity settings back to their original values with the onmouseoff event. Here is that code.

onmouseoff=”this.style.opacity=’0.4′; this.style.filter.alpha.opacity=’40′”

The only thing left to do is join both parts of the JavaScript with the HTML element.

Put your mouse on this text

The only issue with this code is that it will be hard to read. In order to make our code easier to read we can make some changes by making a JavaScript function that we can include in between the head tags of our page, and make a minor change in the HTML element itself. Here is the JavaScript function, and the changes in the HTML element.

<script>function statusOn(element){element.style.opacity=1;element.filters.alpha.opacity=100;}

function statusOff(element){

element.style.opacity=0.4;

element.filters.alpha.opacity=40;

}

</script>

Put your mouse on this text

CSS, Tutorials

Comments (0)