Programming

roman empire map 117AD

HTML Image Maps

The Beauty of Clickable Maps

Most of you are probably aware of HTML Image Maps. It’s where a standard HTML image has clickable sections that act as hyperlinks.

Here is an example that I whipped up a few years ago (on the homepage): http://homepage.cs.latrobe.edu.au/mj2romeo/assign/assign.php

The code is reproduced below:

<img src="map.png" alt="roman empire map 117AD" usemap="#empire" />
<map name="empire">
<area shape="rect" coords="362,403,431,424" alt="Rome" href="rome.html" />
<area shape="rect" coords="727,626,782,687" alt="Petra" href="petra.html" />
<area shape="rect" coords="831,396,884,445" alt="Armenia" href="armenia.html" />
</map>

You might be wondering how to determine the coordinates. For rectangles, you need to provide four coordinates. The horizontal position of the top-left corner, the vertical position (from the top of the image) of the top-left corner, the horizontal position of the bottom-right corner and the vertical position of the bottom-right corner.

Image maps can cause significant accessibility problems (and can be hard work to maintain), so you should restrict their use to places where they are really appropriate, such as (surprise) a map, where clicking on the parts of the map gives information about the relevant area. If you plan to make an image map out of a list of words just to make your navigation prettier, then you are using them for the wrong reason, and you should use a normal list styled with CSS.

Please note that you can also use different shapes as clickable areas besides rectangles (e.g. circles, polygons).

Simple PHP Hit Counter

No need for a service when you can do it for free!

On many pages it is common to have a generic hit counter displayed at the bottom of each page. Now it goes without saying that this is a very simple metric that arguably has zero intrinsic value. If a user spams F5 on your beloved homepage (or a sneaky web dev wants to impress his friends), this piece of code will just keep incrementing its value.

Of course, these days there’s tons of tools available to analyse web hits from various dimensions – hits by the country, unique hits, hits by second/day/month/year/etc.

Nevertheless, sometimes you just want to whip up a quick script with 0 effort.

The code is below:

// open file
$fp = fopen("hitcount.txt", "r");
$count = fread($fp, 1024); 		// grab current hit counter value
fclose($fp);
$count = $count + 1;			// close file and increment counter by 1

// Display the number of hits
echo "Page views: $count";

// write new counter vale to file
$fp = fopen("hitcount.txt", "w");
fwrite($fp, $count);
fclose($fp);

Enjoy!