Advanced Search

Return to Snippet

Revision: 44587
at April 14, 2011 16:49 by jquery4u
Initial 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");
            }
        });
    });
});
Initial URL 
http://www.jquery4u.com/ajax/dynamic-image-map-based-pixel-colour/
Initial Description 
So today I created a html image map which creates dynamic links based on the color of the  pixel that the user clicked.
Initial Title 
Dynamic Image Map Based on Pixel Colour
Initial Tags 
image, jquery
Initial Language 
jQuery