onmouseover text soll ein bild erscheinen

[prakti]

moin
ich habe viel gesucht und es gibt zwar viel zum Thema aber ich hab nichts hilfreiches gefunden. :(

Mein Problem ist folgendes:
ich habe einen ganz normalen Text (kein Link) und wenn man ein mouseover macht soll ein Bild dazu erscheinen...

eigentlich ganz einfach, bin aber noch nicht vertraut mit dem ganzen
brauche dringend Hilfe... danke
lg

[Gunnar Bittersmann]

@@prakti:

nuqneH

ich habe viel gesucht und es gibt zwar viel zum Thema aber ich hab nichts hilfreiches gefunden. :(

Wenn du unter HTML suchst, wird du auch kaum fündig werden.

ich habe einen ganz normalen Text (kein Link) und wenn man ein mouseover macht soll ein Bild dazu erscheinen...

Und das soll wie aussehen? Ein Hintergrundbild mit CSS per :hover?

Qapla'

[prakti]

Wenn du unter HTML suchst, wird du auch kaum fündig werden.

ich bin noch komplette Anfängerin und muss mir das leider selbst beibringen

Und das soll wie aussehen?

ungefähr so wie auf dieser Seite (http://www.profirepro.de/#TEAM und dann unter Team) ich hab einen Namen und wenn man drüber geht soll ein kleines Bild von der Person erscheinen...

[Matthias Apsel]

Om nah hoo pez nyeetz, prakti!

ungefähr so wie auf dieser Seite (http://www.profirepro.de/#TEAM und dann unter Team) ich hab einen Namen und wenn man drüber geht soll ein kleines Bild von der Person erscheinen...

keinen Bock auf Flash.

Matthias

[prakti]

keinen Bock auf Flash.

soll ja auch kein flash werden, das sollte nur ein Beispiel sein wie es aussehen soll
ich weiß auch schon wie man bei mouseover Text einen anderen Text anzeigen lassen kann, nur nicht wie das gehen soll wenn ein Bild angezeigt werden soll...

[prakti]

Das ist der Code den ich bereits habe,...

onmouseover="this.innerHTML='Sehen Sie?'"
 onmouseout="this.innerHTML='Name:<br>Telefon:'">

funktionieren tut er auch, aber 'Sehen Sie?' soll durch ein Bild ersetzt werden...

[ChrisB]

Hi,

Das ist der Code den ich bereits habe,...

onmouseover="this.innerHTML='Sehen Sie?'"
onmouseout="this.innerHTML='Name:<br>Telefon:'">

funktionieren tut er auch, aber 'Sehen Sie?' soll durch ein Bild ersetzt werden...

Und wenn „Sehen Sie?“ jetzt nicht im JavaScript stehen würde, sondern ganz normaler Text in einem HTML-Dokument wäre - was würdest du denn *dann* machen, um ihn (statisch) durch ein Bild zu ersetzen ...?

MfG ChrisB

[prakti]

onmouseover="this.innerHTML='Sehen Sie?'"
onmouseout="this.innerHTML='Name:<br>Telefon:'">

funktionieren tut er auch, aber 'Sehen Sie?' soll durch ein Bild ersetzt werden...

Und wenn „Sehen Sie?“ jetzt nicht im JavaScript stehen würde, sondern ganz normaler Text in einem HTML-Dokument wäre - was würdest du denn *dann* machen, um ihn (statisch) durch ein Bild zu ersetzen ...?

das ganze hab ich einfach nur so in einer Tabelle stehen, also in <td
onmouseover="this.innerHTML='Sehen Sie?'"
onmouseout="this.innerHTML='Name:<br>Telefon:'">

und ich hab auch schon einiges versucht doch mit einem Bild bekomme ich das nicht hin :(

[prakti]

danke für eure Hilfe
ich denke ich bin einfach zu blöd dafür, dachte das das ganz einfach wäre

danke lg

[ChrisB]

Hi,

Und wenn „Sehen Sie?“ jetzt nicht im JavaScript stehen würde, sondern ganz normaler Text in einem HTML-Dokument wäre - was würdest du denn *dann*

und ich hab auch schon einiges versucht

Aber nicht, meine obige Frage zu beantworten.

Noch mal: Ohne irgendwelchen JavaScript-Kram - wie würdest du den Text „Sehen Sie?“, der irgendwo in einem HTML-Dokument steht, in deinem Editor durch ein Bild ersetzen?

MfG ChrisB

[prakti]

Noch mal: Ohne irgendwelchen JavaScript-Kram - wie würdest du den Text „Sehen Sie?“, der irgendwo in einem HTML-Dokument steht, in deinem Editor durch ein Bild ersetzen?

ich bin totale anfängerin und hab kein plan...

also normal mit <img src="bild.gif"> aber das hab ich schon versucht, fals du sowas meinst, und es funktioniert nicht ...

[ChrisB]

Hi,

also normal mit <img src="bild.gif"> aber das hab ich schon versucht, fals du sowas meinst, und es funktioniert nicht ...

Und falls du meinst, dass das eine nachvollziehbare Problembeschreibung wäre - dann lies bitte die Tipps für Fragende ... *noch* *mal*.

Wir können dir nicht sagen, was du falsch machst, wenn du uns nicht erst mal sagst, was du machst.

MfG ChrisB

[prakti]

ok dies ist mein jetziger Quelltext (er funktioniert auch)

<td onmouseover="this.innerHTML='Sehen Sie?'" onmouseout="this.innerHTML='Name:'">Name:</td>

an der stelle wo 'Sehen Sie?' steht soll anstatt des Textes ein Bild erscheinen

ich habe schon versucht onmouseover="this.innerHTML='...' diese stelle durch ein Bild zu ersetzen,
also z.B. onmouseover="this.innerHTML='<img src="bild.gif">'

doch wenn ich das mache wird beim mouseover nichts verändert (mouseover funktioniert nicht), der mouseout teil funktioniert jedoch

also ich möchte nur wissen was ich in der stelle 'Sehen Sie?' einsetzen muss damit das Bild gezeigt wird

...und schon mal vielen dank für die ganze mühe...

[JürgenB]

Hallo prakti,

also z.B. onmouseover="this.innerHTML='<img src="bild.gif">'

hast du schon mal die Anführungszeichen gezählt? Da fehlt das schließende ". Allerdings hast du auch ein Problem mit der Verschachtelung der drei Stringebenen. Mit " kannst du in diesem Fall die Anführungszeichen maskieren.

Gruß, Jürgen

[EKKi]

Mahlzeit JürgenB,

also z.B. onmouseover="this.innerHTML='<img src="bild.gif">'

Mit " kannst du in diesem Fall die Anführungszeichen maskieren.

Das ist nicht korrekt. Wie werden (doppelte) Anführungszeichen im Kontext "HTML" maskiert?

MfG,
EKKi

[Gunnar Bittersmann]

@@EKKi:

nuqneH

Mit " kannst du in diesem Fall die Anführungszeichen maskieren.
Das ist nicht korrekt. Wie werden (doppelte) Anführungszeichen im Kontext "HTML" maskiert?

Ich möchte lösen (Ich glaube, prakti wäre an der Stelle überfordert):

mit Zeichen-Entity-Referenzen: " (numerische Zeichenreferenzen sind auch denkbar, aber nicht angebracht).

Das sähe dann so aus: <td onmouseover="[code lang=javascript]this.innerHTML='<img src=[code lang=html]&quot;bild.gif">';[/code]">[/code]

Ginge auch andersrum: <td onmouseover="[code lang=javascript]this.innerHTML=[code lang=html]&quot;<img src='bild.gif'>";[/code]">[/code]

Man könnte aber auch im JavaScript-Kontext bleiben: innerhalb des Attributwerts keine doppelten Anführungszeichen verwenden und die inneren einfachen Anführungszeichen nach JavaScript-Art mit \' maskieren.

Das sähe dann so aus: <td onmouseover="[code lang=javascript]this.innerHTML='<img src=\'bild.gif\'>';">[/code]

Qapla'

[JürgenB]

Hallo Gunnar,

Ich möchte lösen (Ich glaube, prakti wäre an der Stelle überfordert):

eine gute Idee.

mit Zeichen-Entity-Referenzen: " (numerische Zeichenreferenzen sind auch denkbar, aber nicht angebracht).

Das sähe dann so aus: <td onmouseover="[code lang=javascript]this.innerHTML='<img src=[code lang=html]&quot;bild.gif">';[/code]">[/code]

Ginge auch andersrum: <td onmouseover="[code lang=javascript]this.innerHTML=[code lang=html]&quot;<img src='bild.gif'>";[/code]">[/code]

da habe ich jetzt gar nicht mehr dran gedacht. Ich setze lieber Funktionsaufrufe ein, um die verschachtelte Quotierung zu vermeiden bzw. ins Javascript zu verlagern, bzw. ich setze den Eventhandlet direkt im Javascript.

Man könnte aber auch im JavaScript-Kontext bleiben: innerhalb des Attributwerts keine doppelten Anführungszeichen verwenden und die inneren einfachen Anführungszeichen nach JavaScript-Art mit \' maskieren.

Das sähe dann so aus: <td onmouseover="[code lang=javascript]this.innerHTML='<img src=\'bild.gif\'>';">[/code]

da habe ich dran gedacht.

Gruß, Jürgen

[prakti]

Ich möchte lösen (Ich glaube, prakti wäre an der Stelle überfordert):

ich muss zugeben das stimmt, danke...

Das sähe dann so aus: <td onmouseover="[code lang=javascript]this.innerHTML='<img src=[code lang=html]&quot;bild.gif">';[/code]">[/code]

vielen vielen dank, ihr habt mir sehr geholfen, es funktioniert juhu :D

danke an alle für die mühe

flg :D

[EKKi]

Mahlzeit prakti,

Das sähe dann so aus: <td onmouseover="[code lang=javascript]this.innerHTML='<img src=[code lang=html]&quot;bild.gif">';[/code]">[/code]

vielen vielen dank, ihr habt mir sehr geholfen, es funktioniert juhu :D

Das haben korrekte Lösungen meistens an sich ... ;-)

MfG,
EKKi

[Gunnar Bittersmann]

@@EKKi:

nuqneH

Das haben korrekte Lösungen meistens an sich ... ;-)

Wobei immer noch die Frage im Raum steht, was prakti an der noch korrekteren CSS-Lösung nicht gefällt.

Qapla'

[prakti]

Das haben korrekte Lösungen meistens an sich ... ;-)

Wobei immer noch die Frage im Raum steht, was prakti an der noch korrekteren CSS-Lösung nicht gefällt.

wieso nicht gefällt? ich liebe sie :)    das bild flackert zwar manchmal aber das ist genau was ich wollte :)  danke nochmal

