Wie mache ich eine Referenzzeichnung ohne Programmierung

Webseiten enthalten häufig verschiedene Zeichnungen, die verwendet werden können, um die Aufmerksamkeit der Besucher zu erregen und Inhalte visuell zu gestalten. Manchmal möchte ich sicherstellen, dass das Bild anklickbar ist und den Benutzer auf eine andere Seite weiterleitet. Aber was ist, wenn es keine Erfahrung in der Programmierung gibt? Wir werden Ihnen sagen, wie Sie eine Referenz zeichnen, ohne Code schreiben zu müssen.

Es genügt, einfache HTML-Tags und zusätzliche Attribute zu verwenden, um ein anklickbares Bild ohne Programmierung mit einem Link zu erstellen. Laden Sie zuerst das Bild, das Sie als Referenz erstellen möchten, auf Ihren Webserver oder Ihr Image-Hosting hoch. Dann mit einem Tag umwickeln oder . je nachdem, ob Sie die Verbindung fett oder akzentuiert machen möchten. Platzieren Sie innerhalb des Tags ein Tag, das die Attribute src und alt enthält, die jeweils auf den Bildpfad und seinen alternativen Text verweisen.

Danach wird der Benutzer, wenn er auf das Bild klickt, an die von Ihnen angegebene Adresse weitergeleitet. Auf diese Weise können Sie die Zeichnung leicht zu einem anklickbaren Link machen, ohne auf die Programmierung zurückgreifen zu müssen und nur einfache HTML-Tags zu verwenden.

Abbildung als Referenz

Manchmal kann es notwendig sein, ein Bild anklickbar zu machen und es in einen Link umzuwandeln. Dies kann beispielsweise nützlich sein, um eine Bildergalerie zu erstellen oder einen Link zu einer größeren Version eines Bildes hinzuzufügen.

Erstellen eines Verweises auf eine externe Ressource:

Auf diese Weise wird die Zeichnung anklickbar und führt zu der im href-Attribut angegebenen Seite oder Ressource. Dabei bleibt die Zeichnung ein visuelles Element auf der Seite.

Um ein Tag zu verwenden, müssen Sie Bereiche im Bild definieren, die als Links dienen. Dies geschieht mit einem Tag . Innerhalb des Tags werden die Form des Bereichs (Kreis, Rechteck, Polygon) und seine Koordinaten angegeben.

Beispiel für die Verwendung eines Tags :

In diesem Beispiel haben wir ein Bild mit zwei Bereichen. Der erste Bereich ist ein Rechteck mit Koordinaten (50,50,200,200) und ist ein Verweis auf Google. Der zweite Bereich ist ein Kreis mit Koordinaten (250,150,100) und ist ein Verweis auf das Example.

Wenn Sie auf den entsprechenden Bereich des Bildes zeigen, ändert sich der Mauszeiger zu einer Hand, und wenn Sie darauf klicken, gelangen Sie zum angegebenen Link.

Die Verwendung eines Tags ermöglicht es Ihnen, eine Referenzzeichnung zu erstellen, ohne dass eine Programmierung erforderlich ist.

Zeichnung als Hintergrundreferenz

Wenn Sie eine Zeichnung als Referenz erstellen möchten, aber keine Programmierung verwenden möchten, besteht eine einfache Möglichkeit darin, die Zeichnung als Hintergrundreferenz zu verwenden.

Um dies zu tun, benötigen Sie einen Link zu der Zeichnung, die Sie verwenden möchten. Sie können es auf Ihrem Computer speichern oder einen Link aus dem Internet verwenden.

Fügen Sie dann einen Stil hinzu, um den Hintergrund des Links mit einem Tag festzulegen, in dem Sie die Eigenschaft background-image festlegen und den Bildverweis als Wert angeben. Zum Beispiel:

• • a
  • background-image: url(https://www.example.com/image.jpg);
  • >

  Wenn der Benutzer nun den Mauszeiger über den Link bewegt, wird er mit dem von Ihnen angegebenen Muster als Hintergrund angezeigt. Wenn Sie auf einen Link klicken, gelangen Sie zur angegebenen Seite oder Datei.

  Schaltflächenmuster

  Wenn Sie eine Zeichnung in einen Link umwandeln möchten, der wie eine Schaltfläche aussieht, können Sie das Element verwenden und ihm den Schaltflächenstil mit CSS zuweisen.

  2. Legen Sie allgemeine Stile für Ihre Schaltflächenreferenz fest, indem Sie den Klassennamen für das Tag angeben oder die Stile direkt im style-Attribut anwenden.

  3. Fügen Sie Stile für die Schaltfläche mithilfe von CSS hinzu. Zum Beispiel können Sie die Hintergrundfarbe, die Textfarbe, die Einrückung usw. festlegen.

  /* In einer CSS-Datei oder in einem Tag */

  .button-link .button-link:hover

  Dadurch sieht Ihre Zeichnung wie eine Schaltfläche aus und wenn Sie darauf klicken, wird ein entsprechender Link ausgeführt.