SMF For Free Support Forum

SMF For Free Support => Guides and Tutorials => Topic started by: simply sibyl on February 18, 2008, 05:39:57 pm

Title: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on February 18, 2008, 05:39:57 pm
STEP 1:
Set up the rank images for your Membergroups
Admin > Membergroups
Click "Modify" across from a Membergroup
Click on the starfile image link.  
Choose an image

Enter the filename for the image you chose in the star image filename blank for the membergroup.
Set up a different starfile image for each Membergroup.
IMPORTANT:  Make SURE all of your Membergroup images are working before going on to the next step.


STEP 2:
Get the url of the image(s) you just set up
Get the url from the starfile image page or a members post that the image shows in - NOT  the Membergroup page.

From the starfile image page or post:
Right mouse click on the image
Click Propertys.
You will see the url there.
Copy the url.

IMPORTANT: It is important that you have the CORRECT url or this will not work.
Make sure the image starts with:   http://images.smfboards.com NOT  http://www.smfboards.com



STEP 3:
To make the code to swap the image(s) go here:
Swap Images Generator (http://www.ifcode.com/javascript/ImageSwapSMFv2.html)
(IF the above link isnt working go to the end of this post)

Put the url of the starfile image you set up for the Membergroup under OLD IMAGE
Put the url of YOUR image under NEW IMAGE

If you want to do it for more images click ADD NEW FIELD and put in the urls for the additional images, old and new.
    
When you are done click the Get Code button.
Copy the code.
Paste it into your Footer   (Admin > Manage Styles > Edit HEader/Footer)


If you have problems getting it to work

FIRST:   go back thru the directions and double check your work.
If you still need help  reply to this thread
1.   paste the code you used so we can look at it.
2.   post your forum url - preferably to a post in the forum that shows the image is not correct



If the Generator URL is not working:

(The code goes in the Footer)

Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = ["OLD IMAGE URL" , "NEW IMAGE URL"]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>


Replace OLD IMAGE URL with the url of the image you want to replace
Replace NEW IMAGE URL with the url of the new image you want to use

Add more of these lines if you have several images to swap:

img_b[img_b.length++] = ["OLD IMAGE URL" , "NEW IMAGE URL"]
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on August 22, 2008, 06:19:17 pm
NOTICE:    To anyone who is currently using the Swap Image Code to use your own rank images.

If you are suddenly seeing red x's and the code is not working:

Go back thru the code in your footer that swaps the images.
For each place for the OLD links that it says:   http://www.smfboards.com
Change it to:   http://images.smfboards.com
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Fluro on August 22, 2008, 08:44:58 pm
My images just turn into *'s :(
Here is the code:

Quote
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/staradmin.gif" , "http://www.runehq.com/image/specialreports/rare/yellowpartyhat.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>

I put that into my Footer.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on August 22, 2008, 09:31:00 pm
The second url in your code isnt good.

This one...     

http://www.runehq.com/image/specialreports/rare/yellowpartyhat.gif
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Fluro on August 22, 2008, 09:44:42 pm
Ooo i see now, It got changed. Thanks though!
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: eddie on August 23, 2008, 01:25:36 am
nice guide sibyl
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Aragorn4003 on September 12, 2008, 10:32:16 pm
I used this, but it didn't work =[.
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/ModRank.gif" , "http://i37.tinypic.com/23lbm74.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/AdminRank.gif" , "http://i37.tinypic.com/2m7ul4n.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/LED/g_rank1.gif" , "http://i38.tinypic.com/2n6tg88.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/LED/g_rank2.gif" , "http://i36.tinypic.com/mjmp35.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/LED/g_rank3.gif" , "http://i37.tinypic.com/294rpqt.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/LED/g_rank4.gif" , "http://i37.tinypic.com/2r3ji2c.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/LED/g_rank5.gif" , "http://i37.tinypic.com/2a65x1c.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>

Nvm. I got it to work. Thanks for great guide Sibyl.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on September 12, 2008, 10:51:51 pm
You need to go back to the starfile page and use images that do show on that page.
The image links you used do not work at this time.   Only use ones that are not red x's , etc on that starfile page as the original images and it will work for you.    SMF for Free is aware there are many images on that page that do not work.  It is going to take some time for him to edit/fix that.   
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Aragorn4003 on September 13, 2008, 09:16:26 am
You need to go back to the starfile page and use images that do show on that page.
The image links you used do not work at this time.   Only use ones that are not red x's , etc on that starfile page as the original images and it will work for you.    SMF for Free is aware there are many images on that page that do not work.  It is going to take some time for him to edit/fix that.  

Actually those links weren't the problem. I just changed the http://www.smfboards.com in each link to http://images.smfboards.com and it worked fine =].
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on September 13, 2008, 10:27:25 am
You need to go back to the starfile page and use images that do show on that page.
The image links you used do not work at this time.   Only use ones that are not red x's , etc on that starfile page as the original images and it will work for you.    SMF for Free is aware there are many images on that page that do not work.  It is going to take some time for him to edit/fix that.  

Actually those links weren't the problem. I just changed the http://www.smfboards.com in each link to http://images.smfboards.com and it worked fine =].

Yep... normally that would have been what I would have recommended but at the time you posted that last nite the image server was having an issue and it "appeared" those were part of a group of images that do not work so I "wrongly" figured it was best to change using different ones   :P
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: gm gerald on September 26, 2008, 04:03:13 pm
First you need to set up the rank images using the ones on the starfile image page.
Admin > Membergroups
Modify the group you want to do this to.

Click on the starfile image link.   

Choose one of the images  (it doesnt matter which ones you choose as you will be swapping them)

Enter the filename for the image you chose in the star image filename blank for the membergroup.

You need to know the url of the image so you can swap it.
Right mouse click on the image - Do this on the starfile image page so you have the correct url.    
Click Propertys.
You will see the url there.
Copy the url.


To make the code to swap the image go here:

Swap Images Generator (http://www.ifcode.com/javascript/ImageSwapSMF.html)

Put the url of the starfile image under OLD IMAGE
Put the url of YOUR image under NEW IMAGE

If you want to do it for more images click ADD NEW FIELD and put in the urls for the additional images, old and new.
   
When you are done click the Get Code button.
Copy the code.
Paste it into your Footer   (Admin > Manage Styles > Edit HEader/Footer)
hey bro i copied the code it told me to do in the box but when i save it, the image is still the same.....


Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Admin2.bmp" , "http://forum.ruff-rose.com/donator_icon.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: monsta on September 27, 2008, 04:31:28 am
good guide, it will help alot of new people to the smfforfree forums.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: OutOfOrder on October 12, 2008, 06:50:11 am
this was beyond madly helpful for me!

thanks! :)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: sheeba on October 12, 2008, 09:13:30 pm
Whats wrong, when i go to member groups it shows the origional icon. Than when i click modify it shows the picture of my custom one but on the post it shows the origional one.


Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/Futura_6/PDT_Rang_w.gif" , "http://img300.imageshack.us/img300/1713/forummodgr4.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on October 12, 2008, 09:30:59 pm
your code looks fine.     So long as you put it in your Footer and you put this in for the star image filename for the Membergroup you want the image for and made sure THAT image was working for them first it should work fine:   Futura_6/PDT_Rang_w.gif
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: sheeba on October 13, 2008, 07:15:54 am
well it still does it, when I look at stars on member groups it shows the origional pic. Than when I click modify it shows the custom one. But the posts still show the normal one -.-
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on October 13, 2008, 08:12:28 am
well it still does it, when I look at stars on member groups it shows the origional pic. Than when I click modify it shows the custom one. But the posts still show the normal one -.-

Please post the code you used so that we can see what you did.

edit:   actually change the www in the star image url to images like this:
http://images.smfboards.com/ranks/Futura_6/PDT_Rang_w.gif
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: sheeba on October 13, 2008, 05:20:36 pm
works, thanks dude!
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: limskragma on November 05, 2008, 08:21:02 am
I am an admin on the forum, but don't have access to the back end to add new images.  Can I use pics from a hosted file sharing site?

On the manage membergroups page i tried to place a URL such as to http://www.snapdrive.net/files/Stuff/mystar.gif and i get the broken link image.  Is the "star" too large, wrong format, or am i forced to place this file inside the image directory on the backend?

Thanks,

LK

PS the link above is purposely invalid.  I wasn't going to post the real link here.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on November 05, 2008, 09:28:25 am
I am an admin on the forum, but don't have access to the back end to add new images.  Can I use pics from a hosted file sharing site?

On the manage membergroups page i tried to place a URL such as to http://www.snapdrive.net/files/Stuff/mystar.gif and i get the broken link image.  Is the "star" too large, wrong format, or am i forced to place this file inside the image directory on the backend?

Thanks,

LK

PS the link above is purposely invalid.  I wasn't going to post the real link here.

You can not put an external link there -    you have to use a swapper code to do it.. 
Follow the directions in the first post in this thread as it tells you how to change your rank images.
 
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: limskragma on November 05, 2008, 10:44:04 am
I'm an admin, but not the owner.  I don't have this option in my admin menu:

Paste it into your Footer   (Admin > Manage Styles > Edit HEader/Footer)

Here is what i have: http://www.snapdrive.net/files/577388/NWNStuff/admin%20page.JPG

LK
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on November 05, 2008, 10:50:09 am
I'm an admin, but not the owner.  I don't have this option in my admin menu:

Paste it into your Footer   (Admin > Manage Styles > Edit HEader/Footer)

Here is what i have: http://www.snapdrive.net/files/577388/NWNStuff/admin%20page.JPG

LK

Possibly you are not using a forum hosted by this service then.
What is your forum's url please?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: limskragma on November 05, 2008, 12:42:44 pm
http://www.nwnlalaland.com/forum/index.php?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on November 05, 2008, 12:45:25 pm
http://www.nwnlalaland.com/forum/index.php?

You'll need to use http://www.simplemachines.org/community/index.php for support.   They will tell you there how you can change your rank images.   Hosting the forum yourself is very different then using a hosting service.   We do support here only for forums hosted by our service.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: IcecreamSundae on November 09, 2008, 08:34:39 pm
Thanks for the thread. Me and friend are working on putting all the URL's and stuff in. If either of us have any problems then we'll make sure to put them on this thread. Once again thanks.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: [JeReMy] on November 21, 2008, 11:13:10 pm
hmmm i done everything u said but it just stayed the same image
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on November 22, 2008, 09:19:38 am
hmmm i done everything u said but it just stayed the same image

If you want help we need more information.
Forum url?
The code you put in?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: [JeReMy] on November 22, 2008, 09:47:34 am
http://graphicdesignworld.smfforfree3.com that the url of the forum im gonna re-try it cuz i didnt get the code
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: [JeReMy] on November 22, 2008, 09:52:50 am
ok heres the code i used for my footer


 
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3cyan.gif

 , "http://s441.photobucket.com/albums/qq132/jeremy_m_bell/th_a.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>[code]
[/code]
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on November 22, 2008, 09:59:32 am
You used the wrong url for the original image:

Quote
IMPORTANT:  It is important that you have the CORRECT url or this will not work.  It has to be the url of the image that is displayed on the starfile image page OR in a post NOT the one on the Membergroup page. 


Change http://www.smfboards.com/ranks/3cyan.gif to http://images.smfboards.com/ranks/3cyan.gif

Did you set 3cyan.gif in the Admin Membergroup as the starfile image and it DID show up before you put the code in?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: [JeReMy] on November 22, 2008, 10:23:42 am
yes it did show up and i just changed http://www.smfboards.com/ranks/3cyan.gif to http://images.smfboards.com/ranks/3cyan.gif   but it still didnt work
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on November 22, 2008, 11:20:27 am
Lets start over.

Put 3cyan.gif in as the star file name.
Go to a post you have written
RIght mouse click on the star image.
Get the url.

Put it in place of OLD URL in the following code
Put the url of the image you want to use in place of NEW URL   (make sure that image url works)

Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "OLD URL" , "NEW URL" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: [JeReMy] on November 22, 2008, 12:03:19 pm
tysvm sibyl i know what i done i didnt save the image that i wasa gonna swap i left the original one and tryed to do all that  :uglystupid2: :2funny: thx once again
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Apple on November 29, 2008, 09:51:19 am
Dude, cool guide.
But one thing: I put in this code:
Quote
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1starorange.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_admin.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_moderator.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1starlime.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_moderator.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_0.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_1.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_2.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_3.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_4.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_5.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_6.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_mvp.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_moderator.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>

And it's still coming up with the old ones. I put it into my Footer, and it still didn't work!

Please help
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Apple on November 29, 2008, 10:04:22 am
Ahhaa, I
Dude, cool guide.
But one thing: I put in this code:
Quote
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1starorange.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_admin.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_moderator.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1starlime.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_moderator.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_0.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_1.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_2.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_3.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_4.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_5.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_6.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_mvp.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/3yellow.gif" , "http://images.smfboards.com/ranks/dl_ranks2/rank_moderator.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>

And it's still coming up with the old ones. I put it into my Footer, and it still didn't work!

Please help
Ahaa I know what I did wrong, I didn't put in the name of the Picture  :uglystupid2: :crazy2: :2funny:

Thank you dude
-Apple.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: OutOfOrder on November 30, 2008, 09:39:19 am
Forum Url: http://www.funcentral.smfforfree2.com/index.php

thanks for the guide! it has really helped me...

but i have one question... when i have slow internet, i can see the original image, and then later it changes to the image i wanted. and also when i do a quick post, the admin image i have set looks like the old image i had set (it was supposed to change, but it did not). then after i refresh the page, it works.

how do i make it change immediately rather than having it flash the old image and then change to the newer image?

thanks in advance!

Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on November 30, 2008, 09:40:46 am
Forum Url: http://www.funcentral.smfforfree2.com/index.php

thanks for the guide! it has really helped me...

but i have one question... when i have slow internet, i can see the original image, and then later it changes to the image i wanted. and also when i do a quick post, the admin image i have set looks like the old image i had set (it was supposed to change, but it did not). then after i refresh the page, it works.

how do i make it change immediately rather than having it flash the old image and then change to the newer image?

thanks in advance!



You can't do anything about it.    Until the code loads and runs the old images will be there.   Since the codes in the Footer (and it has to be) it is going to be one of the last things to load.  Same thing happens with some of the codes that require jquery that change and remove/hide things.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: xgmedia on December 18, 2008, 05:13:58 pm
But how do I get the link of the rank images on this page to have them switched? http://www.smfsupport.com/support/stylesheet_codes/stylesheet_ss_media_player-t22518.0.html. Thanks for anyone who helps me.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on December 18, 2008, 05:55:11 pm
But how do I get the link of the rank images on this page to have them switched? http://www.smfsupport.com/support/stylesheet_codes/stylesheet_ss_media_player-t22518.0.html. Thanks for anyone who helps me.

Right mouse on the image..   click Propertys.  You will see the link there.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Sherry on December 25, 2008, 08:24:17 pm
Forum Url: http://pittcountymomsclub.smfforfree2.com
My images just turn into X's
Here is the code:

Quote

<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/AppleBlue/rangad.gif" , "http://s412.photobucket.com/albums/pp209/PittCountyMomsClub/Ranks/?action=view¤t=CrownAdminbutton.jpg" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/AppleBlue/rangsup.gif" , "http://s412.photobucket.com/albums/pp209/PittCountyMomsClub/Ranks/?action=view¤t=GlobalModButton.jpg" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/AppleBlue/rangmo.gif" , "http://s412.photobucket.com/albums/pp209/PittCountyMomsClub/Ranks/?action=view¤t=ModButton.jpg" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/AppleBlue/rangw.gif" , "http://s412.photobucket.com/albums/pp209/PittCountyMomsClub/Ranks/?action=view¤t=WebDesignTeamButton.jpg" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/AppleBlue/rangt.gif" , "http://s412.photobucket.com/albums/pp209/PittCountyMomsClub/Ranks/?action=view¤t=PromotionsButton.jpg" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://s412.photobucket.com/albums/pp209/PittCountyMomsClub/Ranks/?action=view¤t=oneface.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on December 25, 2008, 09:04:09 pm
The links for the images you have on your Photobucket account are  incorrect for the code
You need to use the direct links..

for instance the first one:
http://s412.photobucket.com/albums/pp209/PittCountyMomsClub/Ranks/?action=view¤t=CrownAdminbutton.jpg
Should be:
http://s412.photobucket.com/albums/pp209/PittCountyMomsClub/Ranks/CrownAdminbutton.jpg
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Sherry on December 25, 2008, 09:55:23 pm
Okay...gotcha.

Thanks a bunch!
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: zammymage on December 26, 2008, 04:55:42 pm
Great guide i use it all the time but can u make ur own images and put in there or just the images in the change starimage link?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Mystic_kid2k6 on January 18, 2009, 03:43:13 pm
NVM took a while for the images to load lol.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on January 28, 2009, 12:38:42 pm
Forum Url: http://nonstopgamers.smfforfree.com
Nice it worked. But when the person posted something, it came up as 5 of the images in a row... is that normal or can that be fixed?  :(
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on January 28, 2009, 12:41:00 pm
Forum Url: http://nonstopgamers.smfforfree.com
Nice it worked. But when the person posted something, it came up as 5 of the images in a row... is that normal or can that be fixed?  :(

Modify the Membergroup and change the number of star images to 1   ;)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on January 28, 2009, 12:50:40 pm
Forum Url: http://nonstopgamers.smfforfree.com
haha ok that would make sense :) haha thanks man!
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Annjill on February 01, 2009, 12:35:55 am
Forum Url: http://cottontailchaos.smfforfree.com
Here's my code :

Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/moderatorstar.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/GlobalModerator.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/bluemoderatorstar.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/goldstar7.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/silverstar6.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/orangestar5.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/greenstar4.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/violetstar3.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/fleshstar2.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/starlime1.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>

And the original piture shows up. help !

Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on February 01, 2009, 12:42:44 am
You need to set up a different starfile image for each membergroup.
It will not work using the same image for all of them.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Annjill on February 01, 2009, 12:45:55 am
Forum Url: http://cottontailchaos.smfforfree.com
oops then.

[edited]

Okai im done. and i had already put the new code on the footers.

but it's still on its original image ..
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on February 01, 2009, 01:18:42 am
The code that is in your footer looks correct to me.  
When you first setup the starfile images in Membergroups did you check to make sure they were working okay and were they?   

When you set them up did you put only (for instance) 1staraqua.gif  in the box?

Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Annjill on February 01, 2009, 01:31:35 am
Okai.I havent checked it. Here's the new code. Is it right ?
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1staraqua.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/moderatorstar.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1stargold.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/GlobalModerator.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1starlime.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/bluemoderatorstar.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1starorange.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/goldstar7.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1starpink.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/silverstar6.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1starpurple.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/orangestar5.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1starred.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/greenstar4.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/2music.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/violetstar3.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/2music1.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/fleshstar2.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/2music2.gif" , "http://i212.photobucket.com/albums/cc258/Annsharneliun/starlime1.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on February 01, 2009, 01:39:25 am
Okai.I havent checked it. Here's the new code. Is it right ?

The code looks correct.   Show me exactly what you put in the box for one of the Membergroups for the original starfile ok?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Annjill on February 01, 2009, 01:44:22 am
Thanks so much ..
[ star.gif ]
it's still the same. the original ..
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on February 01, 2009, 01:51:23 am
Thanks so much ..
[ star.gif ]
it's still the same. the original ..

Here is what you have to do.
Lets take the first one in your code as an example.  
Whichever Membergroup that one is for Modify that Membergroup and put this in the box for their starfile image:   1staraqua.gif     

Go thru and make sure you have the correct one in each of your Membergroups.  
Then your code should work fine. 
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Annjill on February 01, 2009, 01:55:55 am
YEHEY !

It's working !

Thanks so much ..

You are a lifesaver !

more power
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: jmcmatrixs on February 01, 2009, 05:29:00 am
 :) Nice Guide Mate

 :angel: Angels Of SMF (lol)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Furious1Auto on February 04, 2009, 08:29:40 pm
