Anregung gesucht: Interaktivität (Bildwechsel)

[Jens]

Hallo allerseits,

ich brauche mal eine Anregung, wie ich mit einfachen Mitteln (also ohne Flash etc.) eine rudimentäre Form der Interaktivität in eine Internetseite einbauen kann. Gegeben sei folgendes als Grafik angezeigte Dialogfenster:

Gerne würde ich die Grafik bei einem Klick auf das "Geheim"-Tab austauschen. Einen Bildwechsel bei einem Klick auf den Bereich des als ImageMap eingebundenen Bildes kriege ich mit JavaScript hin, das möchte ich aber nicht (sollte ohne JavaScript funktionieren).

Via CSS könnte man vermutlich über eine geschickte :hover-Zuweisung das Bild beim Drüberfahren austauschen, ich möchte den Wechsel aber am liebsten erst nach einem Klick vollziehen.

Eine ganz andere HTML-Seite möchte ich auch nicht öffnen.

Irgendwelche Vorschläge?

Dank und Gruß,

Jens

[Christoph Schnauß]

hallo,

Gerne würde ich die Grafik bei einem Klick auf das "Geheim"-Tab austauschen. Einen Bildwechsel bei einem Klick auf den Bereich des als ImageMap eingebundenen Bildes kriege ich mit JavaScript hin

ImageMap muß nicht zwingend mit Javascript kombiniert werden.

Via CSS könnte man vermutlich über eine geschickte :hover-Zuweisung das Bild beim Drüberfahren austauschen

Vermutlich gibts noch mehr Pseudoformate als bloß :hover ;-)

Interessante Idee, probiert hab ich das auch noch nicht, aber du willst ja ausdrücklich Firefox ansprechen. Allerdings solltest du berücksichtigen, was in http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#server_seitig steht:" Insgesamt kann diese Methode heute als veraltet gelten und wird hier nur noch der Vollständigkeit halber erwähnt".

Grüße aus Berlin

Christoph S.

[Gernot Back]

Hallo Jens,

Gerne würde ich die Grafik bei einem Klick auf das "Geheim"-Tab austauschen. Einen Bildwechsel bei einem Klick auf den Bereich des als ImageMap eingebundenen Bildes kriege ich mit JavaScript hin, das möchte ich aber nicht (sollte ohne JavaScript funktionieren).

Mit einer ImageMap kannst du das meines Wissens nicht, denn der lässt sich keine Style-Eigenschaft zuweisen, sondern nur dem Bild selbst.

Du könntest aber dein Bild in Slices zerschneiden und diese direkt verlinken, ohne Umweg über die Imagemap. Verlinken ist ja leider nötig für den IE, wenn man mit dem Pseudoformat a:active arbeiten will. Bei anderen Browsern kannst du derlei Effekte vielleicht auch bei anderen als A-Elementen und mit dem Pseudoformat :focus erzielen.

Gruß Gernot

[Christoph Schnauß]

hallo,

Mit einer ImageMap kannst du das meines Wissens nicht, denn der lässt sich keine Style-Eigenschaft zuweisen, sondern nur dem Bild selbst.

