Post by SubDevo on Sept 5, 2009 1:18:07 GMT -5
Easy Image Rollovers with Preload by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.
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.
FOR BEST RESULTS
Put this code at the very bottom of your Global Footer.
Enjoy!!!
SubDevo
Location: Global Footer
Tested in IE, FF, Opera, Safari and Chrome.
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.
FOR BEST RESULTS
Put this code at the very bottom of your Global Footer.
Enjoy!!!
SubDevo
Location: Global Footer
<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>