Dynamic Image Map Based on Pixel Colour
So today I created a html image map which creates dynamic links based on the color of the pixel that the user clicked. The reason for creating this was because the map was a vector map of the world and as you know all countries have varying sizes and it would be impossible to create a normal point/array based image map… it would simple be too huge to store and would take too long to load.
Pro’s of this method
- It loads really fast
- No need to know what areas of the image are covered by what for links
- Image areas can be any shape or size
How it works
- User clicks anywhere on the image
- jQuery captures the x and y coordinates of where the user clicked
- x and y coordinates sent to PHP control script via Ajax
- PHP script gets the image locally and picks the pixel colour at the x and y coordinates
- PHP script gets the country that matches the hex colour value
- PHP script sends back the url of the page for that country
- jQuery redirects to the page returned via Ajax call
Instructions on how to setup:
Create the image with unique hex values (I used adobe illustrator with a free vector based image).
Store the hex colour values of the pixels contained within the boundaries of the each country in your database.
jQuery Code:
jQuery(document).ready(function($) {
$('#theworldmapimage').live('click', function(ev) {
var X = $(this).offset().left;
var Y = $(this).offset().top;
mouseX = ev.pageX - X;
mouseY = ev.pageY - Y;
//FIX X AXIS ERORR MARGIN
// mouseY -= 5;
if (mouseX > 500) { mouseX -= 13; }
//alert("x="+mouseX+" y="+mouseY);
$.get("../php/php-functions/phpfunc-imagemap.php",{x: mouseX ,y: mouseY}, function(data){
//alert(data);
if (data != '') {
//alert(data + " " +"x="+mouseX+" y="+mouseY);
window.location.replace(data); //load the url of the clicked country
}
else {
//alert("no data");
}
});
});
});
PHP Code:
> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
function rgb2html($r, $g=-1, $b=-1)
{
if (is_array($r) && sizeof($r) == 3)
list($r, $g, $b) = $r;
$r = intval($r); $g = intval($g);
$b = intval($b);
$r = dechex($r<0?0:($r>255?255:$r));
$g = dechex($g<0?0:($g>255?255:$g));
$b = dechex($b<0?0:($b>255?255:$b));
$color = (strlen($r)
The final image looks like this:
See Demo (Click on the “Show world map” to show the dynamic image map, then click on any country).