Javascript rollovers

Introduction

In this tutorial, we will look at different ways to add javascript rollovers effects to HTML elements on a web page

Standard Javascript rollovers

On many web pages, javascript rollovers are handled by adding an onmouseover and onmouseout event on images.

  • onmouseover is triggered when the mouse moves over an element
  • onmouseout is triggered when the mouse moves away from the element

This is an example of how it works. Move your mouse over the arrow below:

This is the code used:

<img src="images/arrow.gif" onmouseover="this.src='images/arrow-over.gif'" onmouseout="this.src='images/arrow.gif'">

When the mouse moves over the images, the source of the image is set to arrow-over.gif(the green arrow). When the mouse moves away from the image, the source is reverted to the blue arrow(arrow.gif).

CSS rollovers with Javascript

Instead of changing the src attribute of an image, you can also use Javascript to change the css class of an element.

This is an example:

Move your mouse over me

This is the code used:

<style type="text/css">
.arrowOver{
   background-repeat:no-repeat;
   background-image:url('images/arrow-over.gif');
   color:blue; }
</style>
<p onmouseover="this.className='arrowOver'" onmouseout="this.className=''">Move your mouse over me</p>

When you move the mouse over the text, it will assign the element to the css class "arrowOver". This will apply all the layout defined in the <style> part above to this element, i.e. a background image and blue text. This styling will be removed when the mouse moves away from the text.

CSS styling with mootools

Mootools is one of many great libraries which makes it easier to work with Javascript. This is an example of how you can use mootools to add Javascript rollover effects:

Move your mouse over me

This is the code used for this example:

<style type="text/css">
.arrowOver, .standardArrow{
   background-repeat:no-repeat;
}
p.arrowOver{
   background-image:url('images/arrow-over.gif');
   color:green;
}
.standardArrow{
   background-image:url('images/arrow.gif');
   color:blue;
}
</style>
<p class="standardArrow" onmouseover="$(this).addClass('arrowOver')" onmouseout="$(this).removeClass('arrowOver')">Move your mouse over me</p>

In this example, we are using two css classes, standardArrow and arrowOver.

An element on a web page can be assigned to more than one css class. In these cases, the styling you end up with will be a mix of these css classes. In the <style> part above, I have added a p. in front of arrowOver in order to give it precedence over standardArrow

When the mouse moves over the element, the css class arrowOver will be added to the element. When the mouse moves away from the element, it will be removed.

Automate it with Mootools

It always feels better to work with small and clean files instead of a large file containing a mix of HTML, Javascript and CSS. This is one of the reason why it's a good idea to have HTML, Javascript and CSS in separate files. It gives you more freedom and it also makes it much easier for you to maintain your site.

This is something we can accomplish by adding events dynamically, using plain Javascript or with a library like mootools.

Here, I want to show you how this can be done using Mootools.

Demo example - Move your mouse over the elements below:

Menu item 1

Menu item 2

Menu item 3

Menu item 4

Step 1: Plain HTML

The first thing we do is to write our plain HTML code:

<p class="standardArrow"><a href="#">Menu item 1</a></p>
<p class="standardArrow"><a href="#">Menu item 2</a></p>
<p class="standardArrow"><a href="#">Menu item 3</a></p>
<p class="standardArrow"><a href="#">Menu item 4</a></p>

As you can see, there is no Javascript here. All we have done is to create some <p> tags assigned to the standardArrow css class with some anchor tags inside it.

Step 2: CSS inside separate file

The next thing to do is to create a sub folder called css, and inside it a file called javascript-rollovers.css. This is the content of this file:

.arrowOver, .standardArrow{
   background-repeat:no-repeat;
   margin-bottom:0px;
   margin-top:0px;
}
p.arrowOver{
   background-image:url('../images/arrow-over.gif');
   color:green;
}
.standardArrow{
   background-image:url('../images/arrow.gif');
   color:blue;
}

The css is almost identical to the one used in the previous example. We have only added a ../ prefix to the urls in order to have a relative paths from the css file.

Then we include this css file our web page using the <link> tag:

<link rel="stylesheet" href="css/javascript-rollovers.css">

Step 3: Javascript in separate file

We also create a sub folder called js which would be the folder for our Javascript code. Inside it, we create a new file called javascript-rollovers.js. This is the content of this file:

