Alle Kategorien
Suche

So legen Sie einen Link auf nur einen Teil des Bildes

Autor: Samuel Klemke
Einfache Internetseiten per HTML zu programmieren ist gar nicht so schwierig.
Einfache Internetseiten per HTML zu programmieren ist gar nicht so schwierig.
Sie programmieren Ihre Internetseite selber in HTML und wollen einen Link auf einen Teil eines Bildes einfügen, so brauchen Sie nur wenige Zeilen Code einzufügen. Sollte Ihnen das dennoch zu kompliziert erscheinen, können Sie das Bild auch einfach in mehrere Bilder zerschneiden.

Wenn Sie sich ein wenig mit der Programmierung von Webseiten in HTML auskennen, wird es für Sie auch nicht schwierig sein, ein Bild einzufügen und dieses mit verweis-sensitiven Bereichen zu versehen. Man spricht auch von Image Maps. HTML-Dateien können Sie ganz einfach z.B. mit dem normalen Text-Editor bearbeiten. In Dreamweaver von Adobe können Sie zwischen einer grafischen Darstellung und der Code-Ansicht wechseln. Das Gute hieran ist, das die unterschiedlichen Elemente im Code hier je nach Kategorie und Syntax farblich dargestellt werden.

So legen Sie einen Link auf einen Bild-Teil

  1. Fügen Sie zunächst im HTML-Quellcode das gewünschte Bild an der richtigen Stelle ein. Dazu verwenden Sie folgenden Code: <img src="URL zum Bild" width="200" height="200" usemap="Vergeben Sie hier einen Namen">
  2. Bei Höhe und Breite (height / width) geben Sie natürlich die entsprechenden Abmessungen des Bildes ein.
  3. Fügen Sie in der nächsten Zeile <map name="Hier der Name der oben vergebenen usemap"> ein. Damit wird der Definitionsbereich der Image Map begonnen.
  4. Nun müssen Sie den Bereich definieren, der verweis-sensitiv werden soll: <area shape="rect" coords="11,10,59,29" href="http://Ziellink" alt="Verweistext" title="Titel">
  5. Wollen Sie mehrere verweis-sensitive Flächen erstellen, fügen Sie einfach weiteren <area shape="rect"..usw...>-Code ein.
  6. Abschließend müssen Sie das Ende des Definitionsbereiches angeben, indem Sie das Map-Ende-Tag setzen: </map>.

Shape bedeutet Form, dass heißt, dass Sie mit "rect" ein Rechteck definieren. "Coords" sind die Koordinaten, diese werden dabei von der linken oberen Ecke des Bildes in Pixeln angegeben. Des Weiteren geben Sie natürlich das Ziel an, zu dem der Link führen soll. Sollte die verweis-sensitive Fläche nicht angezeigt werden, erscheint der alternative Verweistext ("alt=...."). Dieser muss angegeben werden. Der "title" ist eine Art Tooltip, der beim Überfahren mit der Maus erscheint. Anstelle von shape="rect" können Sie auch Kreise (shape="circle") oder Polygone (shape="poly") verwenden. Beim Kreis müssen Sie dann für die Koordinaten drei Werte angeben: die Entfernung des Mittelpunkts von links, von oben, sowie den Radius in Pixeln, also x,y,r. Bei Polygonen müssen Sie die Koordinaten für jeden Eckpunkt angeben, also x1,y1,x2,y2......xn,yn.

So geht es durch Zerschneiden des Bildes

  1. Alternativ können Sie ein Bild in einer Bildbearbeitungssoftware in mehrere Rechtecke zerschneiden (man sagt auch "slicen"), z. B. in 3x3 also 9 Teile.
  2. Fügen Sie dann in Ihrer Internetseite eine Tabelle mit 3x3 Zellen ein, die Abstände und Ränder sollten dabei auf 0 gestellt sein.
  3. In jede Zelle fügen Sie einen Bildteil ein, sodass nachher wieder ein komplettes Bild zu sehen ist.
  4. Versehen Sie nun die gewünschten Bildausschnitte mit Links, um diese klickbar zu machen.
  5. Diese Vorgänge können Sie entweder manuell in HTML programmieren, oder aber auch über WYSIWYG-Editoren, also grafische Oberflächen.

Scheuen Sie sich nicht diese interessante Programmiertechnik einmal auszuprobieren, vielleicht passt es ja ganz gut zu Ihrer Internetseite.

Weiterlesen:
Teilen: