1-image 2-image 3-image
Sie sind hier: Startseite > Templates > Hover+Tooltips+Links

Hover und Tooltips und Links

Meine Idee war, dass ich ein Bild beschriften wollte, aber nicht einfach ein beschriftetes Bild online stellen. Es sollte eine Art Arbeitsblatt, also ein Bild mit Leerboxen sein. Diese Leerboxen sollten beim Überfahren mit der Maus ein anderes Bild zeigen, z.B. die Lösung. Und dann sollte es noch die Möglichkeit geben, eine Info-Box zeitgleich einzublenden und weil ja insgesamt nur wenig Platz für diese Informationen zur Verfügung steht zusätzlich eine Möglichkeit von Links gegeben sein.
Dann sollte alles möglichst mit CSS gestaltet werden, weil nicht jeder User Javascript einschaltet bzw. erlaubt.

Ich habe früher schon mit Rollover oder mouseover Inhalte gestylt.

In diversen Foren las ich immer wieder: „Allerdings gibt es hier die Beschränkung, dass es laut selfhtm nicht möglich ist, <area> mit CSS zu stylen.
Es hilft also auch nicht für jeden area-Bereich eine eigene class zu definieren. Der hover-sensitive span-tag interagiert nicht mit dem area-tag. Es ist egal, ob er innerhalb des map-Bereiches oder ausserhalb davon steht. Sein „rahmendes” Element ist alleine der a-tag. Somit ist der gesamte Bereich, der durch den a-tag aufgespannt wird (hier das Bild) die Sensorfläche.”

Um nur einen Teil der Grafik als Sensor für den Tooltip zu aktivieren, bleibt nur dieser Weg:
Aus der gewählten Grafik einzelne Zellen für den Tooltip sensibilisieren.
Das ist jedoch MEGA - aufwändig!!!


Irgendwann fand ich im Internet eine Lösung, die mir sehr gut gefiel. Leider ist die Seite des Programmierers in China offline. Nach einiger Suche fand ich diese Seite: Pure CSS Image Maps mit der zip-Datei, die alles nötige enthält.

Zur Anpassung an dieses CMSimple_XH-System erstellte ich ein entsprechendes Template, das funktioniert. Ich bin kein Programmierer, so dass jmd. anderes bestimmt noch etliche Verbesserungen machen kann. Dazu veränderte ich die Originaldateien entsprechend. Das Template, das der Demo-Seite zugrunde liegt, stelle ich zum Download bereit.

Die zip-Datei mit der Bezeichnung 1288771923 von htmldrive.net beinhaltet den Ordner cssimagemaps. Darin findet sich ein weiterer Ordner images und die index.html.
1. Ich benutzte ein bereits funktionierendes Template, das ich umbenannte.
2. In die Datei template.htm fügte ich im Bereich <head> diese Zeilen <link href="stylesheet.css" rel="stylesheet"> und <link rel="stylesheet" type="text/css" href="<?=$pth['folder']['template']?>user.css"> vor dem schließenden </head> ein.
3.  Aus der index.html übernahm ich die CSS-Angaben, die zwischen <style type="text/css"> und </style> stehen und fügte sie in eine neue user.css -Datei im Template-Ordner ein.
4. Dem Beispiel des Programmierers folgend, nutze ich zunächst den Ordner images ebenfalls, um die benötigten Bilder dort zu lagern. Ich finde, das erleichtert die Prorammierung der jeweiligen Seite erheblich, da der Code in der user.css jeweils angepasst wird [nicht elegant, aber es funktioniert]. (Ggf. wird es irgendwann eine andere Möglichkeit geben. Ich kann z.Zt. damit leben, dass es für jede Seite ein eigenes Template geben muss.)