window.addEvent('domready', function() {
   var els = $$('.standardArrow');
   // Getting size of array as a variable for Javascript speed purpose
   var countEls = els.length;
   for(i=0;i<countEls;i++) {
     els[i].addEvent('mouseover', arrowMouseover);
     els[i].addEvent('mouseout', arrowMouseout);
   }
});

function arrowMouseover(){
   $(this).addClass('arrowOver');
}
function arrowMouseout(){
   $(this).removeClass('arrowOver');
}

The first thing we do in this code is to add a domready event. This event will be triggered when the HTML or Document Object Model(DOM) of our web page has been loaded by the browser. When this happens, the function assigned to the event will be executed.

Inside this function, I'm creating an array of all elements on my page assigned to the css class standardArrow

var els = $$('.standardArrow');

The I loop through each of these elements and assign an onmouseover and onmouseout event to each of them.

els[i].addEvent('mouseover', arrowMouseover);
els[i].addEvent('mouseout', arrowMouseout);

When the mouse moves over the element, it will call the function named arrowMouseover and when the mouse moves away from it, it will call the function arrowMouseout.

These two function both consists of only one line. It simply adds and removes the arrowOver css class from the element triggering the event.

function arrowMouseover(){
   $(this).addClass('arrowOver');
}
function arrowMouseout(){
   $(this).removeClass('arrowOver');
}

The last thing we have to do is to include javascript-rollovers.js on our web page using the <script> tag:

<script type="text/javascript" src="js/javascript-rollovers.js"></script>

 

Comments

Nav
Thank you for all your help. You have made learning DHTML much more fun and interesting.

Kind Reagards
Nav
Nav at 02:43PM, 2011/12/05.
Jocular Johnny
I was able to put rollovers in blogger when I had Windows XP Professional. After I had a computer crash Windows Home was installed and I run IE8.

Now I find I can't do rollover in blogger, nor can I preview rollovers in my browser when working with Serif.

I have also noticed that when I republish posts in blogger that have rollovers in them, they now don't work.

This code had always worked.

<a href="IMAGE-DESTINATION-URL"><img src="IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" /></a>

I know rollovers contain Javascript and when I try and do them in blogger, I get the notification bar that this page has been modified to protect from cross-site scripting.

Can you possibly help - thank you.
Jocular Johnny at 01:34AM, 2012/02/11.
viswarajramji
this website is awesome enough and made me learn much
viswarajramji at 11:24AM, 2014/04/10.
Jack
Awesome, I just used it on my web page, very easy to implement
Jack at 10:41AM, 2017/01/06.
Robertbef
Hello
Robertbef at 10:44PM, 2018/08/12.
immot
Being able to get low cost Frontline plus can mean the difference between maintaining our pets freed from ticks and fleas or having to miss therapies due to the associated fee.
Today one can even use these portable DVD player's in their automobiles for some leisure function inside the automotive.

