Advanced Search

Dynamic Image Map Based on Pixel Colour

/ Published in: jQuery
Save to your folder(s)
So today I created a html image map which creates dynamic links based on the color of the pixel that the user clicked.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. jQuery(document).ready(function($) {
  2.     $('#theworldmapimage').live('click', function(ev) {
  3.        var X = $(this).offset().left;
  4.        var Y = $(this).offset().top;
  5.        mouseX = ev.pageX - X;
  6.        mouseY = ev.pageY - Y;
  7.        //FIX X AXIS ERORR MARGIN
  8.        //   mouseY -= 5;
  9.        if (mouseX > 500) { mouseX -= 13; }
  10.        //alert("x="+mouseX+" y="+mouseY);
  11.         $.get("../php/php-functions/phpfunc-imagemap.php",{x: mouseX ,y: mouseY}, function(data){
  12.             //alert(data);
  13.             if (data != '') {
  14.                 //alert(data + " " +"x="+mouseX+" y="+mouseY);
  15.                 window.location.replace(data); //load the url of the clicked country
  16.             }
  17.             else {
  18.                 //alert("no data");
  19.             }
  20.         });
  21.     });
  22. });

URL: http://www.jquery4u.com/ajax/dynamic-image-map-based-pixel-colour/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.