If you are using photobucket to host your image, what code do you use when generating your footer code? Here is the code I generated, and all that shows up on the thread is: * in lieu of my pic!

<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/doggy/transpsupermods.gif" , "http://s185.photobucket.com/albums/x2/Furious1auto/?action=view&current=contributingmember.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on February 04, 2009, 09:01:08 pm
Use the direct link to the image on your Photobucket..  that link should be:
http://s185.photobucket.com/albums/x2/Furious1auto/contributingmember.gif
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Furious1Auto on February 04, 2009, 09:41:32 pm
It worked, thanks!
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: мσנσвσנσ82 on March 31, 2009, 04:39:38 am
hmm when i do to get my Warned sign it only gives a green square it don't show Warned in words next to it... this is code
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/2music.gif" , "http://i102.photobucket.com/albums/m105/mysmileyplace/warned2.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on March 31, 2009, 04:58:18 am
Background of your forum is black.  The words "warned" on that image are black.    They won't show on that background.    You'll need to choose an image that will show up.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: legend ftw on April 07, 2009, 03:52:13 pm
thanks for guide i works for me but if anyone has a problem see if u left the http//: thing delete if u have 2 of them
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: help? on April 09, 2009, 08:10:27 pm
PLEASE GIVE ME A LINK TO THE RANK IMAGES PLEASE!!
don't ask questions
just do it please
my link won't open. >:(
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on April 09, 2009, 08:20:49 pm
The starfile names?