5. In der Website eine Seite erstellen.
6. Das spezielle Template für diese gerade erstellte Seite auf den Server hochladen und unter dem Reiter Seite ⇒ Seitentemplate auswählen und durch Speichern aktivieren.
7. In der Seite im Fenster Quellcode des Editors diese Zeilen hineinkopieren.
8. Jetzt beginnt der aufwändige Teil: Bild auswählen. Bildgröße im Bildbearbeitungsprogramm bestimmen. Dieses Bild in den Ordner images im gewählten Template-Ordner hochladen.
9. In der user.css im zuletzt eingefügten Code zu (/* START TOOLTIP STYLES von: www.htmldrive.net/items/show/704/pure-CSS-Image-Maps */) bei #container und ul#pureimagemap entsprechend die Werte für width: 728px; height: 317px; mit den aktuellen Daten für das gewählte Bild ändern.
10. Bei ul#pureimagemap und bei ul#pureimagemap li a:hover wird dann diese Zeile  background: url(images/aeussere_augenteile.jpg) no-repeat 0 0;  entsprechend geändert.
11. Die Negativ-Werte nutze ich nicht. Deshalb fügte ich dies bei allen 6 Aufrufen ebenfalls ein.
12. Für das Ausschneiden der unterschiedlich großen Leerfelder (wie im Arbeitsblatt vorgesehen), nutze ich ein  Bildbearbeitungsprogramm.  Die Größenangaben sind auch wichtig. Sie werden bei den Blocknamen (z.B.: .block1) unter width: 157px; und height: 33px; (jeweils mit Pixelangaben) eingetragen. Dann wird bei dem entsprechenden Blocknamen (z.B.: ul#pureimagemap li.block1 a:hover) diese Angabe zum Speicherort des Bildes vermerkt: background: url(images/wurzeln1.jpg) no-repeat 0 0;

Die Umbenennung von Kontinentnamen (z.B. australia) in Blocknamen block1 bis block-x hat den Vorteil, dass bei anderen Anforderungen jeweils schnell weitere eingefügt und umbenannt werden können.

13. Mit Hilfe des Bildbearbeitungsprogramms können auch die Koordinaten der linken oberen Ecke eines Leerkastens bestimmt werden. Diese Angaben werden dann bei den Blocknamen (z.B.: .block1) unter top: 405px; left: 364px;(jeweils mit Pixelangaben) eingetragen.
14. Anschließend werden die fehlenden Bilddateien in den images-Ordner und die stylesheet.css in den Template-Ordner auf den Server geladen. Mit der Tastenkombination <Strg>+<F5> wird ein Refresh der Seite durchgeführt und das Ergebnis kontrolliert.

Ist alles perfekt gelaufen, dann funktionieren die Hover-Effekte.

15. Als Nächstes ist dann die Seite selbst dran. Dazu das Quelltextfenster im Editor öffnen. Jetzt werden diese Zeilen bei den Blocknamen (z.B.: class="block1") nacheinander bearbeitet:
<li class="australia"><a href="https://de.wikipedia.org/wiki/Baum#Wurzel" target="_blank" rel="noopener"> <span> <strong>Info 6:</strong>ist unterirdisch</span> </a></li>

Erklärungen (z.B.): <li class="block1">[Klasse wird aufgerufen und die entsprechenden Angaben aus der user.css] <a href[öffnender tag für den Link]="https://de.wikipedia.org/wiki/Baum#Wurzel" [der Link wird hier eingetragen] target="_blank" rel="noopener" [durch diese Angabe wird ein neues Fenster im Browser geöffnet]> <span> <strong>Info 6:</strong>ist unterirdisch</span>[unter dem Hover-Feld wird eine schwarze Box mit weißer Schrift eingeblendet] </a>[schließender tag für den Link]</li>
Das bedeutet, dass sowohl das Hoverbild als auch der Text in der schwarzen Box die Sensorfläche für Maus und Links sind.

16. Wird kein Link zu einer anderen Seite gewünscht, so kann der Aufruf <a href="https://de.wikipedia.org/wiki/Baum#Wurzel" target="_blank" rel="noopener"> in <a href="#">  geändert werden.

Ist alles eingetragen, das Quelltext-Fenster mit OK geschlossen, wird diese Seite noch gespeichert und alles in der Vorschau betrachtet.

Zur Demo-Seiteder äußeren Augenteile

 

Letzte Bearbeitung:
weiter zu:
Please activate JavaScript in your browser.

» Sitemap

Aufgrund der neuen Cookies-Verordnung der EU: Einige Bereiche dieser Website benötigen zu ihrer Funktion neben den sogenannten SESSION-Cookies, auch Cookies, die personenbezogenen Daten enthalten, die sich auf Sie, Ihren Webclient und / oder Ihr Gerät (PC oder Mobil-Gerät) beziehen (also: personenbezogenen Daten). Es werden nur seiteninterne Werte gespeichert. Bitte geben Sie Ihre Erlaubnis, evtl. weitere Cookies auf Ihrem Rechner zu platzieren. Erfahren Sie mehr über diese Cookies im Unterpunkt des Impressums bei Cookies.