By Sam Deering

Dynamic Image Map Based on Pixel Colour

By 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


  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;
	   //	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){
			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).

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

  • Binu V Pillai

    Amazing!!!!!!!!!!. This tutorial was very simple and informative.

    Expecting more like this.


    • Morlacheerful

      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.

      • jquery4u


        The demo is working as far as i can see. Go to 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: 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

    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;

  • Learner

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

Get the latest in JavaScript, once a week, for free.