http://www.smfforfree.com/starpreview.htm
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Pan on May 20, 2009, 12:53:17 am
Still the rank image will not change. please help!
the images will not show but a number or a word something like this: *****
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on May 20, 2009, 10:19:49 am
Still the rank image will not change. please help!
the images will not show but a number or a word something like this: *****

We  cannot help without more information:
First go back thru the tutorial and doublecheck your work... then if it does not work:
Please post your forum url, and the code that you put in your footer

Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Gir on June 05, 2009, 01:57:54 pm
I Got...
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_mo.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/thba24d46a.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_ad.gif" , "http://http://i281.photobucket.com/albums/kk216/elijahcoats/th44c2c488.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_t.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/thea7155f1.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_1.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/th4bc9b135.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_2.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/th54599cd9.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_3.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/th90ca5202.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_4.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/th7ec0705c.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_5.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/thd55cb2d2.png" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
But I Didn't Work ):
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on June 05, 2009, 02:00:19 pm
The second line of the images...

You have two http://'s in the new image URL.

did the other images work or are they all not working?

Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Gir on June 05, 2009, 02:03:23 pm
The second line of the images...

You have two http://'s in the new image URL.

did the other images work or are they all not working?



Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_mo.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/thba24d46a.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_ad.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/th44c2c488.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_t.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/thea7155f1.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_1.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/th4bc9b135.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_2.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/th54599cd9.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_3.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/th90ca5202.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_4.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/th7ec0705c.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_5.gif" , "http://i281.photobucket.com/albums/kk216/elijahcoats/thd55cb2d2.png" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>

