nicht angemeldet
Bild auswechseln, wenn Maus ueber bestimmte area geht
0
Bild auswechseln, wenn Maus ueber bestimmte area geht
Habe das Forum studiert, es aber leider nicht geschafft, die Beitraege fuer mein Problem anzuwenden.
Ich habe ein Banner auf meiner Seite. In dem Bild (bild1) habe ich eine linke und eine rechte area markiert.
Ich moechte nun, dass beim onmouseover im linken Bereich ein bild2 das bild1 ersetzt und wieder verschwindet bei onmouseout.
Dementsprechend soll beim onmouseover im rechten Bildbereich ein bild3 das bild1 ersetzen (und bild1 zurueckkommen, wenn man mit der Maus rausgeht).
Areas setzen klappt. Ein einzelnes Bild ohne areas mit onmouseover zu ersetzen, klappt auch.
Aber wie kombiniere ich beides? (Am besten nur mit CSS)
Bin fuer jede Hilfe dankbar!!!
-
Om nah hoo pez nyeetz, Thomas!
ich würde zwei getrennte div-Bereiche verwenden und die Grafik als Hintergrund definieren, zum Beispiel bild1 und bild2.
Dann kannst du den Geschwisterselektor verwenden.
#bild1:hover ~ #bild2 { ... }
CSS-Sprites sollten dich in diesem Falle auch interessieren.
Matthias
--
-
Om nah hoo pez nyeetz, Matthias Apsel!
CSS-Sprites sollten dich in diesem Falle auch interessieren.
wenn man konsequent Sprites verwendet, kommt man auch mit einem div aus.
Matthias
--
-
Danke an alle, die geantwortet haben.
Habe mich noch durch gefühlte tausend Foren geclickt und dann eine Lösung gefunden.
Für alle, die es interessiert, so geh's:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"><head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Bild wechseln</title>
<link href="5dsstyle.css" rel="stylesheet" type="text/css" media="screen" /><script language="javascript">
<!--//-->
</script></head>
<body>
<img name="imgOver" src="bild1.jpg" width=1000 height=200 border=0 usemap="#banner">
<map name="banner">
<area shape="rect" coords="0,0,500,200" href="links.html" onmouseover="imgOver.src='bild2.jpg'" onmouseout="imgOver.src='bild1.jpg'" title="Click here to learn more abot left side">
<area shape="rect" coords="500,0,1000,200" href="rechts.html "onmouseover="imgOver.src='bild3.jpg'" onmouseout="imgOver.src='bild1.jpg'" title="Click here to learn more about right side">
</map></body>
</html>
-
Om nah hoo pez nyeetz, Thomas!
Es ist eine bessere Idee, eine Hintergrundgrafik zu verwenden und diese zu verschieben.
Matthias
--
-
-
-
Dann kannst du den Geschwisterselektor verwenden.
Geschwister-Selektor ist und bleibt eine dämliche Übersetzung.
Einerseits kann damit nicht ordentlich zwischen angrenzenden/nachfolgenden und allgemeinen Geschwistern unterschieden werden, andererseits sind es genauer gesagt keine einfachen Selektoren sondern Kombinatoren.
Können wir also bitte "Kombinator für allgemeine Geschwister" und "Kombinator für direkt darauffolgende Geschwister" sagen - oder noch besser die englischsprachigen Fachbegriffe (zumindest in den Überschriften), damit Missverständnisse ausgeschlossen werden.
-
Om nah hoo pez nyeetz, suit!
Dann kannst du den Geschwisterselektor verwenden.
Geschwister-Selektor ist und bleibt eine dämliche Übersetzung.
Ursprünglich wollte ich an dieser Stelle meiner Antwort einen Grinse-smiley für dich unterbringen, denn dies hatten wir schon. Ändere es doch einfach im Wiki.
Matthias
--
-
Ursprünglich wollte ich an dieser Stelle meiner Antwort einen Grinse-smiley für dich unterbringen, denn dies hatten wir schon. Ändere es doch einfach im Wiki.
Mir fällt auch nichts spannenderes ein - Vorschläge?
-
Om nah hoo pez nyeetz, suit!
ausgehend von deinem Vorposting: Kombinatoren ist berücksichtigt, die von dir angesprochene Verwechslungsgefahr besteht nicht, denn es ist von direkten Nachbarn (Nachbarselektor) und Schwesternselektor die Rede.
Ich sehe eher noch eine Verwechslungsgefahr zwischen " " und "+".
Die offizielle Übersetzung spricht von
- Selektoren für Nachfahren
- Kind-Selektoren
- Selektoren für benachbarte Elemente
CSS3 gibt es wohl noch nicht offiziell auf deutsch aber sibling bedeutet nun mal Geschwister.
- benachbarte Geschwister
- allgemeine Geschwister
Man könnte vielleicht "Selektoren für Geschwister" und "Selektoren für benachbarte Geschwister" verwenden. Dass diese Vergleiche aber erst dann funktionieren, wenn man die Struktur des Dokumentes verstanden hat, liegt auf der Hand.
Matthias
--
-
Ursprünglich wollte ich an dieser Stelle meiner Antwort einen Grinse-smiley für dich unterbringen, denn dies hatten wir schon. Ändere es doch einfach im Wiki.
Mir fällt auch nichts spannenderes ein - Vorschläge?
Inzestuator
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Om nah hoo pez nyeetz, Beat!
Inzestuator
auch das wäre nicht eindeutig.
Matthias
--
-
-
-
-
-
ich würde zwei getrennte div-Bereiche verwenden und die Grafik als Hintergrund definieren, zum Beispiel bild1 und bild2.
»»
Vielen Dank, Matthias,
ich hatte gehofft, das ginge auch einfacher (bin Anfaenger)Ich habe die areas hier definiert:
<img src="bild1.jpg" width="1000px" height="200px" border="none" usemap="#banner" />
<map name="banner">
<area shape="circ" coords="100, 100, 200" title="Linke Seite" />
<area shape="circ" coords="900, 100, 200" title="Rechte Seite" />
</map>und dachte man koennte einfach das Bildwechseln
<img src="bild1.jpg" width="300" height="200"
onmouseover="this.src='bild2.jpg'"
onmouseout="this.src='bild1.jpg'">Da irgendwie reinschreiben. Geht das nicht?
Nochmals vielen Dank an Matthias und alle, die was geschrieben haben.
Thomas-
Om nah hoo pez nyeetz, Thomas!
sind die runden areas wirklich notwendig?
Ich bin nicht so ganz sicher was du eigentlich möchtest, eine Lösung mit Javascript gibt es u.a. von Peter Seliger, nachzuschlagen, auszuprobieren, anzupassen unter billiger-im-urlaub.de.
Matthias
--
-
Om nah hoo pez nyeetz, Thomas!
sind die runden areas wirklich notwendig?
Ich bin nicht so ganz sicher was du eigentlich möchtest, eine Lösung mit Javascript gibt es u.a. von Peter Seliger, nachzuschlagen, auszuprobieren, anzupassen unter billiger-im-urlaub.de.
Matthias
Danke, Matthias,
ob rund oder eckig ist egal, es geht nur darum die linke Bildseite von der rechten zu unterscheiden.
Das Ursprungsbild soll zwei Personen zeigen, eine links, eine rechts, beide gleich groß.
Geht man mit der Maus über die linke Bildseite (links stehende Person), so soll das Bild ausgetauscht werden gegen eins, wo diese Person im Vordergrund steht, und die andere im Hintergrund.
Geht man mit der Maus über die rechte Seite des Ursprungsbildes, also die andere Person, soll ein Bild kommen, wo diese im Vordergrund steht.
Geht man mit der Maus aus einem Bild raus, soll das Ursprungsbild mit den gleich großen Personen kommen.Viele Grüße und Danke für das Österreich-Beispiel
Thomas-
Om nah hoo pez nyeetz, Thomas!
Viele Grüße und Danke für das Österreich-Beispiel
das, was du möchtest, lässt sich wie das Österreich-Beispiel umsetzen. Es gibt auch eine Version mit Rechtecken.
Matthias
--
-
-
-
-