In diesem Artikel schauen wir uns an, wie man eine Client-Image-Map erstellt. Wenn Sie auf einen bestimmten Bereich klicken, können wir einem bestimmten Link folgen. Das Zusammenstellen von Imagemaps ist auf Websites selten zu finden, da dieser Vorgang recht arbeitsintensiv ist, aber wenn Sie Ihre Besucher überraschen möchten ungewöhnliche Form Wenn Sie nach Links suchen und freie Zeit zum Selbststudium haben, dann ist dieser Artikel genau das Richtige für Sie.
Etikett
Das Namensattribut des Elements
Anwendungsbeispiel
Schauen wir uns ein Beispiel an, in dem Sie, wenn Sie auf eine bestimmte Form in einem Bild klicken, zu verschiedenen Webseiten gelangen, die diese Formen beschreiben (Links zu Wikipedia):
Wähle eine Figur:
Und der Reihe nach, was wir in diesem Beispiel gemacht haben:
- Hat ein Bild gepostet (tag
), die wir später beim Erstellen einer Imagemap verwenden werden. Im Attribut usemap müssen Sie den Namen des Kartenbildes angeben, das wir im Element verwenden
- Platzieren Sie das Kartenbild (tag
- Platzieren Sie vier Tags , die interaktive Bereiche im Kartenbild definieren:
- Erste wir fragen rechteckige Fläche(Formattribut mit dem Wert „rect“), es entspricht unserem Erste Bild ( die ersten beiden Die Werte entsprechen der oberen linken Ecke, wie folgt zwei Werte bestimmen die obere und untere rechte Ecke).
- Zweite angeben runder Bereich(Formattribut mit dem Wert „Kreis“), es entspricht unserem zweite Bild ( Erste der Wert entspricht den Achskoordinaten X und der zweite entlang der Achse j, der Dritte bestimmt Radius).
- Hinsichtlich Drittel Und vierte Figur, dann werden sie nach dem Prinzip zusammengestellt Polygonaler Bereich(Formattribut mit dem Wert „poly“). Sie bestimmen die erforderliche Anzahl von Punkten im Bild, berechnen die Koordinaten dieser Punkte ( Grafikeditor) und geben Sie sie in einer solchen Reihenfolge an, dass der Browser sie in einer Zeile verbinden kann. Am Beispiel eines Dreiecks (drittes Bild): Erste Punkt (Koordinaten X Und j Eckpunkte), zweite Punkt (Koordinaten X Und j untere linke Ecke) und dritte Punkt (Koordinaten X Und j untere rechte Ecke).
Ich mache Sie darauf aufmerksam, dass auf dem Tag die praktische Aufgabe Nr. 26 steht.
Nuance: Aus Gründen der Reinheit der praktischen Aufgabe schlage ich vor, die Spitze des Sterns als ersten Punkt zu verwenden und ihn im Uhrzeigersinn zu bewegen. Ich habe als Wert das href-Attribut angegeben # In diesem Fall fungiert es als Platzhalter (Sie bleiben auf derselben Seite), Sie können zu einer beliebigen Seite wechseln.
Hinweis: Um Bildkoordinaten zu erhalten, verwenden Sie einen Bildeditor, selbst den einfachsten Editor, zum Beispiel Malen, zeigt die Koordinaten des Cursors an. Notieren Sie sich die Koordinaten auf einem Blatt Papier oder in einer separaten Datei und tragen Sie die Werte auf der Seite ein.
Wenn Sie beim Beenden der Aufgabe Schwierigkeiten haben, überprüfen Sie den Seitencode, indem Sie das Beispiel in einem separaten Fenster öffnen und es sorgfältig studieren.
Etikett
Im Behälter
- ein oder mehrere Elemente< >. Diese Elemente haben keinen Inhalt, sondern definieren die geometrischen Regionen der Imagemap und die mit jeder Region verknüpften Hyperlinks
- Inhalte auf Blockebene. Dieser Inhalt sollte umfassen< >, die die geometrischen Regionen der Karte und die mit jeder Region verknüpften Links angeben
Wenn-Tag
Wenn sich Regionen überlappen, hat das Element, das die Region definiert, die weiter oben im Dokument erscheint, Vorrang.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Syntax
Attribute
| Klasse | definiert den Namen der zu verwendenden Klasse |
|---|---|
| dir | bestimmt die Richtung der Zeichen:
|
| Ausweis | eindeutiger Bezeichner |
| lang | Definiert die Sprache des angezeigten Dokuments |
| Name | Name der Bildkarte. Wird als Wert des Usemap-Parameters des Tags verwendet |
| onblur | Element verliert den Fokus |
| onclick | Klicken Sie auf ein Element |
| ondblclick | Doppelklicken Sie auf ein Element |
| im Fokus | Element erhält den Fokus |
| onkeydown | Drücken einer Taste, wenn das Element den Fokus hat |
| auf Tastendruck | Drücken und Loslassen einer Taste, wenn ein Element den Fokus hat |
| onkeyup | Loslassen einer zuvor gedrückten Taste, wenn das Element den Fokus hat |
| onmousedown | Klicken einer Maustaste, wenn ein Element den Fokus hat |
| onmousemove | Mauszeigerbewegung, wenn ein Element den Fokus hat |
| onmouseout | Bewegen des Mauszeigers von einem Element weg |
| onmouseover | Platzieren des Mauszeigers auf einem Element |
| onmouseup | Loslassen einer zuvor gedrückten Maustaste, wenn ein Element den Fokus hat |
| Stil | Gibt ein Inline-Stylesheet an |
| Titel | Tooltip |
Beispiel
- Schließendes Tag ist erforderlich ()
- Das ID-Attribut ist erforderlich
- Für den Fall, dass Grafiken nicht verfügbar sind oder der Benutzer sie nicht erhalten kann, wird empfohlen, eine Textalternative zu einer Grafikkarte bereitzustellen
- Es wird nicht empfohlen, die Imagemap als Hauptnavigation zu verwenden, da die Unterstützung in älteren und Sprachbrowsern unzureichend ist
Etikett — Element auf Blockebene, d. h. Der Inhalt des Tags beginnt immer in einer neuen Zeile. Nach dem Tag wird außerdem ein Zeilenumbruch eingefügt.
HTML-Bilder mithilfe eines Tags zu Webseiten hinzugefügt werden . Durch den Einsatz von Grafiken werden Webseiten optisch ansprechender. Bilder tragen dazu bei, das Wesentliche und den Inhalt eines Webdokuments besser zu vermitteln.
Verwendung von HTML-Tags
Einfügen von Bildern in ein HTML-Dokument
1. Markieren ![]()
Element stellt ein Bild und seinen Fallback-Inhalt dar, der mithilfe des Alt-Attributs hinzugefügt wird. Da das Element
Wenn es sich um Kleinbuchstaben handelt, wird empfohlen, es in einem Blockelement zu platzieren, z. B.
Oder
Etikett verfügt über ein erforderliches src-Attribut, dessen Wert der absolute oder relative Pfad zum Bild ist:
Für Tag Folgende Attribute stehen zur Verfügung:
| Attribut | Beschreibung, akzeptierter Wert |
|---|---|
| alt | Das Alt-Attribut fügt hinzu alternativer Text für das Bild. Wird dort angezeigt, wo das Bild erscheint, bevor es geladen wird oder wenn Grafiken deaktiviert sind, und wird auch als Tooltip angezeigt, wenn Sie mit der Maus über das Bild fahren. Syntax: alt="Bildbeschreibung" . !} |
| Crossorigin | Mit dem Crossorigin-Attribut können Sie mithilfe von CORS-Anfragen Bilder von Ressourcen in einer anderen Domäne laden. Bilder, die mithilfe von CORS-Anfragen in die Leinwand geladen wurden, können wiederverwendet werden. Zulässige Werte: anonym – Die Cross-Origin-Anfrage erfolgt über einen HTTP-Header und es werden keine Anmeldeinformationen übertragen. Wenn der Server dem Server, von dem der Inhalt angefordert wird, keine Anmeldeinformationen bereitstellt, wird das Bild beschädigt und seine Verwendung wird eingeschränkt. use-credentials – Eine Cross-Origin-Anfrage wird durch die Übergabe von Anmeldeinformationen durchgeführt. Syntax: crossorigin="anonymous" . |
| Höhe | Das Höhenattribut gibt die Höhe des Bildes in px an. Syntax: height="300" . |
| ismap | Das Attribut ismap gibt an, dass das Bild Teil eines Kartenbildes ist, das sich auf dem Server befindet (ein Kartenbild ist ein Bild mit anklickbaren Bereichen). Wenn Sie auf ein Kartenbild klicken, werden die Koordinaten als URL-Abfragezeichenfolge an den Server gesendet. Das ismap-Attribut ist nur zulässig, wenn das Element Syntax: ismap. |
| longdesc | Eine erweiterte Bildbeschreibungs-URL, die das Alt-Attribut ergänzt. Syntax: longdesc="http://www.example.com/description.txt" . |
| src | Das src-Attribut gibt den Pfad zum Bild an. Syntax: src="flower.jpg" . |
| Größen | Legt die Bildgröße abhängig von den Anzeigeoptionen fest. Funktioniert nur, wenn das srcset-Attribut angegeben ist. Der Attributwert besteht aus einer oder mehreren durch Kommas getrennten Zeichenfolgen. |
| Quelle | Erstellt eine Liste von Bildquellen, die basierend auf der Bildschirmauflösung ausgewählt werden. Kann zusammen mit oder anstelle des src-Attributs verwendet werden. Der Attributwert besteht aus einer oder mehreren durch Kommas getrennten Zeichenfolgen. 
|
| Usemap | Das usemap-Attribut gibt das Bild als Imagemap an. Der Wert muss mit dem #-Symbol beginnen. Der Wert ist mit dem Wert des Namens- oder ID-Attributs des Tags verknüpft |
| Breite | Das width-Attribut gibt die Breite des Bildes in px an. Syntax: width="500" . |
1.1. Bildadresse
Die Bildadresse kann vollständig (absolute URL) angegeben werden, zum Beispiel:
URL (http://anysite.ru/images/anyphoto.png)
Oder über einen relativen Pfad von dokumentieren oder Wurzelverzeichnis Webseite:
url(../images/anyphoto.png) – relativer Pfad vom Dokument,
URL(/images/anyphoto.png) – relativer Pfad vom Stammverzeichnis.
Dies wird wie folgt interpretiert:
../ - bedeutet, eine Ebene nach oben zum Stammverzeichnis zu gehen.
images/ – gehe zum Ordner mit den Bildern,
anyphoto.png – verweist auf eine Bilddatei.
1.2. Bildabmessungen
Ohne die Bildabmessungen festzulegen, wird die Zeichnung in ihrer tatsächlichen Größe auf der Seite angezeigt. Sie können die Abmessungen des Bildes mithilfe der Attribute „Breite“ und „Höhe“ bearbeiten. Wenn nur eines der Attribute angegeben ist, wird das zweite automatisch berechnet, um die Proportionen des Bildes beizubehalten.
1.3. Grafikdateiformate
JPEG-Format (Gemeinsame Fotoexpertengruppe). JPEG-Bilder eignen sich ideal für Fotos und können Millionen verschiedener Farben enthalten. Bilder werden besser komprimiert als GIFs, aber Text und große Flächen mit Volltonfarbe können fleckig werden.
GIF-Format (Graphics Interchange Format). Ideal zum Komprimieren von Bildern mit einfarbigen Bereichen, z. B. Logos. Mit GIFs können Sie eine der Farben transparent einstellen, sodass der Hintergrund einer Webseite durch einen Teil des Bildes hindurchscheint. GIFs können auch einfache Animationen enthalten. GIF-Bilder enthalten nur 256 Farbtöne, wodurch die Bilder wie Poster fleckig und unrealistisch wirken.
PNG-Format (Tragbare Netzwerkgrafiken). Enthält die besten Funktionen der GIF- und JPEG-Formate. Enthält 256 Farben und ermöglicht es, eine der Farben transparent zu machen und gleichzeitig Bilder auf eine kleinere Größe als eine GIF-Datei zu komprimieren.
APNG-Format (Animierte tragbare Netzwerkgrafiken). Ein Bildformat, das auf dem PNG-Format basiert. Ermöglicht das Speichern von Animationen und unterstützt auch Transparenz.
SVG-Format (Skalierbare Vektorgrafiken). Eine SVG-Zeichnung besteht aus einer Reihe geometrischer Formen, die im XML-Format beschrieben werden: Linie, Ellipse, Polygon usw. Es werden sowohl statische als auch animierte Grafiken unterstützt. Der Funktionsumfang umfasst verschiedene Transformationen, Alphamasken, Filtereffekte und die Möglichkeit, Vorlagen zu verwenden. SVG-Bilder können ohne Qualitätsverlust in der Größe geändert werden.
BMP-Format (Bitmap-Bild). Es handelt sich um ein unkomprimiertes (Original-)Rasterbild, dessen Vorlage ein rechteckiges Pixelraster ist. Eine Bitmap-Datei besteht aus einem Header, einer Palette und Grafikdaten. Der Header speichert Informationen über das Grafikbild und die Datei (Pixeltiefe, Höhe, Breite und Anzahl der Farben). Die Palette wird nur in den Bitmap-Dateien angezeigt, die Palettenbilder (8 oder weniger Bits) enthalten und aus nicht mehr als 256 Elementen bestehen. Grafikdaten stellen das Bild selbst dar. Die Farbtiefe in diesem Format kann 1, 2, 4, 8, 16, 24, 32, 48 Bit pro Pixel betragen.
ICO-Format (Windows-Symbol). Speicherformat für Dateisymbole in Microsoft Windows. Außerdem wird das Windows-Symbol als Symbol auf Websites im Internet verwendet. Es handelt sich um ein Bild in diesem Format, das neben der Website-Adresse oder dem Lesezeichen im Browser angezeigt wird. Eine ICO-Datei enthält ein oder mehrere Icons, deren Größe und Farbe jeweils separat eingestellt werden können. Die Symbolgröße kann beliebig sein, am häufigsten sind jedoch quadratische Symbole mit einer Seitenlänge von 16, 32 und 48 Pixeln.
2. Markieren
Etikett
Für das Tag steht ein Namensattribut zur Verfügung, das den Namen der Karte angibt. Der Wert des Namensattributs für das Tag
Element
3. Markieren
Etikett beschreibt nur eine aktive Region als Teil einer clientseitigen Imagemap. Das Element hat kein schließendes Tag. Wenn ein aktiver Bereich einen anderen überlappt, wird der erste Link aus der Liste der Bereiche implementiert.
| Attribut | Kurzbeschreibung |
|---|---|
| alt | Legt alternativen Text für den aktiven Kartenbereich fest. |
| Koordinaten | Bestimmt die Position des Bereichs auf dem Bildschirm. Koordinaten werden in Längeneinheiten angegeben und durch Kommas getrennt: Für Kreis— Koordinaten des Mittelpunkts und des Radius des Kreises; Für Rechteck— Koordinaten der oberen linken und unteren rechten Ecke; Für Polygon— Koordinaten der Eckpunkte des Polygons in der erforderlichen Reihenfolge; es wird auch empfohlen, die letzten Koordinaten anzugeben, die den ersten entsprechen, um die Figur logisch zu vervollständigen. |
| herunterladen | Ergänzt das href-Attribut und teilt dem Browser mit, dass die Ressource in dem Moment geladen werden soll, in dem der Benutzer auf den Link klickt, anstatt sie beispielsweise zuerst öffnen zu müssen (wie eine PDF-Datei). Durch die Angabe eines Namens für ein Attribut geben wir dem geladenen Objekt somit einen Namen. Es ist erlaubt, ein Attribut zu verwenden, ohne seinen Wert anzugeben. |
| href | Gibt die URL für den Link an. Es kann eine absolute oder relative Linkadresse angegeben werden. |
| hreflang | Gibt die Sprache des zugehörigen Webdokuments an. Wird nur in Verbindung mit dem href-Attribut verwendet. Akzeptierte Werte sind eine Abkürzung, die aus einem Buchstabenpaar besteht, das den Sprachcode angibt. |
| Medien | Legt fest, für welche Gerätetypen die Datei optimiert wird. Der Wert kann eine beliebige Medienabfrage sein. |
| rel | Erweitert das href-Attribut um Informationen über die Beziehung zwischen dem aktuellen und dem zugehörigen Dokument. Akzeptierte Werte: alternativ – Link zu einer alternativen Version des Dokuments (z. B. eine gedruckte Form der Seite, eine Übersetzung oder eine Spiegelung). Autor – Link zum Autor des Dokuments. Lesezeichen – Permanente URL, die für Lesezeichen verwendet wird. Hilfe – Link zur Hilfe. Lizenz – Link zu Copyright-Informationen für dieses Webdokument. next/prev – gibt die Beziehung zwischen einzelnen URLs an. Dank dieses Markups kann Google feststellen, dass die Inhalte dieser Seiten in einer logischen Reihenfolge zueinander stehen. nofollow – verhindert, dass die Suchmaschine Links auf einer bestimmten Seite oder einem bestimmten Link folgt. noreferrer – gibt an, dass der Browser beim Folgen eines Links keinen HTTP-Anfrageheader (Referrer) senden soll, der Informationen darüber aufzeichnet, von welcher Seite der Website-Besucher kam. Prefetch – gibt an, dass das Zieldokument zwischengespeichert werden soll, d. h. Der Browser im Hintergrund lädt den Inhalt der Seite in seinen Cache herunter. Suche – Zeigt an, dass das Zieldokument ein Suchtool enthält. tag – gibt das Schlüsselwort für das aktuelle Dokument an. |
| Form | Gibt die Form des aktiven Bereichs auf der Karte und seine Koordinaten an. Kann folgende Werte annehmen: rect – rechteckiger aktiver Bereich; Kreis – aktiver Bereich in Form eines Kreises; Poly – aktiver Bereich in Form eines Polygons; Standard: Der aktive Bereich nimmt den gesamten Bereich des Bildes ein. |
| Ziel | Gibt an, wo das Dokument heruntergeladen wird, wenn auf den Link geklickt wird. Akzeptiert die folgenden Werte: _self – die Seite wird in das aktuelle Fenster geladen; _blank – die Seite wird in einem neuen Browserfenster geöffnet; _parent – die Seite wird in den übergeordneten Frame geladen; _top – die Seite wird im vollständigen Browserfenster geladen. |
| Typ | Gibt den MIME-Typ der Linkdateien an, d. h. Dateierweiterung. |
4. Beispiel für die Erstellung einer Imagemap
1) Markieren Sie das Originalbild in aktive Bereiche der gewünschten Form. Die Koordinaten der Flächen lassen sich beispielsweise mit einem Bildbearbeitungsprogramm berechnen: Adobe Photoshop oder Malen.
Reis. 1. Beispiel für Bildmarkierung zum Erstellen einer Karte 2) Legen Sie den Namen der Karte fest, indem Sie ihn dem Tag hinzufügen
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
!}
Reis. 2. Ein Beispiel für die Erstellung einer Imagemap: Wenn Sie mit dem Mauszeiger auf eine Blume klicken, gelangen Sie zu einer Seite mit einer Beschreibung
Profis
- Mit Bildkarten können Sie eine beliebige Form für den Referenzbereich definieren, was besonders für die Angabe eines geografischen Gebiets nützlich ist. Daher werden Imagemaps am häufigsten in geografischen Gebieten verwendet.
- Es ist bequemer, mit einem Bild zu arbeiten – Sie müssen sich beim Ausschneiden nicht um das Zusammenfügen einzelner Fragmente kümmern und das Bild kann einfach an der richtigen Stelle platziert werden.
Minuspunkte
- Wenn der Linkbereich eine komplexe Form hat, erhöht sich die Menge an HTML-Code. Die Kontur wird durch eine Reihe gerader Segmente angenähert; für jeden Punkt eines solchen Segments sollten zwei Koordinaten angegeben werden, und die Gesamtzahl solcher Punkte kann recht groß sein.
- Dementsprechend steigt die Komplexität der Koordinatenangabe. Es ist nicht bequem, sie manuell anzugeben, daher müssen Sie sie verwenden spezielle Programme, die Bereiche visuell darstellen und es Ihnen ermöglichen, sie zu bearbeiten.
- Wenn Sie das Bild ändern, beispielsweise wenn Sie den Maßstab vergrößern, müssen Sie die Koordinaten aller Referenzbereiche neu festlegen.
- Verschiedene Effekte, die beim Zerlegen eines Bildes in Fragmente zur Verfügung stehen, können Sie nicht auf Bildkarten anwenden: Rolleffekt, Teilanimation, individuelle Bildoptimierung für schnelles Laden.
- Es gibt keine klar definierten Linkgrenzen. Daher müssen diese Grenzen mit unterschiedlichen Mitteln direkt im Bild hervorgehoben werden. Wenn das Bild aus irgendeinem Grund nicht geladen wird, wird es sehr problematisch, die Verknüpfungen zu verstehen.
Aus Sicht der Benutzerfreundlichkeit haben Imagemaps nur einen Vorteil: die Einbindung von Links unterschiedlicher Form. Dies erhöht die Übersichtlichkeit der Informationsdarstellung – wir sind nicht auf die rechteckige Form des Links beschränkt und können Links mit komplexer Konfiguration für unsere eigenen Zwecke verwenden.
Bildkarten sind zweigeteilt Verschiedene Optionen- Server und Client. Wenn die Serveroption verwendet wird, sendet der Browser eine Anfrage an den Server, um die Adresse des ausgewählten Links zu erhalten, und wartet auf eine Antwort mit notwendige Informationen. Dieser Ansatz erfordert zusätzliche Zeit zum Warten auf das Ergebnis und separate Dateien für jede Imagemap.
In der Client-Version befindet sich die Karte im selben HTML-Dokument wie der Link zum Bild. Um anzugeben, dass es sich bei einem Bild um eine Karte handelt, verwenden Sie das usemap-Attribut des Elements . Der Wert ist ein Zeiger auf die Beschreibung der Kartenkonfiguration, die mithilfe des Elements festgelegt wird
Beispiel 1: Erstellen einer Imagemap
Im Behälter
Element hat die folgenden Attribute.
- Form – definiert die Form des aktiven Bereichs. Die Form kann die Form eines Kreises (Kreis), eines Rechtecks (Rect) oder eines Polygons (Poly) haben.
- alt – Fügt alternativen Text für jeden Bereich hinzu. Dient nur als Kommentar zum Link, da dieser nicht auf dem Bildschirm angezeigt wird. Erforderliches Attribut, wenn href vorhanden ist.
- Titel – zeigt einen Tooltip an, wenn Sie mit der Maus über einen Bereich fahren.
- href – gibt die Adresse des Dokuments an, zu dem gewechselt werden soll; seine Wirkung ähnelt einem ähnlichen Elementattribut .
- Koordinaten – legt die Koordinaten des aktiven Bereichs fest. Koordinaten werden in Pixeln von links gemessen obere Ecke Bild, das dem Wert 0, 0 entspricht. Die erste Zahl ist die horizontale Koordinate, die zweite ist die vertikale Koordinate. Die Koordinatenliste hängt von der Form des Gebiets ab.
Für einen Kreis werden drei Zahlen angegeben – die Koordinaten des Kreismittelpunkts und der Radius.
Bildkarte ermöglicht das Anhängen von Links zu Bildfragmenten. Durch Klicken auf einzelne Teile des Bildes kann der Benutzer dem einen oder anderen Link zu verschiedenen Webseiten folgen.
Die Imagemap wird durch ein gepaartes Tag definiert . Ein HTML-Dokument kann mehrere Imagemaps enthalten, daher muss jeder Map ein eindeutiger Name gegeben werden, der durch das Attribut bestimmt wird Name.
Eine Imagemap besteht aus Bildregionen und den entsprechenden Links. Beschreibt einen Ausschnitt des Bildes und weist ihm einen einzelnen Tag als Link zu .
Tag-Attribute
Standardmäßig werden Koordinaten in Pixeln gemessen.
Der Koordinatenursprung ist die obere linke Ecke des Bildschirms, d. h.
Beispiele für verschiedene Formen von Imagemap-Bereichen
Überlappen sich zwei beschriebene Bereiche, so wird der zum ersten gehörende Link verwendet. Diese Funktion kann in einer Situation verwendet werden, in der der Benutzer auf einen Punkt klickt, der zu keinem der Kartenbereiche gehört, indem der letzte Kartenbereich als Rechteck mit der Breite und Höhe des gesamten Bildes definiert wird.
Um ein Bild als Karte in einem Tag zu verwenden
Sie müssen ein zusätzliches Attribut eingeben Usemap, der den Namen der Imagemap angibt. Diesem Namen ist ein „#“-Zeichen vorangestellt.
Beispiel für die Verwendung von Image Map
Wenn Sie auf verschiedene Bereiche eines bestimmten Bildes klicken, ändert sich die Farbe des entsprechenden Textes.