It Works Now...
And Yeah I Looked At My Junior Mod's And His Was Working.
Thank You! (:

Thanks, GuitarHero
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: roser on June 16, 2009, 12:38:22 am
it wont work at mines i get only a white box with a red X in it:S look my code

 
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/star.gif" , "http://i40.tinypic.com/27wu4vk.jpg" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/star.gif" , "http://i43.tinypic.com/t8b14i.jpg" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/star.gif" , "http://i39.tinypic.com/2zyizjn.jpg" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/star.gif" , "http://i44.tinypic.com/255uz3d.jpg" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/star.gif" , "http://i40.tinypic.com/i43axv.jpg" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/star.gif" , "http://i41.tinypic.com/33o1ezl.jpg" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on June 16, 2009, 01:05:45 am
hi roser

The image urls you used for the OLD images are wrong.
They should be:  http://images.smfboards.com/ranks/star.gif
(instead of www.smfboards they should be images.smfboards)

Make sure to get the urls from the star filenames page or in a post - NOT the one on the Membergroup page

I see you have the same image set up for all of them.
In order to have a different image for each Membergroup you need to setup a different starfile image for each group. 

You can use the code you already have -  just setup the new images for each group and replace the urls in the code with the correct ones.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: roser on June 17, 2009, 12:58:56 am
yes!! ;D ;D ;D thank you simply it worked now!
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: roser on June 20, 2009, 04:20:27 am
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/star.gif" , "http://i41.tinypic.com/29nxo5f.jpg" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/star.gif" , "http://i43.tinypic.com/t8b14i.jpg" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/star.gif" , "http://i39.tinypic.com/2zyizjn.jpg" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/star.gif" , "http://i44.tinypic.com/255uz3d.jpg" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/star.gif" , "http://i40.tinypic.com/i43axv.jpg" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
mine's don't work :-\  if some one have 250 post's it give him 4 bars that says beginner gamer
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on June 20, 2009, 06:11:36 am
You can't change the same image.

You have this code trying to change http://images.smfboards.com/ranks/star.gif everytime.

You need to choose different images in the "OLD IMAGE" section. Because the code will only change it once.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: roser on June 21, 2009, 08:44:41 am
huh :uglystupid2: can u give me an example?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on June 21, 2009, 08:50:34 am
Here's the code you used. You'll need to choose 5 DIFFERENT images to put in the OLD IMAGE section... here's an example.


Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "IMAGE URL" , "http://i41.tinypic.com/29nxo5f.jpg" ]
img_b[img_b.length++] = [ "2ND IMAGE URL" , "http://i43.tinypic.com/t8b14i.jpg" ]
img_b[img_b.length++] = [ "3RD IMAGE URL" , "http://i39.tinypic.com/2zyizjn.jpg" ]
img_b[img_b.length++] = [ "4TH IMAGE URL" , "http://i44.tinypic.com/255uz3d.jpg" ]
img_b[img_b.length++] = [ "5TH IMAGE URL" , "http://i40.tinypic.com/i43axv.jpg" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>

You had the same URL for all of those images. If you do that it will only change it one time... You need 5 different images to change.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: roser on June 21, 2009, 09:32:51 am
 :o :o...
Code: [Select]
img_b[img_b.length++] = [ "IMAGE URL" ,            "http://i41.tinypic.com/29nxo5f.jpg" ]
img_b[img_b.length++] = [ "2ND IMAGE URL"                  , "http://i43.tinypic.com/t8b14i.jpg" ]
img_b[img_b.length++] = [ "3RD IMAGE URL"          , "http://i39.tinypic.com/2zyizjn.jpg" ]
img_b[img_b.length++] = [ "4TH IMAGE URL"                      , "http://i44.tinypic.com/255uz3d.jpg" ]
img_b[img_b.length++] = [ "5TH IMAGE URL"       

what i need to fill in where u typed image url and 2nd image url?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on June 21, 2009, 11:01:49 am
:o :o...
Code: [Select]
img_b[img_b.length++] = [ "IMAGE URL" ,            "http://i41.tinypic.com/29nxo5f.jpg" ]
img_b[img_b.length++] = [ "2ND IMAGE URL"                  , "http://i43.tinypic.com/t8b14i.jpg" ]
img_b[img_b.length++] = [ "3RD IMAGE URL"          , "http://i39.tinypic.com/2zyizjn.jpg" ]
img_b[img_b.length++] = [ "4TH IMAGE URL"                      , "http://i44.tinypic.com/255uz3d.jpg" ]
img_b[img_b.length++] = [ "5TH IMAGE URL"       

what i need to fill in where u typed image url and 2nd image url?

roser - you need to follow this part of the Guide for every Membergroup that you are going to swap an image for.
Note the items in RED in the quote below

Quote
First you need to set up the rank images using the ones on the starfile image page.
Admin > Membergroups
Modify the groups you want to do this to.

Click on the starfile image link.   

Choose one of the images  (it doesnt matter which ones you choose as you will be swapping them)

Enter the filename for the image you chose in the star image filename blank for the membergroup.
Set up a different starfile image for each Membergroup.

You need to know the url of the images so you can swap them.
Right mouse click on the image - Do this on the starfile image page so you have the correct url. 
Click Propertys.
You will see the url there.
Copy the url.

IMPORTANT:  It is important that you have the CORRECT url or this will not work.  It has to be the url of the image that is displayed on the starfile image page OR in a post NOT the one on the Membergroup page.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: roser on July 14, 2009, 05:29:05 pm
Quote
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/star.gif" , "http://i41.tinypic.com/29nxo5f.jpg" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/star.gif" , "http://i43.tinypic.com/t8b14i.jpg" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/star.gif" , "http://i39.tinypic.com/2zyizjn.jpg" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/star.gif" , "http://i44.tinypic.com/255uz3d.jpg" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/star.gif" , "http://i40.tinypic.com/i43axv.jpg" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>

thats what i got.. and i get image error:S
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on July 14, 2009, 05:44:24 pm
roser I see 2 things wrong.
1.   You used the same image for the OLD image thoughout the code
      You have to set up a DIFFERENT image for each of your Membergroups.
2.   The urls for the OLD images are wrong..  you need to get the urls from the star file image page.. NOT from the Membergroup page

Go back to the beginning and read the Guide again.  I redid it abit a few days ago and maybe it will be clearer for you now.    Read and do Step 1 very carefully and do not go further with it until that step is done and works.

How to use your own Rank Images (http://www.smfsupport.com/support/guides_and_tutorials/guide_how_to_use_your_own_rank_images-t10454.0.html;msg47457#msg47457)
       
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: webworldx on August 11, 2009, 05:26:21 pm
Is there anything you need changing / clarifying in the generator folks?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on August 11, 2009, 05:39:46 pm
Is there anything you need changing / clarifying in the generator folks?

hey webworld!    Your alive  :2funny:  lol

I cannot think of anything -  seems pretty upfront to me. 
I think the confusion with the rank images lies in making sure they are setup the normal way on forums FIRST -  then getting the correct urls.   Ive rewritten the guide a few times to try to help clear that up.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: webworldx on August 12, 2009, 12:44:42 pm
No worries :) :)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: misterspiffy on August 13, 2009, 08:21:55 am
"Put the url of the starfile image you set up for the Membergroup under OLD IMAGE
Put the url of YOUR image under NEW IMAGE"

Do you use the http:// that is included in image swap for the old image?

Also, do we need to host the images ourselves?

Thanks

Edit:  This is the image swap I got.  Does it look right?

<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://pb/pb_web.gif " , "http://images.smfboards.com/ranks/pb/pb_web.gif" ]
img_b[img_b.length++] = [ "http://pb/pb_admin.gif " , "http://images.smfboards.com/ranks/pb/pb_admin.gif" ]
img_b[img_b.length++] = [ "http://pb/pb_founder.gif " , "http://images.smfboards.com/ranks/pb/pb_founder.gif" ]
img_b[img_b.length++] = [ "http://pb/pb_smod.gif" , "http://images.smfboards.com/ranks/pb/pb_smod.gif" ]
img_b[img_b.length++] = [ "http://pb/pb_mod.gif " , "http://images.smfboards.com/ranks/pb/pb_mod.gif" ]
img_b[img_b.length++] = [ "http://pb/pb_5.gif " , "http://images.smfboards.com/ranks/pb/pb_5.gif" ]
img_b[img_b.length++] = [ "http://pb/pb_4.gif " , "http://images.smfboards.com/ranks/pb/pb_4.gif" ]
img_b[img_b.length++] = [ "http://pb/pb_3.gif " , "http://images.smfboards.com/ranks/pb/pb_3.gif" ]
img_b[img_b.length++] = [ "http://pb/pb_2.gif " , "http://images.smfboards.com/ranks/pb/pb_2.gif" ]
img_b[img_b.length++] = [ "http://pb/pb_1.gif " , "http://images.smfboards.com/ranks/pb/pb_1.gif" ]
img_b[img_b.length++] = [ "http://pb/pb_0.gif " , "http://images.smfboards.com/ranks/pb/pb_0.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on August 13, 2009, 09:31:36 am
None of the "OLD IMAGE" links work. Make sure you have the correct link to the image.

Please use code tags ;) It's not required but it makes it much easier to read the code. It is the # on the toolbar when posting ;)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: misterspiffy on August 13, 2009, 10:23:22 am
None of the "OLD IMAGE" links work. Make sure you have the correct link to the image.

Please use code tags ;) It's not required but it makes it much easier to read the code. It is the # on the toolbar when posting ;)

I'm not understanding.  I thought we were supposed to input the old image links and then the new ones into the image swapper.  Will the code I posted work?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on August 13, 2009, 10:52:57 am
this link:

http://pb/pb_0.gif

Is not an image.

What you need to do is go to the Starfile Images page and choose one. PUt the name of the image in the block for Group Image in the membergroups section. Put the link for that image in the OLD IMAGE section of the code. Then place the URL for the image you want to appear instead of that image in the NEW IMAGE section.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: misterspiffy on August 13, 2009, 11:58:39 am
this link:

http://pb/pb_0.gif

Is not an image.

What you need to do is go to the Starfile Images page and choose one. PUt the name of the image in the block for Group Image in the membergroups section. Put the link for that image in the OLD IMAGE section of the code. Then place the URL for the image you want to appear instead of that image in the NEW IMAGE section.
this link:

http://pb/pb_0.gif

Is not an image.

What you need to do is go to the Starfile Images page and choose one. PUt the name of the image in the block for Group Image in the membergroups section. Put the link for that image in the OLD IMAGE section of the code. Then place the URL for the image you want to appear instead of that image in the NEW IMAGE section.
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/pb/pb_web.gif" , "http://www.misterspiffy.net/images/pb_web.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/pb/pb_admin.gif" , "http://www.misterspiffy.net/images/pb_admin.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/pb/pb_founder.gif" , "http://www.misterspiffy.net/images/pb_founder.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/pb/pb_smod.gif" , "http://www.misterspiffy.net/images/pb_smod.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/pb/pb_mod.gif" , "http://www.misterspiffy.net/images/pb_mod.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/pb/pb_5.gif" , "http://www.misterspiffy.net/images/pb_5.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/pb/pb_4.gif" , "http://www.misterspiffy.net/images/pb_4.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/pb/pb_3.gif" , "http://www.misterspiffy.net/images/pb_3.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/pb/pb_2.gif" , "http://www.misterspiffy.net/images/pb_2.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/pb/pb_1.gif" , "http://www.misterspiffy.net/images/pb_1.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/pb/pb_0.gif" , "http://www.misterspiffy.net/images/pb_0.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>

Ok, I am hoping this is correct.

Edit:  It wasn't correct.  Corrected it.  It works beautifully.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on August 13, 2009, 12:12:17 pm
are you changing the images... to the same image?

Yes that's correct but the images are the exact same...
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: misterspiffy on August 13, 2009, 12:35:18 pm
are you changing the images... to the same image?

Yes that's correct but the images are the exact same...

We can't use the starfile images?  They appear to be working on my board.  At least the founder membergroup is.  I have noone in other membergoups so who knows about those.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: misterspiffy on August 13, 2009, 12:46:32 pm
We can't use the images in the starfile?  I uploaded them to the server for my other domain.  The images seem to be working fine at least for my membergroup.  Don't actually have any members besides my wife and myself so I don't know about the other membergoups.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on August 13, 2009, 12:54:53 pm
yes you can use those images. You were just wanting them hosted through your domain? Ok I get it.

Yea it works ;)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: misterspiffy on August 13, 2009, 01:19:52 pm
yes you can use those images. You were just wanting them hosted through your domain? Ok I get it.