[url=http://otc-inhaler.com/catalog/Asthma/Prednisone.htm]prednisone migraine headaches[/url]

In August 2017 there is some extra info concerning the elevated danger of creating the attention or vision facet effect NAION which is included in a current drug label change for Viagra, Cialis, and Levitra.
N. Y. Mku. Joue., tained pieces of egg-shell.

[url=http://otc-inhaler.com/catalog/Asthma/Prednisone.htm]prednisone exercise[/url]

The web retailer has to have an array of shipping options that are low-cost and good for you.
Your self will come across innumerable far more techniques in direction of supply your lengthy run client if your self basically hear.

http://kiai-enterprises.com/index.php/car-care-products/car-care-kits.html?mode=list&p=1

fktrpr94f
We determine our dresses in accordance with the occasion.
Just be sure you get an expert clear in your carpet a minimum of once yearly.
immot at 10:14AM, 2018/08/18.
immot
Writer: Jane Wilkinson Seaside holidays to Turkey provide beautiful scenery, white sands and warm waters.
Each time optimum lowered enterprises begin, they don't comprise an unlimited call report well ready.

[url=http://otcedpills.com/catalog/Erectile_Dysfunction/Viagra_Extra_Dosage.htm]ecstasy and viagra[/url]

Many of the categorical nodes in advanced-stage cervix cancer could be unquestionably detected through MRI or CT leaf via because they are greater than 1 cm diameter within the brief axis.
One different factor you've got to know in regards to the reminiscence foam mattress is that it acts like sponge that means it absorbs liquids quickly.

[url=http://otcbpmeds.com/catalog/Blood_Pressure/Adalat.htm]nifedipine during pregnancy[/url]

EBay is the final word on-line buying vacation spot for buying and selling low cost laptops.
So why are people nonetheless buying from automobile lots?

http://www.powerhouseproducts.com/ph/abrasives-cutting/cross-buffs/l/price:20-29.97html?dir=desc&order=price

fktrpr94f
Private Gadgets.— Dr. H. Marion-Sims and Dr.
This is one of the most extremely anticipated online guitar guides of at this time due to its confirmed efficiency to the users.
immot at 12:59PM, 2018/10/24.
immot
Are there a custom-made set of domestic cell phone manufacturers in China?
When competitors is high amongst sellers, the value of the product drops considerably.

[url=http://otcantidepressants.com/catalog/Depression/Wellbutrin_SR.htm]wellbutrin and libido[/url]

Just remember to get an expert clear to your carpet at least as soon as every year.
VHF normally offers you much better protection outdoors while a UHF radio will most likely be way more efficient inside of buildings.

[url=http://otcbpmeds.com/catalog/Blood_Pressure/Innopran_XL.htm]propranolol withdrawal symptoms how long[/url]

Buying one a 12 months or two ago signifies that you got an inferior product and paid a lot for it.
A budget cellular broadband deals are provided by all main networks.

http://www.aquestionofbrains.org/jxuuwvuu_11094/rvuwuv/jjjqt_3tsuu8/fefkt/30617_75743345/

fktrpr94f
Publisher: Winn E. If you are looking to purchase a cheap dinette set, consider the following sources.
Writer: Michelle McGeen Canine purses are getting extra popular day-after-day.
immot at 04:55PM, 2018/10/29.
immot
Writer: Steve Markk There's a lot comfort that the Adidas skateboarding footwear gives the owner.
Nonetheless, if your self are on the lookout for a high-quality web web internet hosting small enterprise, then I strongly recommend the ‘Dreamhost’.

[url=http://buyingvaltrex.com/]generic for valacyclovir[/url]

Browsing some journey websites online may be a good start, but to search out the best fares you could should transcend this.
Do drop by Levitra to acquire the most modern working promo code.

[url=http://otc-inhaler.com/catalog/Asthma/Prednisone.htm]prednisone bipolar[/url]

Can by yourself say that Sadly Fantastic stays, there comprise been no times, months, periods after dogged stresses of agenda on a regular basis residing incorporate choose absent even the past lose of ual motivation?
Many people are averse to purchasing used things however there is no such thing as a harm in it.

http://songiada.co/san-pham/gia-cong-2/page/5/index.php/rlkg/tzqwhdpwd/dxwsitqt/3068/dnkrbi-tire/qsfrclck/vanupwvgfd/zsolyfekqszc-xmmt/nyaorqxn/31202/pyzdxm.vlq

fktrpr94f
Discount designer perfumes, even the sound of it sounds heavenly.
To retailer your personal possessions for a long time you need to make sure that they're saved in a safe place the place nothing is damaged or stolen.
immot at 08:41AM, 2018/11/07.
immot
Publisher: Maline Morgan Its simple to seek out some Nice Offers Online for paintballing with your friends.
You are given a right away choice of backing up your complete Laptop - really useful upon first running - or selecting particular person information and folders.

[url=http://buylevitra24h.com/]order vardenafil online[/url]

You'll be needed to go looking on the internet key word that is why you need to use applicable key phrase phrases which could also be similar to: "Low cost Laptops", "Low-cost Laptops", plus "Laptops on sale".
There are literally a number of good methods for locating low-cost domestic flights.

[url=http://buylevitra24h.com/catalog/Erectile_Dysfunction/Levitra_Super_Active.htm]super active levitra online canadian pharmacy[/url]

When you're deciding on a train set don't forget to consider who it's for and whether or not they're excited by any particular varieties of railway machinery.
Writer: vikash kumar Buying live performance tickets can all the time be very over whelming someday.

http://www.anavin.ir/vbe-128vews/8930wtdi_6-oxnyg19226/

fktrpr94f
Test to see that it has a safety mark - a CE Mark, Lion Mark or preferably each.
If in case you have a digicam, take footage of the scene of the accident.
immot at 06:54AM, 2018/11/15.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2010 dhtmlgoodies.com | post@dhtmlgoodies.com