Rollover: Zwei Bilder tauschen

[ravetti]

Tach zusammen,

ich möchte zwei Bilder austauschen, es soll nicht nur der übliche MouseOver-Effekt eintreten, die Grafik als Link wird durch eine andere ausgetauschen, sondern daneben soll sich noch eine zweite Grafik austauschen.

Ich habe schon gesucht aber keine wirklich gute Lösung gefunden.

Hat jemand von Euch eine Idee?

Vielen Dank!
Ravetti

[hero-master]

Arbeitest du mit einem HTML-Programm??

[ravetti]

Ahoi,

der Editor spielt doch keine Rolle, ausserdem dachte ich, dass hier ist für Puristen

Das hier ist die Ausgangsbasis:

<div class="NaviEbene2" id="navi1">
<a href="mittag.htm"><img src="../../grafik/Navi/Ebene2/Mittagstisch.gif" name="mittag" width="78" height="11" border="0" class="imgebene2"></a>
</div>
<div id="pfeil1">
<img src="../../grafik/Navi/Ebene2/pfeil.gif" name="pfeil1">
</div>

Der Mittagstisch.gif soll ausgetauscht werden gegen Mittagstisch2.gif und der Pfeil.gif gegen Pfeil2.gif

Ravetti

[Slupor]

<div class="NaviEbene2" id="navi1">
<a href="mittag.htm"><img src="../../grafik/Navi/Ebene2/Mittagstisch.gif" name="mittag" width="78" height="11" border="0" class="imgebene2" onMouseOver="images.mittag.src='../../grafik/Navi/Ebene2/Mittagstisch2.gif'" onMouseOut="images.mittag.src='../../grafik/Navi/Ebene2/Mittagstisch.gif'"></a>
</div>
<div id="pfeil1">
<img src="../../grafik/Navi/Ebene2/pfeil.gif" name="pfeil1" onMouseOver="images.pfeil1.src='../../grafik/Navi/Ebene2/Pfeil2.gif'" onMouseOut="images.mittag.src='../../grafik/Navi/Ebene2/Pfeil.gif'">
</div>


So, ich hab dir deinen Quelltext gleich richtig editiert, so sollte es gehen.

Was hab ich denn überhaupt getan:

Wenn die maus drüber geht wird Mittagstisch2.gif bzw. Pfeil2.gif und wenn sie runter geht, dann kommen wieder die anfangsbilder. in der selfhtml steht da zwar auch, wie das geht, die machen das aber saumäßig umständlich und wohl nicht nachvollziehbar

allgemein gilt, wenn du nen mouseover-effekt bei nem Bild willst:

<img src="bild.jpg" name="bildname" onMouseOver="images.bildname.src='bild2.jpg'" onMouseOut="images.bildname.src='bild.jpg'">

alle klarheiten beseitigt?

[ravetti]

hi Slupor,

viele Dank für Deinen Beitrag.

alle klarheiten beseitigt?

Leider nein. Du hast hier einen einfachen Bildwechsel beschrieben, um den geht es mir aber leider nicht:

Wenn man über die Mittagstisch.gif fährt soll sich nicht nur der austauschen SONDERN AUCH der Pfeil. Der Pfeil selber muss nicht reagieren, wenn man ihn überfährt

Ravetti

[Slupor]

soll der tisch und der pfeil getauscht werden oder nur der pfeil, wenn man über den tisch fährt? wenn sich nur der feil ändern soll, dann machs so:

PHP-Code:

<div class="NaviEbene2" id="navi1">
<a href="mittag.htm">
<img src="../../grafik/Navi/Ebene2/Mittagstisch.gif"
name="mittag" width="78" height="11" border="0" class="imgebene2"
onMouseOver="images.pfeil1.src='../../grafik/Navi/Ebene2/pfeil2.gif'"
onMouseOut="images.pfeil1.src='../../grafik/Navi/Ebene2/pfeil.gif'"></a>
</div>
<div id="pfeil1">
<img src="../../grafik/Navi/Ebene2/pfeil.gif" name="pfeil1">
</div> 


wenn du beides tauschen willst, dann machs so:

PHP-Code:

<div class="NaviEbene2" id="navi1">
<a href="mittag.htm"
onMouseOver="images.mittag.src='../../grafik/Navi/Ebene2/Mittagstisch2.gif'"
onMouseOut="images.mittag.src='../../grafik/Navi/Ebene2/Mittagstisch.gif'">
<img src="../../grafik/Navi/Ebene2/Mittagstisch.gif"
name="mittag" width="78" height="11" border="0" class="imgebene2"
onMouseOver="images.pfeil1.src='../../grafik/Navi/Ebene2/pfeil2.gif'"
onMouseOut="images.pfeil1.src='../../grafik/Navi/Ebene2/pfeil.gif'">
</a>
</div>
<div id="pfeil1">
<img src="../../grafik/Navi/Ebene2/pfeil.gif" name="pfeil1">
</div> 


einfach einmal mouseover im Anker-Tag und einmal im img-tag

[ravetti]

Hi Slupor,

das klappt super! Vielen Dank!

Ravetti

[Slupor]

Gut, freut mich, dass ich helfen konnte.

Wenn du jetzt noch unten auf den Button "nicht erledigt" klickst, dann freut sich auch der Mod von dem Forum hier

[ravetti]

habe ich vergessen, mache ich. :-)

...geht nur nicht