Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Swap out any image
Mottie (MVP) 7/21/2008 8:56 PM EST : Swap out any image
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

I personally don't like the new blog image. To me that's the icon for an RSS feed. So I decided to make this script to swap the image out instead of completely hiding it!

This will actually work with ANY image on your site. Like the ugly control panel image or any of the mail box images.

Setup
  • Find out the name of the original image on the page you want to swap out. This name will replace the text in green.
  • Get the URL of an image with which you want to replace the original. This URL will replace the text in blue.
  • Determine the size of the replacement image. You can adjust the image size or leave it blank for the original image size. Replace the text in red with the desired width and height of your replacement image.
  • The code below is already setup with the "message" and "blog" images, but you may not like the images I chose since I threw them together quickly.
Code
<script type="text/javascript">
var imageswap = new Array();
/*
Add images to swap as follows
imageswap.push (["IMG NAME ON PAGE", "URL TO NEW IMAGE", "WIDTH", "HEIGHT"]);
*/

imageswap.push (["email_add.png", "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/newmail.gif", "16", "16"]);
imageswap.push (["BlogViewBubble.png", "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/blog.gif", "16", "16"]);

// Don't change anything below
// ***************************
function replaceImg() {
var x = document.getElementsByTagName("img");
 try {
  for (j=0; j < x.length; j++) {
   for (k=0; k < imageswap.length; k++) {
    if( x[j].src.match(imageswap[k][0]) ) {
     x[j].src = imageswap[k][1];
     if (imageswap[k][2] != "") x[j].width = imageswap[k][2];;
     if (imageswap[k][3] != "") x[j].height = imageswap[k][3];;
    }
   }
  }
 } catch (err) {}
}
setTimeout("replaceImg();", 1);
</script>


TopBottom

Mottie (MVP) 7/22/2008 7:02 PM EST : RE: Swap out any image
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Well, I just noticed this isn't required anymore since GP now allows you to customize these images. But it will still work with any other images you choose.

Control Panel > Style & Colors > Page Styles

At the bottom there are selections to hide your blog or mail icon, or to replace either with a custom image.


TopBottom

beaggie (Guild Admin) 8/21/2008 7:02 AM EST : RE: Swap out any image
beaggie
Posts: 2399
Zomgawsh Poster

Mottie, the option to disable the mail icon is not working right now, so I'm gonna go with your solution with the javascript code above.

It's just that I have trouble figuring out where that piece of code should go.

Thanks for the help !
_______________
Broy: "But I PvP!"
TopBottom

Mottie (MVP) 8/21/2008 7:25 AM EST : RE: Swap out any image
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Add it to the header or footer of your site (paid subscription) if you want the code to effect every tab of your site. Only add it to a Free Form Text/HTML box on the page where you want to hide the icons if that's the way you want to go.
TopBottom

beaggie (Guild Admin) 8/21/2008 7:37 AM EST : RE: Swap out any image
beaggie
Posts: 2399
Zomgawsh Poster

Thanks Mottie, it works !

Just out of curiosity...does the option to hide the mail icon work for the rest of you ?
Hiding the blog icon works for me, but not the mail.
_______________
Broy: "But I PvP!"
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%