Yea it works ;)

Ok great.  I might as well put the hosting plan I bought on my other plan to use.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: webworldx on August 15, 2009, 09:00:51 am
If you want, I can put a warning if someone tries to enter the old image URL's in the generator telling them to find them new ones?

Just let me know the old and new image paths :)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: webworldx on August 15, 2009, 03:34:27 pm
http://www.ifcode.com/javascript/ImageSwapSMFv2.html

Does anyone want to try that and give me some feedback?

The preview images are supposed to be small, so don't think that's actual size. Let me know what you think! (the new code should be slightly faster too) :)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: webworldx on August 22, 2009, 03:09:13 pm
Any feedback folks? :)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: lansop on September 22, 2009, 10:02:15 am
I'm having trouble with this part:

Paste it into your Footer   (Admin > Manage Styles > Edit HEader/Footer)

There doesn't seem to be a "Manage Styles" Section for me. What am I missing  :-\

Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on September 22, 2009, 02:21:32 pm
You are not using a SMF For Free hosted forum.

You'll need to go to http://simplemachines.org for support
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Lawlzpk on October 03, 2009, 04:41:24 pm
Im new to these forums and this is my first time posting but i dont know what is wrong with this :(

Quote
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/1starred.gif" , "http://i33.tinypic.com/n3ptzd.jpg" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: LaundryLady on October 03, 2009, 09:47:27 pm
Ok, is it on your forums now?  What is your forum url?  Have you read thru this entire thread to see if there is anything that has changed?

Did you assign the star gif to the person that you wanted to have the new image?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Gir on October 04, 2009, 07:07:35 pm
I'm not positive if i've given feedback on this so,
o.O
whatever i will anyway.

I think some people just don't get the hang of it as soon as others.
I knew i had a hard time doing this the first time but it's easier now.

Good job overall. ;)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Ranamayank on October 06, 2009, 02:49:14 pm
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_v.gif " , "http://i34.tinypic.com/rayazm.gif'" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_sp.gif" , "http://i36.tinypic.com/2nvrwif.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_mo.gif" , "http://i38.tinypic.com/28irrc2.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/dl_ranks2/rank_postwhore.gif" , "http://i33.tinypic.com/dc576e.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/dl_ranks2/rank_mvp.gif" , "http://i35.tinypic.com/6hibli.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/GamePad_1/PDT_Rang_mo.gif" , "http://i38.tinypic.com/2hrlwqt.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/gmask/gmask_6.gif" , "http://i35.tinypic.com/145ue9.gif" ]


