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.
immot
Wait, how are you able to tell if the system is appropriate answer?
Therefore to start with it is necessary to search out such a website which might supply low cost holiday.

[url=http://buy-lipitor.com/]lipitor vs.niacin[/url]

Hiring Tradespeople-Be Alert 5. Quality New Domiciles - How Are you able to Realize That The Builder Will Ship A top quality Home?
Publisher: Erina A fishing watch is perfect for that will special fisherman in your life.

[url=http://order-prednisone.com/]prednisone dosage for dogs with lymphoma[/url]

Writer: Alan Liptrot Some riders prefer to travel alone, and if you may cope with the solitude, this has many advantages.
Additionally check that mailing services are included in your buy and that no hidden prices might be added to your credit card when processing fee.

http://www.vicenzapiu.com/tag/viale-trento/page/1

fktrpr94f
A Burberry Outlet is the suitable place to head to in case you are in search of Burberry products at remarkable discounts.
You possibly can purchase a brand new Patek Philippe replica take a look at.
immot at 09:45PM, 2017/11/28.
Thomasbef
Мы ценим Ваше время и делим с Вами общие цели. Продвижение Вашего сайта для нас главный приоритет.
Сбор тематических баз с ТИЦ ДЛЯ продвижения
Трафик на ваш сайт Писать в ICQ 656310373
Заказажите продвижение Вашего товара.
Thomasbef at 11:53AM, 2017/11/29.
BrendaDaymn
Unique <a href=https://www.redbubble.com/people/Goshadron/shop/>gifts for all occasions</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/Goshadron/shop
Worldwide shipping.
BrendaDaymn at 04:43PM, 2017/12/02.
ElsieRew
Unique <a href=https://www.redbubble.com/people/goshadron/shop/posters/>Posters</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/Goshadron/shop
Worldwide shipping.
ElsieRew at 08:36PM, 2017/12/04.
ElsieRew
Unique <a href=https://www.redbubble.com/people/goshadron/shop/pencil-skirts/>Mini Skirts</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/Goshadron/shop
Worldwide shipping.
ElsieRew at 10:17PM, 2017/12/04.
ElsieRew
Unique <a href=https://www.redbubble.com/people/goshadron/shop/duvet-covers/>Duvet Covers</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/Goshadron/shop
Worldwide shipping.
ElsieRew at 07:03AM, 2017/12/05.
MelissaStavy
Unique <a href=https://www.redbubble.com/people/goshadron/shop/clocks/>Clocks</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/Goshadron/shop
Worldwide shipping.
MelissaStavy at 08:37AM, 2017/12/05.
MelissaStavy
Unique <a href=https://www.redbubble.com/people/goshadron/shop/canvas-prints/>Canvas Prints</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/Goshadron/shop
Worldwide shipping.
MelissaStavy at 10:27AM, 2017/12/05.
Marionbifep
Unique <a href=https://www.redbubble.com/people/goshadron/shop/drawstring-bags/>Drawstring Bags</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/Goshadron/shop
Worldwide shipping.
Marionbifep at 10:56AM, 2017/12/05.
TiffanyVax
See our range <a href=https://www.redbubble.com/people/goshadron/shop/dresses/>Dresses</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/goshadron/shop/dresses
Worldwide shipping.
TiffanyVax at 11:51AM, 2017/12/05.
TiffanyVax
See our range <a href=https://www.redbubble.com/people/goshadron/shop/samsung-galaxy-cases/>Samsung Galaxy Cases & Skins</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/goshadron/shop/samsung-galaxy-cases
Worldwide shipping.
TiffanyVax at 12:22PM, 2017/12/05.
SandraMix
See our range <a href=https://www.redbubble.com/people/goshadron/shop/ipad-cases/>Samsung Galaxy Cases & Skins</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/goshadron/shop/ipad-cases
Worldwide shipping.
SandraMix at 01:12PM, 2017/12/05.
BrandiPrirl
See our range <a href=https://www.redbubble.com/people/goshadron/shop/iphone-wallets/>Samsung Galaxy Cases & Skins</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/goshadron/shop/iphone-wallets
Worldwide shipping.
BrandiPrirl at 01:42PM, 2017/12/05.
BrandiPrirl
See our range <a href=https://www.redbubble.com/people/goshadron/shop/laptop-skins/>Laptop Skins</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/goshadron/shop/laptop-skins
Worldwide shipping.
BrandiPrirl at 03:17PM, 2017/12/05.
Maggiespiff
See our range <a href=https://www.redbubble.com/people/goshadron/shop/laptop-sleeves/>Laptop Sleeves</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/goshadron/shop/laptop-sleeves
Worldwide shipping.
Maggiespiff at 05:39PM, 2017/12/05.
Aureliaedulk
Unique <a href=https://society6.com/igordron/s?q=popular+shower-curtains/>Shower Curtains</a> you will love at great low prices.
Click Here: https://society6.com/igordron/s?q=popular+shower-curtains
Worldwide shipping.
Aureliaedulk at 07:42PM, 2017/12/05.
Aureliaedulk
Unique <a href=https://society6.com/igordron/s?q=popular+duffle-bags/>Duffle Bags</a> you will love at great low prices.
Click Here: https://society6.com/igordron/s?q=popular+duffle-bags
Worldwide shipping.
Aureliaedulk at 08:07PM, 2017/12/05.
immot
Nevertheless, this selection is often only available in the course of the gross sales season so that you may need to wait some time earlier than you'll be able to seize these bargains.
Feed your animals inside of a serene, safe Home, therefore they appear protected and sound and smooth Though they eat.

[url=http://buylevitra24h.com/]vardenafil canada[/url]

Step 2: Where will I be utilizing my new radio?
Not solely you do away with your health troubles but your activity levels enhance through the day.

[url=http://buylevitra24h.com/]levitra canadian pharmacy[/url]

One can get a MP3 player with fewer costs also.
These sneakers are extremely comfortable and don't out you at the chance of tripping by yourself dress or spraining your ankle on the carpet while walking down the aisle.

http://comicola.com/search/%E5%A4%A7%E5%A5%96%E6%8D%95%E9%B1%BC%E7%BD%91%E4%B8%8A%E8%B5%8C%E5%9C%BA+Q82019309.com.com/

fktrpr94f
Your body will need to make use of more muscle fibers so as to keep your dumbbells correct.
In the present day, disposable contact lenses are one of many extra common types of contacts.
immot at 08:54PM, 2017/12/05.
Aureliaedulk
Unique <a href=https://society6.com/igordron/s?q=popular+curtains/>Curtains</a> you will love at great low prices.
Click Here: https://society6.com/igordron/s?q=popular+curtains
Worldwide shipping.
Aureliaedulk at 06:12AM, 2017/12/06.
LauraAppah
Unique <a href=https://society6.com/igordron/s?q=popular+metal-travel-mugs/>Metal Travel Mugs</a> you will love at great low prices.
Click Here: https://society6.com/igordron
Worldwide shipping.
LauraAppah at 08:33AM, 2017/12/06.
EleanorTab
Unique <a href=https://www.redbubble.com/people/goshadron/shop/pillows?accordion=product/>Pillows & Cushions</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/Goshadron/shop
Worldwide shipping.
EleanorTab at 09:19AM, 2017/12/06.
LeonaCot
Unique <a href=https://www.redbubble.com/people/goshadron/shop/scarves?accordion=product/>Scarves</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/Goshadron/shop
Worldwide shipping.
LeonaCot at 11:22AM, 2017/12/06.
RobertaMancy
Unique <a href=https://www.redbubble.com/people/Goshadron/shop/>gifts for all occasions</a> you will love at great low prices.
Click Here: https://www.redbubble.com/people/Goshadron/shop
Worldwide shipping.
RobertaMancy at 01:55PM, 2017/12/06.

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