Dynamic Image Map Based on Pixel Colour

Sam Deering

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

dynamic-image-map-process

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

vector-map-illustrator

Store the hex colour values of the pixels contained within the boundaries of the each country in your database.

database-hex-codes

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) &amp; 0xFF;
    $g = ($rgb >> 8) &amp; 0xFF;
    $b = $rgb &amp; 0xFF;

    function rgb2html($r, $g=-1, $b=-1)
    {
        if (is_array($r) &amp;&amp; sizeof($r) == 3)
            list($r, $g, $b) = $r;
        $r = intval($r); $g = intval($g);
        $b = intval($b);
        $r = dechex($r&lt;0?0:($r>255?255:$r));
        $g = dechex($g&lt;0?0:($g>255?255:$g));
        $b = dechex($b&lt;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:

worldmap

See Demo (Click on the “Show world map” to show the dynamic image map, then click on any country).

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Pingback: So today I created a html image map...

  • Binu V Pillai

    Hi,
    Amazing!!!!!!!!!!. This tutorial was very simple and informative.
    http://www.jquery4u.com/ajax/dynamic-image-map-based-pixel-colour/

    Expecting more like this.

    Thanks
    Binu

    • Morlacheerful

      Hi,
      is it posible to get a working demo?
      i can not get it to work, but the DEMO link does not work, so i can not check what is wrong, or if i forgot something to setup.

      Would be nice if someone could answer me with a workling DEMO link.
      Kind Regards.
      Morlacheerful

      • jquery4u

        @Morlacheerful,

        The demo is working as far as i can see. Go to http://blogoola.com/ and click “show map” then simply click on any country and that colour is mapped to one in the database and performs the JavaScript redirect.

        If you go directly to the code for the page: http://blogoola.com/js/javascript-animations.js you will see the AJAX image map section which has the code for the demo. The code for the PHP side of things is posted above in the article.

        Hope this helps.
        Sam

  • Sam

    Thanks Binu, much appreciated!

  • Pingback: J.D.'s Developer Widgets » Dynamic Image Map based on Pixel Color

  • Usama

    Thank you very much, it’s really clever technique

  • Learner

    It was very helpful! Thank you very much. The only thing is that

    $r = ($rgb >> 16) & 0xFF;

    $g = ($rgb >> 8) & 0xFF;

    $b = $rgb & 0xFF;

    didn’t work in my case. I’ve changed it for

    $r = ($rgb >> 16) & 0xFF;
    $g = ($rgb >> 8) & 0xFF;
    $b = $rgb & 0xFF;

    • http://jquery4u.com/ jQuery4u

      Is that not the same thing?

  • Learner

    in your example of .php file “&” is shown as “&аmр;”

    • http://jquery4u.com/ jQuery4u

      thanks