Full version: jsB@nk » Misc » Rolloverer
URL: https://www.javascriptbank.com/rolloverer.html
Create image rollovers and links quickly. You can even apply this method to table rows and cells. Very easy!
Full version: jsB@nk » Misc » Rolloverer
URL: https://www.javascriptbank.com/rolloverer.html
<script language="javascript">// 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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><img src="../image/photo3.jpg" hsrc="../image/photo4.jpg"><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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->