Forum Replies Created
-
WARNING!!! TECHNICAL STUFF AHEAD!!!
Here’s an interesting method I worked out. It uses Java Script and CSS and because of that, it will only work on pages that you can fully edit, such as a personal home page that you get from your ISP.Here’s what you need:
1. The URL of your stat button image. Go to your profile page, right click on the image and pick “Copy Image Location” or whatever your browser calls it.
2. A 44×44 graphic to use as the logo which will be overlaid on the button. I used this one:
Feel free to save that to your own personal webspace instead of directly linking to this one, as it might not always be there.3. This bit of Java Script: (Note: you need to eliminate the space in the word ‘scr ipt’ at the top and bottom. The forum software wouldn’t let me enter the word ‘script’ just in case I was trying to hack the forums…)
function overlay()
{
var button_x = button_y = 0;
obj=document.getElementById('my_stat_button');
if(obj.offsetParent)
while(1)
{
button_x += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
button_x += obj.x;
obj=document.getElementById('my_stat_button');
if(obj.offsetParent)
while(1)
{
button_y += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
button_y += obj.y;
document.getElementById('logo').style.left=(button_x+3)+'px';
document.getElementById('logo').style.top=(button_y+3)+'px';
document.getElementById('logo').style.zindex=20;
document.getElementById('logo').style.visibility='visible';
}
Here’s how it all comes together:
On your HTML page, put the stat button where you want it like normal, inside an
tag:
You need to make one little change, however. You need to add ‘id=”my_stat_button”‘ to your
tag so it now looks like this:
What that just did was to give that button a name so the JavaScript can refer to it easily.
Next, add this bit of code to put the overlay logo on your page. It doesn’t really matter where you put it, as the Java Script is going to reposition it elsewhere, anyway. Personally, I put it just before the tag at the botton of your HTML:
The src= can be any graphic you want, but it should be 44×44 pixels. Note that the
tag is surrounded by
tags. That’s important.Next, take that Java Script above and paste it into your page, just before the tag at the top.
Finally, change your
tag to readWhat this does is automatically call the overlay() function as soon as your page is done loading.
That’s it! Here’s a working example here.
Disclaimer: I’ve only tested it with Firefox and IE6. It won’t work if people are using older browsers or have Java Script disabled. I think it will work with Safari as well, but I don’t have a copy here at work to test it out.
@Jeremy wrote:
An alternative would be to modify the stat box image coming back from geocaching.com… the WGA server could be instructed automatically replace the Groundspeak logo with the WGA logo. This would increase the load on the WGA server, as everyone using a stat box with a WGA logo would “hit” the WGA server to get the stat box image file…
I can definitely confirm that this would work…
