Phiên bản đầy đủ: jsB@nk » Linh tinh » Đổi màu nền cho các đối tượng
URL: https://www.javascriptbank.com/rolloverer.html
Hiệu ứng giúp bạn đổi ảnh hiển thị hoặc màu nền của các đối tượng một cách nhanh chóng mỗi khi người dùng rê con trỏ chuột đến chúng.
Phiên bản đầy đủ: jsB@nk » Linh tinh » Đổi màu nền cho các đối tượng
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-->