»
EnglishFrenchVietnamese

Print - DOM Image Rollover II - JavaScriptBank.com

Full version: jsB@nk » Image » Rotation » DOM Image Rollover II
URL: https://www.javascriptbank.com/dom-image-rollover-ii.html

DOM Image Rollover II © JavaScriptBank.comAdd the classic 'roll over' effect to your image(s) with ease, thanks to this versatile DHTML script. Just insert a custom HTML attribute inside the image, and you're done.

Full version: jsB@nk » Image » Rotation » DOM Image Rollover II
URL: https://www.javascriptbank.com/dom-image-rollover-ii.html



JavaScript
<script type="text/javascript">/************************************************ DOM Image Rollover II- By Adam Smith (http://www.codevendor.com)* Script featured on and available at Dynamic Drive (http://www.dynamicdrive.com)* Keep this notice intact for usage please***********************************************//*Header Information------------------------------------[Do Not Remove This Header]--Title: OO Dom Image RolloverDescription: This script makes it easy to add rollover/ mousedown   effects to any image on the page, including image submit buttons. Automatically   preloads images as well. Script works in all DOM capable browsers- IE5+, NS6+,   Opera7+.Legal: Copyright 2005 Adam SmithAuthor Email Address: ibulwark@hotmail.comDate Created: June 6, 2005Website: Codevendor.com | eBadgeman.comScript featured on Dynamic Drive: http://www.dynamicdrive.com-----------------------------------------------------------------------------------*/function imageholderclass(){this.over=new Array();this.down=new Array();this.src=new Array();this.store=store;function store(src, down, over){var AL=this.src.length;this.src[AL]=new Image(); this.src[AL].src=src;this.over[AL]=new Image(); this.over[AL].src=over;this.down[AL]=new Image(); this.down[AL].src=down;}}var ih = new imageholderclass();var mouseisdown=0;function preloader(t){for(i=0;i<t.length;i++){if(t[i].getAttribute('srcover')||t[i].getAttribute('srcdown')){storeimages(t[i]);var checker='';checker=(t[i].getAttribute('srcover'))?checker+'A':checker+'';checker=(t[i].getAttribute('srcdown'))?checker+'B':checker+'';switch(checker){case 'A' : mouseover(t[i]);mouseout(t[i]); break;case 'B' : mousedown(t[i]); mouseup2(t[i]); break;case 'AB' : mouseover(t[i]);mouseout(t[i]); mousedown(t[i]); mouseup(t[i]); break;default : return;}if(t[i].src){t[i].setAttribute("oldsrc",t[i].src);}}}}function mouseup(t){var newmouseup;if(t.onmouseup){t.oldmouseup=t.onmouseup;newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("srcover");this.oldmouseup();}}else{newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("srcover");}}t.onmouseup=newmouseup;}function mouseup2(t){var newmouseup;if(t.onmouseup){t.oldmouseup=t.onmouseup;newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("oldsrc");this.oldmouseup();}}else{newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("oldsrc");}}t.onmouseup = newmouseup;}function mousedown(t){var newmousedown;if(t.onmousedown){t.oldmousedown=t.onmousedown;newmousedown=function(){if(mouseisdown==0){this.src=this.getAttribute("srcdown");this.oldmousedown();}}}else{newmousedown=function(){if(mouseisdown==0){this.src=this.getAttribute("srcdown");}}}t.onmousedown=newmousedown;}function mouseover(t){var newmouseover;if(t.onmouseover){t.oldmouseover=t.onmouseover;newmouseover=function(){this.src=this.getAttribute("srcover");this.oldmouseover();}}else{newmouseover=function(){this.src=this.getAttribute("srcover");}}t.onmouseover=newmouseover;}function mouseout(t){var newmouseout;if(t.onmouseout){t.oldmouseout=t.onmouseout;newmouseout=function(){this.src=this.getAttribute("oldsrc");this.oldmouseout();}}else{newmouseout=function(){this.src=this.getAttribute("oldsrc");}}t.onmouseout=newmouseout;}function storeimages(t){var s=(t.getAttribute('src'))?t.getAttribute('src'):'';var d=(t.getAttribute('srcdown'))?t.getAttribute('srcdown'):'';var o=(t.getAttribute('srcover'))?t.getAttribute('srcover'):'';ih.store(s,d,o);}function preloadimgsrc(){if(!document.getElementById) return;var it=document.getElementsByTagName('IMG');var it2=document.getElementsByTagName('INPUT');preloader(it);preloader(it2);}if(window.addEventListener){window.addEventListener("load", preloadimgsrc, false);} else{if(window.attachEvent){window.attachEvent("onload", preloadimgsrc);}else{if(document.getElementById){window.onload=preloadimgsrc;}}}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<img src="photo2.jpg" srcover="photo3.jpg"><img src="photo1.jpg" srcover="photo4.jpg" srcdown="photo5.jpg"><input type="image" name="submitimg" src="photo6.jpg" srcover="photo7.jpg" srcdown="photo1.jpg" border="0"><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->