GeoHackr • com

This post isn’t very much about GeoHacking, but for everyone who uses the ClustrMaps application for their website might like this topic I am about to talk about.

As you might have notices, we have been working on the style of GeoHackr for the past couple of days; and one thing we wanted to work on was the website’s overall XHTML validation. We have a bit of a softspot for web standards!

One of the major problems that we were facing with the redesign was the code used for ClustrMaps. It is not XHTML compliant. This is the coding for Clustermaps:

1         <a href="http://www3.clustrmaps.com/counter/maps.php?url=http://geohackr.com"\
2          id="clustrMapsLink">
3         <img src="http://www3.clustrmaps.com/counter/index2.php?url=http://geohackr.com"\
4          style="border:0px;" alt="Locations of visitors to this page"\
5          title="Locations of visitors to this page" id="clustrMapsImg"\
6          onerror="this.onerror=null;\
7          this.src='http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg';\
8          document.getElementById('clustrMapsLink').href='http://www2.clustrmaps.com';" />
9         </a>

As you might see, the “onerror” portion of the IMG tag is not XHTML compliant. If you go to ClustrMaps website, they suggest the following:

VALIDATION/XHTML PROBLEMS: ClustrMaps HTML is causing my page to fail a W3C validation test, or my blog/service provider to modify or reject it. What can I do?

As of 21st September 2006 you will see, on your Admin page, several choices for your HTML code, including one that is XHTML1.1 compliant. All are much cleaner than the older code. You can just substitute the new code for you old code.

Alternatively, if you want to stick with the old code, There are several issues that can be manually edited/fixed:

1. Neither the ‘border’ attribute nor the ‘onError’ code we use are XHTML 1.1 compliant; we’re working on a more elegant solution, but you could either live with it ‘as is’ for now (which is what we would recommend), or as a temporary ‘workaround’ you could manually edit out the offending code… in particular

(a) just delete

border=1

and

(b) also delete everything from the beginning of

onError

right up to the final closing ‘>’ (but don’t delete that closing ‘>’ itself).

Please note, however, that the onError code serves an extremely useful ‘failsafe’ purpose: in the very rare and unlikely event that our server goes down, you’ll just get a ‘broken image’ icon where the thumbnail map should be! In contrast, with the original onError code left alone, you would instead get a nice little ‘blank map with a holding message’.

2. Add a slash character “/” at the end of the img tag, and just before the “>” character, so that it looks like " /> " (without the quotes).

Your simplified HTML code would then look like this, with your own registered URL in place of the XXXXX below:

<a href=“http://clustrmaps.com/counter/maps.php?url=XXXXX” id=“clustrMapsLink”>
<img src=“http://clustrmaps.com/counter/index2.php?url=XXXXX” />
</a>

A more eligant solution, which we found in our research is the following:

 1         <a href="http://www3.clustrmaps.com/counter/maps.php?url=http://geohackr.com" id="clustrMapsLink">
 2         <img src="http://www3.clustrmaps.com/counter/index2.php?url=http://geohackr.com" style="border:0px;"\
 3          alt="Locations of visitors to this page" title="Locations of visitors to this page"\
 4          id="clustrMapsImg" /> 
 5         <script type="text/javascript"> 
 6                document.getElementById("clustrMapsImg").onerror = function(){
 7                      this.src='http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg';
 8                };
 9                document.getElementById('clustrMapsLink').onerror = function (){
10                      this.href='http://www2.clustrmaps.com';
11                };
12         </script> 
13         </a> 
14 <

You just need to move the “onerror” functions to below the IMG tag. Hope this helps in the future for people wanting to use the ClustrMap app for your website.