Dynamic Image Map Based on Pixel Colour

This article details how to create a dynamic image map using pixel color, offering a fast and flexible alternative to traditional image maps. The method avoids the limitations of fixed-size areas and allows for any shape or size.

Key Advantages:

• Speed: Loads quickly due to its efficient design.
• Flexibility: No need to pre-define clickable areas; any shape or size is possible.
• Simplicity: No need to know which image areas correspond to which links.

How it Works:

1. A user clicks on the image.
2. jQuery captures the click's x and y coordinates.
3. These coordinates are sent to a PHP script via Ajax.
4. The PHP script retrieves the pixel color at those coordinates.
5. The hex color code is used to look up the corresponding country in a database.
6. The URL for that country's page is returned to the JavaScript.
7. The page is loaded via the Ajax call.

Implementation:

This solution requires three components: an image, a database, and code.

1. Image: Create an image with unique hex color codes for each country (e.g., using Adobe Illustrator).

2. Database: Store the hex color codes and their corresponding country URLs.

3. Code: The following code snippets demonstrate the jQuery and PHP components.

   jQuery:

   jQuery(document).ready(function($) {
       $('#theworldmapimage').on('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");
               }
           });
       });
   });

   PHP:

   if(isset($_REQUEST['x'])) {
       $x = $_REQUEST['x']; $y = $_REQUEST['y'];
       $im = imagecreatefrompng($domain."/images/worldmap-coloured.png");
       $rgb = imagecolorat($im, $x, $y);
       $r = ($rgb >> 16) & 0xFF;
       $g = ($rgb >> 8) & 0xFF;
       $b = $rgb & 0xFF;
   
       function rgb2html($r, $g=-1, $b=-1) {
           // ... (function remains unchanged) ...
       }
   
       $hex = rgb2html($r, $g, $b);
       $debug = ("R".$r." G".$g." B".$b."  hex=#".$hex);
       $html = "";
   
       $qry = "SELECT country FROM `countries` WHERE hex_colour= '".$hex."' LIMIT 1;";
       if (mysqli_query($conn, $qry)) { // Use mysqli instead of deprecated mysql
           $result = mysqli_query($conn, $qry);
           while ($row = mysqli_fetch_assoc($result)){
              $country_filename = convertToFileName($row['country']);
               $html = $domain."/".$country_filename."/";
               $debug .= " " . $country_filename;
           }
       }
       mysqli_close($conn); // Close the mysqli connection
       echo $html;
   }
   ?>

   Note: The PHP code has been updated to use mysqli for database interaction, replacing the deprecated mysql functions. Ensure you have a database connection established ($conn).

4. Final Result: The resulting dynamic image map.

See a demo (Click on the “Show world map” to show the dynamic image map, then click on any country).

This approach offers benefits for responsive design, SEO (through alt text and title attributes), and performance optimization (caching and image compression). The FAQs section provides further details on error handling and optimization techniques.

The above is the detailed content of Dynamic Image Map Based on Pixel Colour. For more information, please follow other related articles on the PHP Chinese website!