In diesem Artikel wird beschrieben, wie Sie eine dynamische Bildkarte mit Pixelfarbe erstellen und eine schnelle und flexible Alternative zu herk?mmlichen Bildkarten bieten. Die Methode vermeidet die Einschr?nkungen von Bereichen mit fester Gr??e und erm?glicht eine beliebige Form oder Gr??e.

Schlüsselvorteile:

• Geschwindigkeit: Belastungen aufgrund seines effizienten Designs schnell.
• Flexibilit?t: Es ist nicht erforderlich, klickbare Bereiche vorzu definieren. Jede Form oder Gr??e ist m?glich.
• Einfachheit: Keine Notwendigkeit zu wissen, welche Bildbereiche den Links entsprechen.

Wie es funktioniert:

1. Ein Benutzer klickt auf das Bild.
2. JQuery erfasst die X- und Y -Koordinaten des Klicks.
3. Diese Koordinaten werden über AJAX an ein PHP -Skript gesendet.
4. Das PHP -Skript ruft die Pixelfarbe bei diesen Koordinaten ab.
5. Der Hex -Farbcode wird verwendet, um das entsprechende Land in einer Datenbank nachzuschlagen.
6. Die URL für die Seite dieses Landes wird zum JavaScript zurückgegeben.
7. Die Seite wird über den Ajax -Anruf geladen.

Durchführung:

Diese L?sung erfordert drei Komponenten: ein Bild, eine Datenbank und Code.

1. Bild: Erstellen Sie ein Bild mit einzigartigen Hex -Farbcodes für jedes Land (z. B. mit Adobe Illustrator).

2. Datenbank: Speichern Sie die Hex -Farbcodes und ihre entsprechenden L?nder -URLs.

3. Code: Die folgenden Code -Snippets zeigen die JQuery- und PHP -Komponenten.

   JQuery:

    JQuery (Dokument) .Ready (Funktion ($) {
       $ ('#theworldmapimage'). on ('click', function (ev) {
          var x = $ (this) .Offset ().
          var y = $ (this) .Offset (). Top;
          mousex = ev.pagex - x;
          Mausy = ev.pagey - y;
          // X -Achse ERORR RANK FEELT
          // Mausy -= 5;
          if (Mousex> 500) {Mousex -= 13; }
          // alert ("x =" mousex "y =" mausy);
           $ .get ("../ php/php-funktions/phpfunc-iMagemap.php", {x: mousex, y: mousey}, function (data) {
               // alarm (Daten);
               if (data! = '') {
                   // alarm (data "" "x =" mousex "y =" mausy);
                   window.location.replace (Daten); // Laden Sie die URL des geklickten Landes
               }
               anders {
                   // alarm ("keine Daten");
               }
           });
       });
   });

   PHP:

    if (isset ($ _ request ['x'])) {
       $ x = $ _Request ['x']; $ y = $ _Request ['y'];
       $ im = imperiencecreatfrompng ($ domain. "/Images/weltmap-farbig.png");
       $ rgb = imageColorat ($ im, $ x, $ y);
       $ r = ($ rgb >> 16) & 0xff;
       $ g = ($ rgb >> 8) & 0xff;
       $ B = $ RGB & 0xff;
   
       Funktion rgb2html ($ r, $ g = -1, $ b = -1) {
           // ... (Funktion bleibt unver?ndert) ...
       }
   
       $ hex = rgb2html ($ r, $ g, $ b);
       $ debug = ("r". $ r. "g". $ g. "B". $ b. "hex =#". $ hex);
       $ html = "";
   
       $ qry = "L?nder aus` L?ndern "wobei hex_colour = '". $ hex. "' Limit 1;";
       if (mysqli_query ($ conn, $ qry)) {// Verwenden Sie MySQLi anstelle von veralteten 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); // Schlie?en Sie die MySQLi -Verbindung
       echo $ html;
   }
   ?>

   Hinweis: Der PHP -Code wurde aktualisiert, um mysqli für die Datenbankinteraktion zu verwenden, wodurch die veralteten mysql -Funktionen ersetzt werden. Stellen Sie sicher, dass Sie eine Datenbankverbindung erstellt haben ( $conn ).

4. Endergebnis: Die resultierende dynamische Bildkarte.

Siehe eine Demo (klicken Sie auf die "Weltkarte anzeigen", um die dynamische Bildkarte anzuzeigen, und klicken Sie dann auf ein beliebiges Land).

Dieser Ansatz bietet Vorteile für reaktionsschnelles Design, SEO (durch Alt -Text- und Titelattribute) und Leistungsoptimierung (Caching und Bildkomprimierung). Der FAQS -Abschnitt enth?lt weitere Details zu Fehlerbehandlungs- und Optimierungstechniken.

Das obige ist der detaillierte Inhalt vonDynamische Bildkarte basierend auf Pixelfarbe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!