Dieser Beitrag wird Ihnen beibringen:
- Was sind HTML-Imagemaps?
- Wie erstelle ich Imagemaps in einem HTML-Dokument?
- Wie erstelle ich eine Imagemap, die mit einer anderen Seite verknüpft ist?
Was sind HTML-Imagemaps?
Die Imagemap ist ein Bild mit anklickbaren Bereichen. Um eine Imagemap in HTML zu erstellen, muss das „
Syntax
Die Syntax zum Angeben von Imagemaps in einem HTML-Dokument ist unten aufgeführt:
< Bild Quelle = 'images/img1.jpg' alles = 'Laptop' Verwendungskarte = '#clickspace' >
< Karte Name = 'Klickraum' >
< Bereich gestalten = 'richtig' Koordinaten = '224,37,422,312' href = 'Laptop.html' >
< / Karte >
Die '
- „ Quelle “ gibt den Bildpfad an.
- „ alles “ zeigt einen alternativen Text, wenn ein Bild nicht geladen werden kann.
- „ Verwendungskarte “ wird angegeben, um die Bildbereiche anklickbar zu machen. Um einen Link zu erstellen, muss sein Wert derselbe sein wie die Klasse oder ID des „
Die '
- „ gestalten ” gibt die Bereichsgröße eines HTML an “
' Element. - „ Koordinaten ”-Attribut definiert die Koordinaten des anklickbaren Bereichs.
- „ href ”-Attribut legt die URL der Quelle fest.
Wie erstelle ich Imagemaps in einem HTML-Dokument?
Um eine Imagemap in einem HTML-Dokument zu erstellen, sehen Sie sich die gegebenen Anweisungen an:
- Fügen Sie in HTML ein „ ” Element und weisen Sie eine Klasse zu “ Bildkarte “.
- Fügen Sie innerhalb dieses div ein „
”-Element, um ein Bild hinzuzufügen, das den oben diskutierten Attributen zugeordnet ist. - Fügen Sie dann einen HTML-Code hinzu“
“-Element und weisen Sie ihm das „ Clickspace ' Name. - Notiere dass der ' Verwendungskarte ” Attribut wird der Name zugewiesen “ #clickspace “ zeigt auf die „ Name “-Attribut des „
- Fügen Sie darin das „
< div Klasse = 'Bildkarte' >”-Tag mit den oben genannten Attributen:
< Bild Quelle = 'images/img1.jpg' alles = 'Laptop' Verwendungskarte = '#clickspace' >
< Karte Name = 'Klickraum' >
< Bereich gestalten = 'richtig' Koordinaten = '224,37,422,312' href = 'Laptop.html' >
< / Karte >
< / div >Gehen wir zum CSS-Abschnitt, um die Größe des Bildes anzupassen.
Stil „
“ in CSSNutzen Sie die „ .image-map ” Klasse für den Zugriff auf die “
”-Element und wenden Sie die folgenden CSS-Eigenschaften an: .image-map {
Breite : 700px;
Rand: automatisch;
}Hier ist die Beschreibung der erwähnten CSS-Eigenschaften:
- Die ' Breite ”-Eigenschaft legt die Breite des div-Elements fest.
- Die ' Rand ”-Eigenschaft fügt mehr Platz um das Element herum hinzu.
Stil „img“-Element
.image-map img {
Breite : 100 %;
}Siehe, die Bereichskoordinaten, die im „ Koordinaten ” Attribute sind jetzt anklickbar:
Im nächsten Abschnitt erfahren Sie, wie Sie die Imagemap mit einer anderen Quelle verknüpfen.
Wie erstelle ich eine Imagemap, die mit einer anderen Seite verknüpft ist?
Erstellen Sie eine weitere HTML-Seite mit der Erweiterung „ .html “, indem Sie die unten genannten Schritte ausführen:
- In unserem Fall geben wir ihm den Namen „ laptop.html “.
- Fügen Sie ein div-Element hinzu und weisen Sie ihm eine Klasse zu. laptop-img “.
- Platzieren Sie dann ein Bild mit dem „
” Element und verknüpfen Sie das “ Quelle ' und ' Breite “ Attribute. - Geben Sie als Nächstes einen Absatz mit dem „ ' Element:
< Bild Quelle = '/images/laptop.jpg' Breite = '400px' >
< p >Ein Laptop ist ein tragbarer Computer, der bewegt und in einer Vielzahl von Umgebungen verwendet werden kann.< / p >
< / div >Geben Sie in CSS die folgenden CSS-Eigenschaften für „ laptop-img ' Klasse:
.laptop-img {
Breite : 500px;
Rand: automatisch;
}Ausgabe
Nun verlinken wir die „ laptop.html „Seite zu einem Bild“
< Bereich gestalten = 'richtig' Koordinaten = '310.57.590.470' href = 'Laptop.html' >”-Element der ersten Seite. Geben Sie dazu die URL der Seite zum „ href ”-Attribut des “ ”-Elements, wie unten gezeigt: Ausgabe
Wir haben erfolgreich gelernt, was Imagemaps sind und wie sie mit anderen Quellen verknüpft werden.
Fazit
Der HTML-Code „
”-Element wird verwendet, um eine Imagemap oder ein Bild mit anklickbaren Bereichen zu erstellen. Um die anklickbaren Bereiche des Bildes zu definieren, müssen ein oder mehrere „ “-Tags werden innerhalb des „ - Fügen Sie innerhalb dieses div ein „