[EKKi]

Mahlzeit prakti,

also z.B. onmouseover="this.innerHTML='<img src="bild.gif">'

Ohja, ich darf wieder Browser spielen. Dann versuche ich mal, Deinen Code zu verstehen.

onmouseover=

Aha, es folgt also ein Attribut namens "onmouseover".

"

Soso, hier beginnt der Attributwert.

this.innerHTML='<img src=

Ahja, das ist also der Attributwert.

"

Ui, und schon ist der Attributwert beendet.

bild.gif">'

Nanü? Was ist das denn alles? Kenne ich nicht, ignoriere ich mal (und das gerade definierte Attribut gleich mit).

also ich möchte nur wissen was ich in der stelle 'Sehen Sie?' einsetzen muss damit das Bild gezeigt wird

(Fast) genau das, was Du dort eingesetzt hast - allerdings solltest Du Dir angewöhnen, sämtliche Kontextwechsel sauber zu beachten!

MfG,
EKKi

[EKKi]

Mahlzeit prakti,

Das ist der Code den ich bereits habe,...

Was genau gefällt Dir an Matthias' Lösungsvorschlag nicht?

MfG,
EKKi

[Matthias Apsel]

Om nah hoo pez nyeetz, prakti!

Dann musst du diesen Text in ein passendes Element packen. Zur Not auch <span>

Am einfachsten sieht dein Quelltext so aus:

...

<span>Ganz normaler Text
  <img src="..." alt="...">
</span>

im CSS z.B.

span img {display: none;}
span:hover img {display: block;}

Sachen, die dir weiterhelfen können

• Pseudoklassen im SELFHTML-Wiki
• Ingos Infobox
• Erstellen von Tooltips
• Position richtig verwenden

Matthias