var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>

this is the code i got from website.. and the images are still the same...
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: LaundryLady on October 06, 2009, 06:01:21 pm
*takes deep breath*  Ok, is it on your forums now?  What is your forum url?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Ranamayank on October 06, 2009, 10:11:56 pm
computerguides.smfforfree3.com
and yes it is on my forums atm...
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: InsertName on October 07, 2009, 05:53:33 am
thanks for the guide
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Ranamayank on October 08, 2009, 06:38:31 pm
erm can someone help me plz?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on October 08, 2009, 08:49:13 pm
That gives us no information.

Please give us more detail about what you're having trouble with and your forum url.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Ranamayank on October 08, 2009, 09:44:29 pm
Quote
That gives us no information.

Please give us more detail about what you're having trouble with and your forum url.

laundrylady was helping me.. and i eve gave her my forum url.. (its on 7th page)
well i will psot details on this too...

Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_v.gif " , "http://i34.tinypic.com/rayazm.gif'" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_sp.gif" , "http://i36.tinypic.com/2nvrwif.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/Futura_6/PDT_Rang_mo.gif" , "http://i38.tinypic.com/28irrc2.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/dl_ranks2/rank_postwhore.gif" , "http://i33.tinypic.com/dc576e.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/dl_ranks2/rank_mvp.gif" , "http://i35.tinypic.com/6hibli.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/GamePad_1/PDT_Rang_mo.gif" , "http://i38.tinypic.com/2hrlwqt.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/gmask/gmask_6.gif" , "http://i35.tinypic.com/145ue9.gif" ]


var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>

this code.. i have it on my forums.. but the image doesnt seems to be changed...


Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on October 09, 2009, 07:25:53 am
Well how would you know if it changed or not? You don't have anyone else posting on your forum... so the images won't show up in their posts...

Do this for me.

Go to a post and put this in it:
[img]http://images.smfboards.com/ranks/Futura_6/PDT_Rang_sp.gif[/img]

You also have an unneeded space on the first line after http://images.smfboards.com/ranks/Futura_6/PDT_Rang_v.gif
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Ranamayank on October 09, 2009, 07:49:09 am
well i posted the img on my forums but the pic is the same... (sponser with 5 music player buttons)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Ranamayank on October 14, 2009, 08:02:59 pm
i might just forget about this...
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Uninvited on December 05, 2009, 12:04:36 pm
Does not work for me:

wts the problem do u know?
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/LED/alt_rankadmin.gifks/7AMDadm.gif" , "http://yfrog.com/1557817597p" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/ModRank.gif" , "http://" ]
img_b[img_b.length++] = [ "http://" , "http://" ]
img_b[img_b.length++] = [ "http://" , "http://" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on December 05, 2009, 12:10:32 pm
The url for the "new" image has to be the direct url to the iimage.

The first one you have setup you put this for the new image url:  http://yfrog.com/1557817597p
That is not correct.   You need the direct link for that image there so that should be:
http://img41.yfrog.com/img41/7281/57817597.png
Where it says "Links to Share" on that page choose the one that says  "Direct"

The second one you have setup you have only this for the new image:  http://

Second thing:   The urls for the "old" images.   
Make sure to read that part of the guide very carefully.
They have to be the urls from the starfile image page.   
Those image urls should start with:   http://images.smfboards.com/
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Uninvited on December 05, 2009, 12:12:55 pm
erm ...could be possible if u remake correctly the code?
Bc my english they confuse me sometimes .
Im beg you.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on December 05, 2009, 12:17:51 pm
So long as you have the image set up correctly for your Administrator Group this should work for you:

Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/LED/alt_rankadmin.gif" , "http://img41.imageshack.us/img41/7281/57817597.png" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on December 05, 2009, 12:19:03 pm
hold on a sec -  I need to correct something in that, sorry
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on December 05, 2009, 12:26:36 pm
ok I edited the code - so long as you have the image setup correctly for the Admin Group the code will work   

You should have this in the "Star Image Filename" box for that Membergroup:
LED/alt_rankadmin.gif
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Uninvited on December 05, 2009, 12:53:56 pm
i dunno why but i cannot use it btw i have got a lots OF HEADER /FOOTERS
and also i dunno if is a problem that;)
anyway ty for helping me;)

its weird...
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Andrew on December 05, 2009, 12:57:04 pm
Uninvited: What is your forum URL? I would like to take a look at the source of your forum and see if there are any errors.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on December 05, 2009, 01:08:30 pm
i dunno why but i cannot use it btw i have got a lots OF HEADER /FOOTERS
and also i dunno if is a problem that;)
anyway ty for helping me;)

its weird...


