Um HTML5 -Bildkarte ansprechend zu machen, k?nnen Sie die Koordinaten durch JavaScript dynamisch skalieren oder die Overlay -Elemente mit CSS absolut positionieren. Stellen Sie zun?chst sicher, dass das Bild selbst reagiert, und berechnen Sie dann die Fl?chenfl?chenkoordinaten entsprechend dem ursprünglichen und aktuellen Gr??enverh?ltnis über JavaScript, wenn die Seitenlade- und Fensteranpassung und eine transparente Verbindung verwendet werden, um das Bild mit prozentualer Positionierung zu decken, um eine Cross-Device-Anpassung zu erreichen, und die Anpassung des interaktiven Bereichs korrekt skaliert ist. Die beiden Methoden haben anwendbare Szenarien. Die JavaScript -L?sung ist mit der ursprünglichen Struktur kompatibel und die CSS -L?sung ist einfach und erfordert keine Skripte. Es sollte gem?? den Projektanforderungen ausgew?hlt werden. Beide Bildschirmeffekte müssen getestet werden und der Berührungsbereich ist gro? genug. Es wird empfohlen, die JavaScript -Methode für komplexe Karten zu verwenden, und die CSS -Methode kann für einfaches Layout verwendet werden. Gleichzeitig kann SVG als eine bessere Alternative angesehen werden, um eine bessere Skalierbarkeit zu erzielen, und schlie?lich wird die vollst?ndige Funktion der reaktionsschnellen Bildzuordnung realisiert.

Das Erstellen einer HTML5 -Bildkarte kann schwierig sein, da Bildkarten auf festen Pixelkoordinaten beruhen, die beim Skalen des Bildes brechen. Mit einer Kombination von HTML, CSS und ein wenig JavaScript k?nnen Sie jedoch die Interaktivit?t über die Bildschirmgr??en hinweg aufrechterhalten.

Hier erfahren Sie, wie Sie eine Bildkarte ansprechen:

Verwenden Sie ein reaktionsschnelles Bild mit max-width

Stellen Sie zun?chst sicher, dass das Bild selbst in verschiedenen Ansichtsfenstern ordnungsgem?? skaliert wird.

 <img  src = "map-Image.jpg" Alt = "Interactive Map" Usemap = "#Imagemap" id = "Responsive-Image" style = "max-Width: 100%; H?he: Auto;" alt="Wie man eine HTML5 -Bildkarte reagiert" >

Die max-width: 100% und height: auto setzt das Bild proportional auf kleineren Bildschirmen ab.

Halten Sie die Bildkartenstruktur beibehalten

Definieren Sie Ihre Bildkarte normalerweise mit <map> und <area> Elementen:

 <map name = "Imagemap">
  <Bereichsform = "RECTE" -KOORCINATES = "50,50,200,200" href = "Seite1.html" Alt = "Region 1">
  <Bereichsform = "Kreis" Coordinates = "300.100,50" href = "page2.html" Alt = "Region 2">
  <Bereichsform = "Poly" Koordinaten = "400.200.450.250.400.300" href = "page3.html" Alt = "Region 3">
</map>

Hinweis: coords befinden sich noch in Originalbildpixeln.

Koordinaten in der Gr??e neu berechnen (JavaScript)

Da das Bild skaliert, müssen die coords proportional eingestellt werden. Sie k?nnen dies dynamisch mit JavaScript tun.

 Funktion updateImagemap () {
  const img = document.getElementById ('Responsive-Image');
  const map = img.usemap? document.querySelector (img.usemap): null;
  if (! img ||! map) return;

  const originalwidth = img.naturalwidth;
  const currentwidth = img.width;
  const scale = currentwidth / originalwidth;

  const bereichungen = map.querySelectorAll ('Bereich');
  Bereiche.foreach (Area => {
    const coords = Area.GetAttribute ('Data-Coords') || Area.GetAttribute ('Koordnen');
    if (! Area.GetAttribute ('Data-Coords')) {
      Area.SetAttribute ('Data-Coords', Coords); // Original speichern
    }
    const scaledCoords = cOORCESS.SPLIT (','). MAP (koord => math.round (ParseInt (Coord, 10) * Skala));
    Area.SetatTribute ('Koordnen', scaledCoords.join (','));
  });
}

// Last laufen und die Gr??e ?ndern
window.addeventListener ('laden', updateImagemap);
window.adDeVentListener ('Gr??e', UpdateImagemap);

Wie es funktioniert:

• Speichert die ursprünglichen Pixelkoordinaten in data-coords beim ersten Lauf.
• Berechnet ein Skalenverh?ltnis basierend auf aktueller und ursprünglicher Bildbreite.
• Skaliert jede Koordinate und aktualisiert das coords .

Alternative: Verwenden Sie CSS und absolute Positionierung (kein JavaScript)

Wenn Sie eine javaScript-freie L?sung bevorzugen, überlagerne transparent klickbare Elemente mit CSS.

 <div class = "bildmap container" style = "Position: relativ; Anzeige: Inline-Block;">
  <img  src = "map-iMage.jpg" Alt = "Interactive Map" Style = "Max-Width: 100%; H?he: Auto;" alt="Wie man eine HTML5 -Bildkarte reagiert" >
  <a href = "page1.html" class = "map-link rect" style = "top: 10%; links: 10%; Breite: 20%; H?he: 15%;"> </a>
  <a href = "page2.html" class = "map-link circle" style = "top: 20%; links: 30%; Breite: 10%; H?he: 10%; Grenzradius: 50%;"> </a>
</div>

Und stellen Sie sicher, dass die Links richtig positioniert sind:

 .image-Map-Container {
  Anzeige: Inline-Block;
  Position: Relativ;
}

.Map-link {
  Position: absolut;
  Hintergrund: transparent;
  Anzeige: Block;
}

Diese Methode verwendet prozentualbasierte Positionierung und Gr??e, sodass sie mit dem Beh?lter skaliert wird. Sie müssen Positionen manuell basierend auf den Anteilen des Bildes berechnen.

Tipps für die besten Ergebnisse

• Immer auf mehreren Bildschirmgr??en testen.
• Für komplexe Karten ist die JavaScript -Methode genauer.
• Erw?gen Sie, SVG anstelle von Bildkarten für eine bessere Skalierbarkeit und Reaktionsf?higkeit zu verwenden.
• Vermeiden Sie es, sehr kleine klickbare Bereiche auf Mobilger?ten zu verwenden. Stellen Sie sicher, dass sich die Berührungsziele mindestens 44px betragen.

Grunds?tzlich besteht der Schlüssel entweder darin, die coords dynamisch zu skalieren oder die Bildkarte durch positionierte Overlays zu ersetzen. Der JavaScript -Ansatz bewahrt Ihre vorhandene Kartenstruktur, w?hrend die CSS -Methode mehr Kontrolle liefert und das Skripten vermeidet. W?hlen Sie denjenigen aus, der den Komplexit?t und den Wartungsbedarf Ihres Projekts entspricht.

Das obige ist der detaillierte Inhalt vonWie man eine HTML5 -Bildkarte reagiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!