HTML -Bildkarten

Oft haben Sie möglicherweise Websites besucht, auf denen Sie einen Link finden können: “Besuchen Sie den Link, um mehr zu erfahren”. Wenn Sie darauf klicken, werden Sie auf eine andere Website gebracht. Auf die gleiche Weise ermöglicht es uns mit der Image Mapping -Funktion von HTML, Bildern anklickbare Links hinzuzufügen. Die Seite leitet uns zu einer anderen Quelle, wenn Sie auf diesen angegebenen Bereich klicken.

Dieser Beitrag wird Ihnen beibringen:

• Was sind HTML -Bildkarten?
• So erstellen Sie Bildkarten im HTML -Dokument?
• So erstellen Sie eine Bildkarte, die mit einer anderen Seite verknüpft ist?

Was sind HTML -Bildkarten?

Die Bildkarte ist ein Bild mit Bereichen, auf die geklickt werden kann. Um eine Bildkarte in HTML zu erstellen, die “Element wird verwendet. Außerdem ein oder mehrere “Innerhalb des Elements "" werden Tags hinzugefügt, um die Bereiche anzugeben.

Syntax

Die Syntax zum Angeben von Bildkarten in einem HTML -Dokument wird unten erwähnt:

Der "Das Element wird mit den folgenden Attributen definiert:

• “srcGibt den Bildpfad an.
• “Alt”Zeigt einen alternativen Text an, wenn ein Bild nicht geladen werden kann.
• “Usemap”Wird angegeben, um die Bildbereiche zu klicken. Um einen Link zu erstellen, muss sein Wert mit der Klasse oder der ID des „“ Elements übereinstimmen.

Der "Das Element wird mit den folgenden Attributen hinzugefügt:

• “Form”Gibt die Flächengröße eines HTML an“" Element.
• “KoordnungenDas Attribut definiert die Koordinaten des klickbaren Bereichs.
• “hrefAttribut legte die URL der Quelle dar.

So erstellen Sie Bildkarten im HTML -Dokument?

Um eine Bildkarte in einem HTML -Dokument zu erstellen, lesen Sie die angegebenen Anweisungen:

• In HTML fügen Sie eine "hinzu"Element und eine Klasse zuweisen "Bildmap”.
• Fügen Sie in diesem Div eine hinzu “Element zum Hinzufügen eines Bildes, das den oben diskutierten Attributen zugeordnet ist.
• Dann fügen Sie eine HTML hinzu "Element und zuweisen Sie es "das"ClickSpace" Name.
• Notiere dass der "UsemapDas Attribut wird der Name zugewiesen “#clickspace"Auf die" zeigen "Name”Attribut des" ”-Tags.
• Darin fügen Sie die "hinzu"Tag mit den oben genannten Attributen:

Bewegen wir uns in Richtung des CSS -Abschnitts, um die Größe des Bildes anzupassen.

Stil „“ in CSS

Verwenden Sie die “.Bildmap"Klasse, um auf die" zugreifen "Element und wenden Sie die folgenden CSS -Eigenschaften an:

.Bildmap
Breite: 700px;
Rand: Auto;

Hier ist die Beschreibung der genannten CSS -Eigenschaften:

• Der "BreiteDie Eigenschaft legt die Breite des Div -Elements fest.
• Der "RandDas Eigentum fügt mehr Platz um das Element hinzu.

Stil „img“ Element

.Bildmap img
Breite: 100%;

Siehe die in der “angegebenen Flächenkoordinaten“KoordnungenAttribut sind jetzt anklickbar:

Im nächsten Abschnitt lernen wir, wie Sie die Bildkarte mit einer anderen Quelle verknüpfen können.

So erstellen Sie eine Bildkarte, die mit einer anderen Seite verknüpft ist?

Erstellen Sie eine andere HTML -Seite mit der Erweiterung “.html”Wenn Sie den unten genannten Schritten folgen:

• 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”.
• Dann platzieren Sie ein Bild mit dem “Element und verknüpfen die “src" Und "Breite”Attribute.
• Geben Sie als nächstes einen Absatz mit der “an

  " Element:

Ein Laptop ist ein tragbarer Computer, der in verschiedenen Einstellungen bewegt und verwendet werden kann.

Geben Sie in CSS die folgenden CSS -Eigenschaften an die “anLaptop-Img" Klasse:

.Laptop-Img
Breite: 500px;
Rand: Auto;

Ausgang

Jetzt werden wir die "verknüpfen"Laptop.html"Seite zu einem Bild"Element der ersten Seite. Geben Sie dazu die URL der Seite in die “anhref”Attribut des unten gezeigten" ”-Elements:

Ausgang

Wir haben erfolgreich gelernt, was Bildkarten sind und wie sie mit anderen Quellen verbunden sind.

Abschluss

Die HTML "Das Element wird verwendet, um eine Bildkarte oder ein Bild mit klickbaren Bereichen zu erstellen. Um die klickbaren Bereiche des Bildes zu definieren, eine oder mehrere “Tags werden innerhalb des Elements "" hinzugefügt. Darüber hinaus sind die mit dem „“ -Tag zugeordneten Attribute ““Form","Koordnungen", Und "href”. Dieser Beitrag hat dargestellt, wie HTML -Bildkarten mit einem Beispiel erstellt werden können.