SubDevo
Administrator
member is offline
![[avatar]](http://i486.photobucket.com/albums/rr230/FridayFiles/598px-Lunar_libration_109.gif)
Creator of LSD...
![[yim]](http://s4.images.proboards.com/yim.gif)
![[homepage]](http://i486.photobucket.com/albums/rr230/FridayFiles/website.png)
Joined: Oct 2008
Gender: Male 
Posts: 102
Location: MI, USA
Karma: 1 |  | Easy Image Rollovers with Preload
« Thread Started on Sept 5, 2009, 1:18am » | |
Easy Image Rollovers with Preload by SubDevo
Tested in IE, FF, Opera and Safari
I have to say... This is a nice code! 
This will be the EASIEST rollovers you will ever do. No need to edit the code to add all your URL's to your rollover images. For any image you want to use as a rollover, just name both of the images the same filename and same extension. Then add, before the extension (.jpg .gif .png etc.), "_off" to the normal/off image and add "_on" to the rollover/on image filename.
Upload both the images to the SAME folder to your image host. Your host must have folders and BOTH the images must be in the same folder. Photobucket.com is set up this way.
Example:
htp://www.fakehost.com/images/list_off.png
htp://www.fakehost.com/images/list_on.png
The code will find the "_off" images and automatically use the "_on" image as the rollover.
Using this method, you can easily add rollovers to ANY image on your forum, without a single code edit! Items such as your menu buttons, UBBC buttons, reply/quote etc... even your avatar and signature images! Use your imagination...
Here is the only option to edit:
var pLoad=1; // Preload Rollover Images? 1=Yes, 0=No.
Leave this at "1" to preload (download) your rollover images. This way there is no delay when you mouse over a image. The rollover image is instantly shown. No more of those boxes with a "x" in it while the rollover image downloads. 
Enjoy!!!
SubDevo 
Location: Global FooterCode:<script type="text/javascript">
<!--
/* Easy Image Rollovers with Preload by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* [url]http://interoceandesigns.proboards.com[/url] or [url]http://lsdp.proboards.com[/url] */
var pLoad=1; // Preload Rollover Images? 1=Yes, 0=No.
var n=document.images; var nI=[]; var oF="_off."; var oN="_on.";
function Iswp(i,a,b,c){i.src=((c)?c:i).src.replace(a,b);}
for(var x=0;x<n.length;x++){
if(n[x].src.match(oF)){
if(pLoad){nI[x]=new Image; Iswp(nI[x],oF,oN,n[x]);}
n[x].onmouseover=function(){Iswp(this,oF,oN);}
n[x].onmouseout=function(){Iswp(this,oN,oF);}
}
}
//-->
</script> |
|
|
![[image]](http://i486.photobucket.com/albums/rr230/FridayFiles/siganimation6left_off.gif) ![[image]](http://i486.photobucket.com/albums/rr230/FridayFiles/siganimation6right_off.gif)
Learn about LSD here! |
|
![[Home]](http://i486.photobucket.com/albums/rr230/FridayFiles/menu_buttons/home_off.png)
![[Help]](http://i486.photobucket.com/albums/rr230/FridayFiles/menu_buttons/help_off.png)
![[Search]](http://i486.photobucket.com/albums/rr230/FridayFiles/menu_buttons/search_off.png)
![[Login]](http://i486.photobucket.com/albums/rr230/FridayFiles/menu_buttons/login_off.png)
![[Register]](http://i486.photobucket.com/albums/rr230/FridayFiles/menu_buttons/register_off.png)
![[Search This Thread]](http://i486.photobucket.com/albums/rr230/FridayFiles/menu_buttons/search_thread_off.gif)
![[Send Topic To Friend]](http://i486.photobucket.com/albums/rr230/FridayFiles/menu_buttons/email_topic_off.gif)
![[Print]](http://i486.photobucket.com/albums/rr230/FridayFiles/menu_buttons/print_off.gif)
Author
Logged