Post by SubDevo on Sept 4, 2009 22:03:36 GMT -8
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
Put the "_off" image anywhere on your page or in "Customize Images".
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. */
/* interoceandesigns.com or lsdp.proboards.com */
var pLoad=1; // Preload Rollover Images? 1=Yes, 0=No.
var n=document.images,nI=[],oF="_off.",oN="_on.",x=-1;
function Iswp(i,a,b,c){i.src=((c)?c:i).src.replace(a,b);}
while(n[++x]){
if(n[x].src.indexOf(oF)!=-1){
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>
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
Put the "_off" image anywhere on your page or in "Customize Images".
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. */
/* interoceandesigns.com or lsdp.proboards.com */
var pLoad=1; // Preload Rollover Images? 1=Yes, 0=No.
var n=document.images,nI=[],oF="_off.",oN="_on.",x=-1;
function Iswp(i,a,b,c){i.src=((c)?c:i).src.replace(a,b);}
while(n[++x]){
if(n[x].src.indexOf(oF)!=-1){
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>