/ Published in: jQuery
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
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"); } }); }); });
URL: http://www.jquery4u.com/ajax/dynamic-image-map-based-pixel-colour/