Neil Turner's Blog

Blogging about technology and randomness since 2002

Wristbands on your web sites

Carrying on the Make Poverty History theme (could probably do with a category for these posts…), if you support the MPH cause and haven’t already added a wristband to your site then you may like to consider it.
The code to do so is at the bottom of the Get Involved page but it uses JavaScript’s document.write() function which may mean that you can’t use it on your strictly XHTML compliant pages. In which case, here’s the code you need to do it without JavaScript. First, the HTML:

<div class="mphband">
<img src="http://www.makepovertyhistory.org/
whiteband_mphtranslinkimg.gif" width="163" height="163" usemap="#mphband" class="mphimage" alt="Make Poverty History" />
</div>
<map id="mphband">
<area shape="poly" coords="0,0,163,163,163,133,30,0" href="http://www.makepovertyhistory.org/" alt="Make Poverty History" />
</map>

Next, paste the following CSS in your stylesheet:

.mphband {
position:absolute;
left:100%;
top:0px;
overflow:visible;
height:163px;
width:163px;
background: transparent url(http://www.makepovertyhistory.org/
whiteband_small_right.gif) no-repeat -200px -200px;
margin:0 0 0 -163px;
padding:0;
color:#000;
z-index:1000000000;
border:0;
float:none
}

.mphimage {
border:0
}

And that should do it. Note that this restricts you to the default of a small wristband in the top-right, whereas the JavaScript version lets you have a small or big version on the left or the right. But it does mean that visitors will only request 2 files from makepovertyhistory.org and not 4 like they do with the JavaScript code.
The code posted above is edited slightly from the official code, mainly to ensure XHTML-compliance but also to make it a bit more compact.

4 Comments

  1. Nice. I added this to my sites yesterday πŸ˜‰ Had seen it one a few sites for ages! I also got a wrist band today, but missing a part πŸ™ Suppose I’ll just get another one!
    I might use your HTML version as opposed to the JavaScript version though…
    Add them to all your sites!

  2. Minor nit: your imagemap doesn’t seem to be being applied, in either Firefox 1.0 (.0, I’m in the middle of testing the auto-update) or Moz Suite 1.8b1.
    Perhaps you need to add a name=”” attribute to the map tag? I haven’t checked the spec, but with map being quite old, it probably doesn’t use id interchangeably. Of course, an id attribute is required for validation (ho hum).

  3. Just wanted to say that the bands are a great idea to show support. Saw about it on your blog, visited the MPH website, added your code to a blog I help with, cashzilla, as well as another site I deal with. This then caused me to get a non-virtual band today, from my local Oxfam (fortunately not missing a part). Just goes to show that little gestures, such as a little bit of code, can have positive knock-on effects.

    With Bob Geldof creating a bit of media interest up here in Scotland prior to the G8, hopefully greater knock-on effects may start to happen.

  4. I had the same problem as Mark above with the imagemap not being applied. I fixed it by changing
    <map id=”mphband”> to <map name=”mphband”>
    Unfortunately this does not validate due to the lack of an ‘id’ attribute.
    If we instead use this bit of ugliness:
    <map id=”mphband” name=”mphband”>
    correctly applies the imagemap AND validates.
    HTH!