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

Hover und Tooltips und Links und rQuiz 3

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.


Die Vorgehensweise habe ich hier beschrieben.


Für das rQuiz verweise ich auf diese Seiten und Unterseiten. Dort ist auch eine Downloadmöglichkeit für das vom Template benötigte rquiz3k.zip.


Zur dieser Demo-Seite zusätzlich mit rQuiz 3rund um die Teile des Baumes

 

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

» Sitemap

Einige Bereiche dieser Website benötigen zu ihrer Funktion sogenannte SESSION-Cookies, die jedoch keine personenbezogenen Daten enthalten, die sich auf Sie, Ihren Webclient oder Ihr Gerät beziehen. Es werden nur seiteninterne Werte gespeichert. Bitte geben Sie Ihre Erlaubnis, weitere Cookies auf Ihrem Rechner zu platzieren. Mehr Info