It could be if the code got mixed up when you put it in.   If you post your forum url as Andrew asked, he'll take a look and see if he can find out what is going on with it.    I did check back to find your url earlier and you had a different image set up for your admin rank but I dont know if its the same forum or not so please post it ok?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Uninvited on December 05, 2009, 01:10:49 pm
Okay here it is:
http://edlemu.smfforfree3.com/index.php
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on December 05, 2009, 01:12:29 pm
You have a different image set up for your Admin Membergroup then what you put in the code; that is why it is not working.   Hold on a moment and Ill fix the code for you.   (that and the codes in both your header and footer)

 
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Andrew on December 05, 2009, 01:13:43 pm
I see this is in your headers, it should be in your footers:
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/LED/alt_rankadmin.gif" , "http://img41.imageshack.us/img41/7281/57817597.png" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>

I think that's really the only error I see now.

EDIT:
Sorry! It's in both your headers AND footers, remove it from your headers.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on December 05, 2009, 01:14:46 pm
Andrew thanks  -  actually he has the wrong image url there too - read my note above.


Uninvited - delete that from your header and your footer.
Put THIS one in your footer.   This one will work.

Here you go:

Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/steel/white4.jpg" , "http://img41.imageshack.us/img41/7281/57817597.png" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Uninvited on December 05, 2009, 01:43:47 pm
ty a lot it works:)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: KrazY on December 11, 2009, 07:03:21 am
Perfect!
Its a really useful guide you've gave us!

Regards,
KrazY.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: xx_pwn3d_xx on December 11, 2009, 11:16:27 pm
Thanks sibyl! Was confusing at start but got it.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: rebelman2 on December 29, 2009, 11:43:42 am
didn't work
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/starmod.gif" , "http://i213.photobucket.com/albums/cc248/ownagepker/donator.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Andrew on December 29, 2009, 12:11:52 pm
didn't work
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/starmod.gif" , "http://i213.photobucket.com/albums/cc248/ownagepker/donator.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>

Are you using this image for the membergroup?:
(http://www.smfboards.com/ranks/starmod.gif)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: brad1571 on February 10, 2010, 11:31:04 am
Help! Nothing happens!

I've added to the footer and everything. It just shows up as the original picture. :S
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on February 10, 2010, 11:57:35 am
We need more information.

1.  Your forum url (with the code in place)

2.  Post your code so we can look at it.

Title: Re: [Guide] How to Use Your Own Rank Images
Post by: brad1571 on February 12, 2010, 02:23:21 pm
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/AppleBlue/rangsp.gif" , "http://img163.imageshack.us/img163/5383/eqqowm.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Andrew on February 12, 2010, 02:29:42 pm
We still need your forum URL. ;)

