nicht angemeldet
Bildertausch - am Besten per CSS...
Hallo!
Ich könnte nochmal eure Hilfe brauchen: Auf einer Seite habe ich ein Bild (nenn ich mal Bild1) und ein anderes, welches als Image Map dient. Dort sind fünf Bereiche definiert. Nun soll sich Bild1 ändern wenn man über diese fünf Bereiche fährt (onmouseover, hover, wie auch immer). Es soll aber nicht immer das selbe Bild erscheinen, sondern bei allen fünf jeweils etwas anderes...
Zu dem Thema finde ich immer nur irgendwelche Menügeschichten, oder Links als Buttons, die sich entweder nicht für meine Zwecke nutzen lassen, oder sehr aufwändiges JavaScript benutzen...
Gibt es da keine einfache CSS-Möglichkeit?
Danke für eure Hilfe!
-
Hallo,
Ich könnte nochmal eure Hilfe brauchen: Auf einer Seite habe ich ein Bild (nenn ich mal Bild1) und ein anderes, welches als Image Map dient. Dort sind fünf Bereiche definiert. Nun soll sich Bild1 ändern wenn man über diese fünf Bereiche fährt (onmouseover, hover, wie auch immer). Es soll aber nicht immer das selbe Bild erscheinen, sondern bei allen fünf jeweils etwas anderes...
Zu dem Thema finde ich immer nur irgendwelche Menügeschichten, oder Links als Buttons, die sich entweder nicht für meine Zwecke nutzen lassen, oder sehr aufwändiges JavaScript benutzen...
Gibt es da keine einfache CSS-Möglichkeit?mit CSS geht es nicht. Was spricht gegen eine JavaScript-Lösung?
Rein theoretisch wäre es ein Einzeiler hinter einer onclick Anweisung.
getelementbyid und onclick dürften hier für dich interessant sein.Grüße, Matze
-
Hallo Matze!
Einzeiler hört sich gut an! Kennst du eine Website wo ich mir das mal angucken könnte?
Gruß, BK
-
Hallo,
Einzeiler hört sich gut an! Kennst du eine Website wo ich mir das mal angucken könnte?
Grüße, Matze
-
hm, ok...
ich meinte eher ein beispiel, bin mit javascript nicht wirklich vertraut...
aber ok, ich kämpf mich da mal durch...-
Hallo,
ich meinte eher ein beispiel, bin mit javascript nicht wirklich vertraut...
ok.
Bild welches sich ändern soll:
[coder lang=html]
<img src="DAS_BILD_WELCHES_SICH_ÄNDERN_SOLL" id="BILDID" />
[/code]
Link der das Bild ändert:
[coder lang=html]
<a href="#" onclick="document.getElementById('BILDID').src=NEUES_BILD; return false"><img src="MENÜPUNKTBILD" /></a>
[/code]Das war jetzt bisschen unsauberes XHTML. Nur ein Beispiel ebend.
aber ok, ich kämpf mich da mal durch...
Das ist schön.
Grüße, Matze
-
Hallo nochmal,
Das war jetzt bisschen unsauberes XHTML.
unsauberer Forumscode auch noch...
<img src="DAS_BILD_WELCHES_SICH_ÄNDERN_SOLL" id="BILDID" /> <a href="#" onclick="document.getElementById('BILDID').src=NEUES_BILD; return false"><img src="MENÜPUNKTBILD" /></a>Grüße, Matze
-
<img id="bild" border="0" src="rauschen.jpg" width="382" height="280" alt="rauschen.jpg"> <map name="fernseher"> <area shape="circle" coords="545,65,10" href="#" onmouseover="document.getElementById('bild').src=impressum.jpg; return false" alt="Impressum" title="Impressum"> <snip></snap></map>wo mach' ich den fehler... es funktioniert nciht...
-
Hallo,
wo mach' ich den fehler... es funktioniert nciht...
mach es so:
(...)src='impressum.jpg';(...)Also in einfachen Anführungszeichen.
Grüße, Matze
-
Hallo,
wo mach' ich den fehler... es funktioniert nciht...
hier fehlt noch das usemap-Attribut im <img >
- so praktisch Einzeiler sein mögen. Gerade für Anfänger ist die Fehleranalyse doch schwierig.
- der HTML-Code wird unübersichtlich
jetzt fehlt noch die onmouseout-Funktion
wenn jetzt noch die hover-Bilder vorgeladen werden müssen, weil sie sonst zu langsam geladen werden?
dann doch lieber etwas mehr javascript-overhead
Gruß plan_B
--
*®*´¯`·.¸¸.·
-
-
-
-
-
-
-
Hallo,
Gibt es da keine einfache CSS-Möglichkeit?
mit CSS geht es nicht.
Das dürfte so nicht ganz richtig sein, allerdings mag eine CSS-Lösung etwas
umständlich ausfallen, und, wie so oft bei CSS, auch nicht gleich gut für alle
Browser realisierbar sein.Was spricht gegen eine JavaScript-Lösung?
Die bekannten Überlegungen "Was aber wenn JavaScript deaktiviert ist" sind
vielleicht wirklich eher theoretischer Natur, abgesehen vielleicht von der
der Forderung nach alternativen Inhalten.Grüsse
Cyx23
--
Spuren-
Hallo,
mit CSS geht es nicht.
Das dürfte so nicht ganz richtig sein, allerdings mag eine CSS-Lösung etwas
umständlich ausfallen, und, wie so oft bei CSS, auch nicht gleich gut für alle
Browser realisierbar sein.ich denk da an Kindelemente in Verbindung mit hover.
Das sollte jeder aktuelle Browser hinkriegen.
Meiner Meinung nach ging es aber darum die Bilder in einem völlig anderem Bereich zu ändern. Da dürfte man mit CSS an seine Grenzen stossen.Was spricht gegen eine JavaScript-Lösung?
Die bekannten Überlegungen "Was aber wenn JavaScript deaktiviert ist" sind
vielleicht wirklich eher theoretischer Natur, abgesehen vielleicht von der
der Forderung nach alternativen Inhalten.Die Frage war auch eher ernsthaft an den OP gerichtet.
Hätte er gesagt, er "muss unbedingt" auf JavaScript verzichten o.ä. wär ich darauf eingegangen.Grüße, Matze
-
-
-
Tach.
Nun soll sich Bild1 ändern wenn man über diese fünf Bereiche fährt (onmouseover, hover, wie auch immer). Es soll aber nicht immer das selbe Bild erscheinen, sondern bei allen fünf jeweils etwas anderes...
http://www.cssplay.co.uk/menu/old_master.html
Etwa in der Art?
--
Once is a mistake, twice is Jazz.