Dynamic Image Map Based on Pixel Colour

Key Takeaways

• The method of creating a dynamic image map based on pixel color is efficient as it loads quickly, does not require knowledge of which image areas are covered by links, and allows image areas to be any shape or size.
• The process involves a user clicking anywhere on the image, jQuery capturing the x and y coordinates of the click, these coordinates being sent to a PHP control script via Ajax, the PHP script picking the pixel color at the x and y coordinates, matching the hex color value to a country, and sending back the URL of the page for that country.
• This method can be used for responsive design, SEO, and performance optimization through techniques like caching and image compression, making it a versatile solution for creating interactive images and enhancing user experience.

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

1. User clicks anywhere on the image
2. jQuery captures the x and y coordinates of where the user clicked
3. x and y coordinates sent to PHP control script via Ajax
4. PHP script gets the image locally and picks the pixel colour at the x and y coordinates
5. PHP script gets the country that matches the hex colour value
6. PHP script sends back the url of the page for that country
7. 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:

< ?php
if(isset($_REQUEST['x'])) {
    $x = $_REQUEST['x']; $y = $_REQUEST['y'];
    $im = imagecreatefrompng($domain."/images/worldmap-coloured.png");
    $rgb = imagecolorat($im, $x, $y);
    $r = ($rgb >> 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) < 2?'0':'').$r;
        $color .= (strlen($g) < 2?'0':'').$g;
        $color .= (strlen($b) < 2?'0':'').$b;
        return $color;
    }
    $hex = rgb2html($r, $g, $b);
    //echo ("R".$r." G".$g." B".$b."  hex=#".$hex);
    $debug = ("R".$r." G".$g." B".$b."  hex=#".$hex);
    $html = "";
    $qry = "SELECT country FROM `countries` WHERE hex_colour= '".$hex."' LIMIT 1;";
    if (mysql_query($qry)) {
        $result = mysql_query($qry);
        while ($row = mysql_fetch_array($result,MYSQL_ASSOC)){
           $country_filename = convertToFileName($row{'country'});
            $html = $domain."/".$country_filename."/";
            $debug .= " " . $country_filename;
        }
    }
    mysql_close($dbh);
    echo $html;
}
?>

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).

Frequently Asked Questions (FAQs) about Dynamic Image Map Based on Pixel Colour