Rolloverer

Richard Maloney Apr 17, 2006

Create image rollovers and links quickly. You can even apply this method to table rows and cells. Very easy!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

The JavaScript Source: Miscellaneous : Rolloverer

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Richard Maloney :: http://ottbot.hismercy.ca */

//-     Script: Rolloverer v1.0      -//    
//-     Author: Richard Maloney      -//   
//-     Copyright 2006               -//
//-     Website: www.ottbot.com      -// 
//-(Temp.: http://ottbot.hismercy.ca)-//
//------------------------------------//
// INSTRUCTIONS FOR USE:
// *IMAGE ROLLOVERS: Attribute to add= 'hrsc'
// To use in your <img> tag or <td> tag for an image rollover:
// Add a 'hsrc' attribute containing the location of your rollover image 
//    ie. <img scr="myPic.gif" hscr="myPic_on.gif"> (*src attribute optional)
//    ie. <td background="myPic.gif" hscr="myPic_on.gif"> (*background attribute optional)
// *TABLE ROLLOVERS: Attribute to add 'hcolor'
// To use in your <table> tag for a background rollover color change of all table rows
// Add a 'hcolor' attribute to specify rollover color hover ie. <table hcolor="#ff0000">
// *TR and TD ROLLOVERS: Attribute to add 'hcolor' Optional attribute 'bcolor'
//   To use in your <tr> or <td> tag for a background color change rollover:
//   Add a 'hcolor' attribute to specify rollover color hover ie. <tr hcolor="#ff0000">
//   Add a 'rcolor' attribute to specify rollover color background 
//     ie. <tr rcolor="#ffff33"> leave blank for no change
// *ADD LINKS: Attribute to add 'href' Optional attribute 'target="_blank"'
//   To make a link of your <img>, <tr> or <td> tag:
//   Add a 'href' attribute like an anchor tag 
//     ie. <tr href="http://www.google.com">  opens link in same window
//       use 'target=_blank" to open your link in new window
//     ie. <img href="http://www.google.com" target="_blank"> (*target attribute optional)
// That's it!
//----------------------------------------------------------------------------------------
function rolloverer() { if (!document.getElementById) {return}
  var tables=document.getElementsByTagName('table');
  for (var i=0;i<tables.length;i++) {
    var trs=tables[i].getElementsByTagName('tr');
      // table hcolor section
    if (tables[i].getAttribute("hcolor")) {
      var rowcolor=tables[i].getAttribute("hcolor");
      for(var j=0;j<trs.length;j++) { 
        if (!trs[j].getAttribute('hcolor')) { 
          trs[j].setAttribute('hcolor', rowcolor);
        }
      }
    }
    for(var j=0;j<trs.length;j++) {
      // tr mouseovers here
      if (trs[j].getAttribute('hcolor')) {
        if (!trs[j].getAttribute('bcolor')) trs[j].setAttribute('bcolor', trs[j].getAttribute('bgcolor'));
        trs[j].onmouseover=function(){this.setAttribute('bgColor',this.getAttribute("hcolor"))}
        trs[j].onmouseout= function(){this.setAttribute('bgColor',this.getAttribute("bcolor"))}
      }
      // tr mouseclick here
      if (trs[j].getAttribute('href')) {
        var url=trs[j].getAttribute('href');
        if (trs[j].getAttribute('target')) {
          if (trs[j].getAttribute('target') == "_blank" ) {
            trs[j].onclick=function(){window.open(this.getAttribute('href'))}
          }
          else {trs[j].onclick=function(){location.href=this.getAttribute('href')}
          }
        }
        else {trs[j].onclick=function(){location.href=this.getAttribute('href')}}
        }
    }
    var tds=tables[i].getElementsByTagName('td');
    for(var j=0;j<tds.length;j++) { 
      // td image rollovers here
      if (tds[j].getAttribute('hsrc')) {
        tds[j].onmouseover=function(){imgOriginSrc=this.getAttribute('background');this.setAttribute('background',this.getAttribute('hsrc'))}
        tds[j].onmouseout= function(){this.setAttribute('background',imgOriginSrc)}
      }
      // td mouseovers here
      else if (tds[j].getAttribute('hcolor')) {
        if (!tds[j].getAttribute('bcolor')) {tds[j].setAttribute('bcolor', tds[j].getAttribute('bgcolor'));}
        tds[j].onmouseover=function(){this.setAttribute('bgColor',this.getAttribute("hcolor"))}
        tds[j].onmouseout= function(){this.setAttribute('bgColor',this.getAttribute("bcolor"))}
      }
      // td mouseclick here
      if (tds[j].getAttribute('href')) {
        if (tds[j].getAttribute('target')) {
                if (tds[j].getAttribute('target') == "_blank" ) {
                        tds[j].onclick=function(){window.open(this.getAttribute('href'))}
                }
                else {tds[j].onclick=function(){location.href=this.getAttribute('href')}
                }
        }
      else { tds[j].onclick=function(){this.getAttribute('href')}}
      }
    }
  }// image rollover code here
  var imgOriginSrc; var imgTemp = new Array(); var imgTempOn = new Array(); var imgarr = document.getElementsByTagName('img');
  for (var i = 0; i < imgarr.length; i++) {
    if (imgarr[i].getAttribute('hsrc')) {
      imgTemp[i] = new Image(); imgTemp[i].src = imgarr[i].getAttribute('hsrc');
      imgarr[i].onmouseover = function() {imgOriginSrc=this.getAttribute('src');this.setAttribute('src',this.getAttribute('hsrc'))}
      imgarr[i].onmouseout = function() {this.setAttribute('src',imgOriginSrc)}
    }
    // img mouseclick here
    if (imgarr[i].getAttribute('href')) {
      if (imgarr[i].getAttribute('target')) {
        if (imgarr[i].getAttribute('target') == "_blank" ) {imgarr[i].onclick=function(){window.open(this.getAttribute('href'))}}
        else {imgarr[i].onclick=function(){location.href=this.getAttribute('href')}}
      }
      else { imgarr[i].onclick=function(){location.href=this.getAttribute('href')
}}}}}

onload=rolloverer;

<div align="center">
<img src="headerlogo.gif" hsrc="headerlogo2.gif">
</div>
<br>
<table hcolor="#fff000" width="50%" align="center" cellpadding="8">
<tr><td>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</td></tr><tr><td hcolor="#ff0f00">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</td></tr>
</table>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Rolloverer

Leave a Response

Attention JavaScript Coders

Go Deeper