The code appears to be correct. Make sure that the image in the first sport ((http://www.smfboards.com/ranks/AppleBlue/rangsp.gif)) is the one that is current rank image for that membergroup.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: brad1571 on February 13, 2010, 02:36:02 am
We still need your forum URL. ;)

The code appears to be correct. Make sure that the image in the first sport ((http://www.smfboards.com/ranks/AppleBlue/rangsp.gif)) is the one that is current rank image for that membergroup.

FORUM:  http://ruinedscapethemassiveonli.smfforfree.com/
LINK WHERE USER POSTED: http://ruinedscapethemassiveonli.smfforfree.com/index.php/topic,42.msg156.html#new
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on February 13, 2010, 02:42:53 am
You didnt follow Step 2 correctly and used the wrong link for the original image.


This is the link you need to use for the "old" image:

http://images.smfboards.com/ranks/AppleBlue/rangsp.gif
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: brad1571 on February 13, 2010, 02:54:44 am
I opend my "Member Groups" and clicked on the Doantor,
It had that santa hat I wanted. I pressed save and it did NOTHING :S

(http://img32.imageshack.us/img32/1337/helprv.png)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on February 13, 2010, 02:57:08 am
Read this:

Quote

STEP 2:
You need to know the url of the images you just set up so you can swap them.
IMPORTANT:   It is important that you have the CORRECT url or this will not work.  It has to be the url of the image that is displayed on the starfile image page NOT the one on the Membergroup page.
From the starfile image page:
Right mouse click on the image you set up for the Membergroup.
Click Propertys.
You will see the url there.
Copy the url.
Make sure the image starts with:   http://images.smfboards.com
NOT:  http://www.smfboards.com




I'll explain why you cannot get the url from the Membergroup Page:
The url for the image in the posts is a different url then the url on the Membergroup Page.
The code needs to find the image url that is in the Post.  (you get that from the starfile image page NOT the Membergroup page.
You used the code from the Membergroup Page.   The code could not find that url in a post so it did not swap the image.

;)

Change the url for the old image in the code  to the url I gave you and it will work fine
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: brad1571 on February 13, 2010, 03:01:56 am
Thanks ;)

Works PERFECT!
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on February 13, 2010, 03:02:49 am
;)    Its a common mistake.  I keep rewriting the guide to try to make that clearer - just tweaked it again/shortened it - may be clearer now
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: R0b3rt on March 28, 2010, 03:37:13 am
Great guide, Simply Sibyl! It works correctly. :)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: dosomejava on April 06, 2010, 12:19:41 am
wow very helpdful ty i used this
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Prav on April 17, 2010, 11:48:17 am
I got a problem im using smfforfree.com site to make forums and u can make ur own forum rank..so i did and i uploaded it gave me this ksdfheskfk.jpeg and png and i copied and pasted onto it but it shows image of ***** this and not actuall image?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Andrew on April 17, 2010, 12:11:52 pm
Can your provide us with a screenshot of how the image is appearing?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: DTUMan on May 29, 2010, 11:45:57 pm
Edit, nevermind about that.

Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/staradmin.gif" , "http://img35.imageshack.us/i/wocgeneral.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/star.gif" , "http://img34.imageshack.us/i/wocmember.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/stargmod.gif" , "http://img687.imageshack.us/i/wocofficer.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>

What is wrong with this code for it not to work?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Rilex on June 16, 2010, 09:53:32 am
The second url in your code isnt good.

This one...     

http://www.runehq.com/image/specialreports/rare/yellowpartyhat.gif


That link inst working?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on June 16, 2010, 10:04:05 am
The second url in your code isnt good.

This one...     

http://www.runehq.com/image/specialreports/rare/yellowpartyhat.gif


That link inst working?

It's not a valid image location :P
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Rilex on June 17, 2010, 06:38:01 am
The second url in your code isnt good.

This one...     

http://www.runehq.com/image/specialreports/rare/yellowpartyhat.gif


That link inst working?

It's not a valid image location :P


Someone that  can give me a working ?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on June 17, 2010, 07:31:32 am
http://www.global-rs.com/img/yellow_partyhat.gif
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: EpicPure on August 04, 2010, 09:29:09 am
Code: [Select]
<script type='text/javascript'>
/* Image Changes on Page
SMF For Free 2009 - WWX */
function swap_img(){
var img_b = new Array();
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/dl_ranks2/rank_admin.gif" , "http://i40.tinypic.com/f5kpu.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks//dl_ranks2/rank_moderator.gif " , "http://images3.wikia.nocookie.net/__cb20090703194722/runescape/images/archive/e/e8/20090815152626!White_party_hat.PNG" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/dl_ranks2/rank_0.gif" , "http://i39.tinypic.com/2mgjggy.png" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks//dl_ranks2/rank_1.gif " , "http://www.impactpk.org/forums/images/ranks/rune.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks//dl_ranks2/rank_2.gif " , "http://www.impactpk.org/forums/images/ranks/barrows.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks//dl_ranks2/rank_3.gif " , "http://www.impactpk.org/forums/images/ranks/fire.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks//dl_ranks2/rank_4.gif " , "http://www.impactpk.org/forums/images/ranks/range.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks//dl_ranks2/rank_5.gif " , "http://www.impactpk.org/forums/images/ranks/mage.gif" ]
img_b[img_b.length++] = [ "http://images.smfboards.com/ranks//dl_ranks2/rank_6.gif " , "http://www.impactpk.org/forums/images/ranks/armydal.gif" ]

var a_i = document.getElementsByTagName('IMG');
for(i=a_i.length-1;i>=0;i--) for(j=0;j<img_b.length;j++) if(a_i[i].src == img_b[j][0]) a_i[i].src = img_b[j][1];
}
swap_img();
</script>


Website: http://newforum.smfforfree3.com/index.php
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on August 05, 2010, 10:20:48 am
Epic,

You have 2 backslashes in some of the image links.

http://images.smfboards.com/ranks//dl_ranks2/rank_3.gif

should be this

http://images.smfboards.com/ranks/dl_ranks2/rank_3.gif


with NO SPACE between the image link and the last quotation mark.

Right now you're links look like this....

"http://images.smfboards.com/ranks//dl_ranks2/rank_3.gif "

elminate the space and the double backslash to get this

"http://images.smfboards.com/ranks/dl_ranks2/rank_3.gif"


If this doesn't help, please let us know ;)

Title: Re: [Guide] How to Use Your Own Rank Images
Post by: godsword on August 29, 2010, 07:35:44 pm
where do u find the codes for yellow,red,green partyhats and santa hat :(
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Seldom Fail on August 29, 2010, 09:16:19 pm
uhh. google images.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Dustin on September 28, 2010, 05:45:15 pm
Code don't work:


(yeah, it's on my footer)
But the original ban image shows up...


Code: [Select]
<script type='text/javascript'>
/* Image Changes on Page
SMF For Free 2009 - WWX */
function swap_img(){
var img_b = new Array();
img_b[img_b.length++] = [ "christmas_stockings_ranks/rank_banned.gif " , "http://forum.sa-mp.com/images/ranks/pinkdead.gif" ]

var a_i = document.getElementsByTagName('IMG');
for(i=a_i.length-1;i>=0;i--) for(j=0;j<img_b.length;j++) if(a_i[i].src == img_b[j][0]) a_i[i].src = img_b[j][1];
}
swap_img();
</script>
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on September 28, 2010, 05:48:16 pm
Quote
img_b[img_b.length++] = [ "christmas_stockings_ranks/rank_banned.gif " , "http://forum.sa-mp.com/images/ranks/pinkdead.gif" ]

Please go back to the instructions and read where to get the url for the "old" image - Step 2
The url you put isnt complete/correct.   The code has to have the correct image url for that image.


Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Dustin on September 28, 2010, 05:51:07 pm
So it should be:


http://images.smfboards.com/ranks/christmas_stockings_ranks/rank_banned.gif


?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on September 28, 2010, 05:52:22 pm
Yes, that should be correct.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Dustin on September 28, 2010, 05:53:28 pm
W00t, it works, thank you simply!
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on September 28, 2010, 05:54:33 pm
You are welcome  :0)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: ut shady on April 19, 2011, 02:19:47 am
Forum, click here! (http://hp.freesmfhosting.com/index.php/topic,2.0.html)
Code: [Select]
<script type='text/javascript'>
/* Image Changes on Page
SMF For Free 2009 - WWX */
function swap_img(){
var img_b = new Array();
img_b[img_b.length++] = [ "http://http://images.smfboards.com/ranks/1staraqua.gif" , "http://http://i55.tinypic.com/35ktqnt.gif" ]

var a_i = document.getElementsByTagName('IMG');
for(i=a_i.length-1;i>=0;i--) for(j=0;j<img_b.length;j++) if(a_i[i].src == img_b[j][0]) a_i[i].src = img_b[j][1];
}
swap_img();
</script>


The problem is, it still has the old image...

EDIT: Figured it out, put 2 http:// in front of old/new images. Sorry for this post.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Role Play Nut on June 04, 2011, 11:26:21 pm
The link to the Swap images generator doesn't work.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: ut shady on June 05, 2011, 09:00:24 am
http://www.smfsupport.com/support/smf-for-free-codes-and-support/(code)-swap-images-on-page-2017/
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simply sibyl on June 05, 2011, 09:41:09 am
Appears the generator made by webworldx is offline again.  Until/if its put back up again this is the code the generator created.  Since this has happened before Im going to add the following to the setup directions.


You can do this manually:


(The code goes in the Footer)

Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = ["OLD IMAGE URL" , "NEW IMAGE URL"]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>


Replace OLD IMAGE URL with the url of the image you want to replace
Replace NEW IMAGE URL with the url of the new image you want to use

Add more of these lines if you have several images to swap:

img_b[img_b.length++] = ["OLD IMAGE URL" , "NEW IMAGE URL"]
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: simplyaura on January 26, 2013, 11:05:51 pm
i think i put this in the wrong section sorry
aura
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: ibneaiyan on August 31, 2013, 11:04:27 am
These Dreamweaver 8 tutorials will help you quickly get up to speed on using this powerful web development tool to create and manage your website.

you can make your trip safe by motorhome hire (http://"http://www.betterthancamping.co.uk/")
please have look at our motorhomes for hire (http://"http://www.betterthancamping.co.uk/")
get your own luxury motorhome hire (http://"http://www.betterthancamping.co.uk/")
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: fanta on October 08, 2013, 11:15:41 pm
In case you havent noticed, the URL doesnt work.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: kaichisendou on March 28, 2015, 07:01:34 am
I have done everything as you said... but image in the thread when we post is still the same.. so what to do now?
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Fly34567 on August 09, 2015, 11:50:29 pm
Just in case someone needs help for me http://cdn.smfboards.com/ranks/staff.bmp was what I used.
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: e a t p l z on October 18, 2015, 11:41:15 am
Hi, I got it to show on the "Membergroup" Page that it's working. But on the actual forum itself, my image is not displayed.

Here is my code;

Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = ["http://images.smfboards.com/ranks/star.gif" , "http://i58.tinypic.com/210nlo9.jpg"]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>


Here is the picture of membergroups;

(http://i60.tinypic.com/qn3g34.jpg)

I changed the settings because I want that image and title to display, but I still want administrator settings on the account.

(http://i59.tinypic.com/2vttkir.jpg)

And on the forum;

(http://i61.tinypic.com/10erm35.jpg)
Title: Re: [Guide] How to Use Your Own Rank Images
Post by: Tonyyy on June 25, 2016, 01:29:45 am
Hello, I just made a forum and don't know much things.
Where to add there code lines to change the ranks pics ?



Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = ["OLD IMAGE URL" , "NEW IMAGE URL"]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>