The JavaScript Source: Miscellaneous : Rolloverer

Home

Rolloverer

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://javascript.internet.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;  <script type="text/javascript" src="rollOverer.js"></script>  <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!

Add a comment, suggestion, or correction

Comments feed

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]