Wie man ein Usemap in einem Div

September 30

Wie man ein Usemap in einem Div

Wenn Sie eine Website, verwenden viele Entwickler Divisionen oder div-Tags, um den Inhalt auf ihren Seiten zu positionieren. Eine andere Layoutmethode, die üblicherweise in einer Division ist ein Image-Map. Image-Maps Erstellen anklickbaren Link-Bereichen auf ein Bild, so dass Links zu in einer komplexen Seitendesign integriert werden. Mit Hilfe der Bild-Karte in einem Div bietet große Kontrolle über Position, Aussehen und Funktion der Elemente Ihrer Website.

Anweisungen

Erstellen einer Image-Map

1 Erstellen Sie eine Zuordnung in Ihrem HTML-Header mit dem "< >" Karte"-Tag. Geben Sie der Karte einen eindeutigen Namen und ID Beispielsweise, wenn Ihre Karte auf ein Navigations-Menü ist, zuordnen Ihrer Eröffnung Tag möglicherweise wie folgt angezeigt:

< Name Map = "Navigation" Id = "Navigation" >

2 Fügen Sie einen zugeordneten Link durch die Schaffung eines "< Bereich >" Tags hinzu. Ein Bereich enthält einen Link, Form-Bezeichnung und Koordinaten definieren die Form, eine ID für Verwendung durch andere Teile der Website und Alternativtext für Benutzer mit Sprachausgabe-Software. Eine Fläche in der Form eines Rechtecks zu erstellen, die 100 Pixel breit ist, hinzufügen 50 Pixel groß und befindet sich in der oberen linken Ecke des Bildes:

< Bereich Href = "http://www.linkedwebsite.com" Shape = "Rect" Coords = "0, 0, 100, 50" Id = "link1" Alt = "verlinkten Website" / >

3 Jede notwendige zugeordneten Link hinzufügen und dann am Ende der Karte durch Hinzufügen "< / anzeigen >" nach Ihren letzten Link.

Usemap in einem Div

4 Fügen Sie das Bild, das Sie für Ihre Karte innerhalb der Division, durch die Schaffung erstellt einer "< Img / >" Tag zwischen den "< Div >" und "< / Div >" Markierungen. Der umgekehrte Schrägstrich teilt dem Browser mit, dass hinter dem Inhalt dieses Tags, das Bild fertig ist erstellt wird.

5 Fügen Sie einen Speicherort für das Bild und alternativen Text für Text-in-Software. Zum Beispiel:

< Img Src = "images/imagemaplocation.jpg" Alt = "Navigation Menü Image" / >

Dies sagt der Website, dass das Bild befindet sich im Ordner "Bilder" des Website-Verzeichnis und mit dem Namen "imagemaplocation.jpg." Wenn ein Besucher Ihrer Website mit einer Text-in-Anwendung erreicht, sollte der Besucher das Bild von der alternativen Beschreibung "Navigation im Menü Bild." finden können

6 Fügen Sie den Befehl "Usemap" vor der schließenden Klammer des Bildes, um sicherzustellen, dass es den Namen der Karte entspricht, die Sie mit einem Hashtag oder Pfund-Zeichen vor dem Namen erstellt. Beispielsweise um die Navigation im Menü Karte installieren, hinzufügen:

Usemap = "#navigation"

7 Speichern Sie die Webseite lokal und laden Sie den neuen Inhalt auf Ihrem Server die Änderungen online.

Tipps & Warnungen

  • Karte von Bildbereichen können auch in einem Kreis mit den entscheidenden Punkten wird den Mittelpunkt und den Radius oder ein Polygon mit mehreren Koordinatenpunkte definieren die Form gebildet werden.