Ich wüßte nicht, warum das so sein sollte. Aber es geht auch nicht darum, <map> mit CSS zu formatieren, sondern es geht um eine <area>. Die kann selbst ein Attribut "href" haben (siehe http://de.selfhtml.org/html/referenz/attribute.htm#area).

Du könntest aber dein Bild in Slices zerschneiden und diese direkt verlinken

Das wäre eher ein Umweg als ein Ausweg.

Verlinken ist ja leider nötig für den IE, wenn man mit dem Pseudoformat a:active arbeiten will.

Das Pseudoformat lautet ":active" und nicht "a:active". Und der IE kann auch mit den anderen Pseudoformaten durchaus was anfangen, wenngleich nicht bei allen Elementen, für die sie bei standardkonformen Browsern zulässig sind.

Bei anderen Browsern kannst du derlei Effekte vielleicht auch bei anderen als A-Elementen und mit dem Pseudoformat :focus erzielen.

":focus funktioniert bei anderen Elementen als Verweisen auch. Wenn Sie beispielsweise für h1:focus CSS-Eigenschaften definieren und dann mit der Maus auf eine h1-Überschrift klicken, nimmt diese, solange die Maus geklickt ist, die definierten Eigenschaften an" läßt sich in http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus nachlesen.

Grüße aus Berlin

Christoph S.

[Gernot Back]

Hallo Christoph,

Mit einer ImageMap kannst du das meines Wissens nicht, denn der lässt sich keine Style-Eigenschaft zuweisen, sondern nur dem Bild selbst.

Natürlich ist es zulässig style als Universalattribut allen Elementen zuzuweisen. Die Frage ist nur, welchen Sinn das beim Area-Element haben sollte. Die Map selbst wird ja nicht sichtbar, nur ihre Auswirkungen auf das Bild.

Da müsste das Bild ja schon ein Kind-, Nachfahrens- oder direktes Nachfolgerelement der Area sein, damit man das Erscheinungsbild des Bildes verändern könnte. Stattdessen stehen aber Map- und Bild-Element im Quellcode in einer räumlichen Fernbeziehung, die über das Attribut usemap und das entsprechende Namensattribut des Map-Elements hergestellt wird.

Ich wüßte nicht, warum das so sein sollte. Aber es geht auch nicht darum, <map> mit CSS zu formatieren, sondern es geht um eine <area>. Die kann selbst ein Attribut "href" haben (siehe http://de.selfhtml.org/html/referenz/attribute.htm#area).

Das ist mir bekannt, aber versuch doch mal die Cursor-Eigenschaften deines Bildes über bestimmten Arealen mit einem Hover-Effekt unterschiedlich zu gestalten. Ich habe das unlängst hier demonstriert, wie man das schaffen kann: Ich schaffe es nur mit JavaScript. (Leider finde ich den Link zu dem im Archiv verschwundenen Posting nicht mehr, mein letzter Eintrag dort ist über einen Monat alt, was ja nicht stimmen kann)

Deshalb hier noch mal zur Demo, bei der ich, um sowohl Opera 7.54 als auch Mozilla 1.7.2 zu bedienen, auch noch mit ziemlich unschönen Tricks (nachträgliche Eliminierung des href-Attributs aus der Area arbeiten musste).

Du könntest aber dein Bild in Slices zerschneiden und diese direkt verlinken

Das wäre eher ein Umweg als ein Ausweg.

Meines Erachtens der einzige Weg, aber ich lasse mich durch ein lauffähiges Gegenbeispiel gerne korrigieren.

Verlinken ist ja leider nötig für den IE, wenn man mit dem Pseudoformat a:active arbeiten will.

Das Pseudoformat lautet ":active" und nicht "a:active". Und der IE kann auch mit den anderen Pseudoformaten durchaus was anfangen, wenngleich nicht bei allen Elementen, für die sie bei standardkonformen Browsern zulässig sind.

Bei anderen Browsern kannst du derlei Effekte vielleicht auch bei anderen als A-Elementen und mit dem Pseudoformat :focus erzielen.

":focus funktioniert bei anderen Elementen als Verweisen auch. Wenn Sie beispielsweise für h1:focus CSS-Eigenschaften definieren und dann mit der Maus auf eine h1-Überschrift klicken, nimmt diese, solange die Maus geklickt ist, die definierten Eigenschaften an" läßt sich in http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus nachlesen.

Bei mir tut sich bei h1:focus im IE6 unter Win98 gar nichts, aber naürlich hast du Recht, dass ich mich durch die Unfähigkeit des IE nicht davon abbringen lassen sollte, die Pseudoformate richtig zu benennen.

Gruß Gernot