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.


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.