onMouse - Effekt

[mathesen]

Hey,
ich hab ein Problem mit dem onMouse - Effekt..
Ich will in meiner homepage einen onmouseover & onmouseout effekt einbauen...
Und zwar soll sich ein Bild änder und ein Text hinzukommen, wenn man über das ursprüngliche bild fährt.
Dass sich das bild änder hab ich schon hinbekommen, nur der Text macht mir noch Probleme.

Wie geh ich da am besten ran? Muss ich das mit JS lösen, oder gibt es auch eine Möglichkeit die ganze sache mit PHP zu machen?

Vielen Dank schon mal im Voraus.
Gruß
mathesen

[Marc Reichelt]

Hallo mathesen,

ich hab ein Problem mit dem onMouse - Effekt..
Ich will in meiner homepage einen onmouseover & onmouseout effekt einbauen...
Und zwar soll sich ein Bild änder und ein Text hinzukommen, wenn man über das ursprüngliche bild fährt.
Dass sich das bild änder hab ich schon hinbekommen, nur der Text macht mir noch Probleme.

Was für einen Text meinst du denn?
Wenn ein kleiner Text angezeigt werden soll, wenn man mit der Maus darauf ist, solltest du das title-Attribut verwenden, Das funktioniert ganz ohne JS und CSS.

Wie geh ich da am besten ran? Muss ich das mit JS lösen, oder gibt es auch eine Möglichkeit die ganze sache mit PHP zu machen?

Mit PHP gar nicht, da das eine _server_seitige Programmiersprache ist.
Mit JS kannst du das Bild an sich ändern, bei CSS gibt es auch einige Wege um einen Hovereffekt zu realisieren.

Aber für einen kleinen Zusatztext ist das title-Attribut einfach ideal.

Bis dann!

Marc Reichelt || http://www.marcreichelt.de/

[Mathesen]

Also ich habe die ganze sache in einer Tabelle stehen.

So schauts bisher aus:
<tr>
<td>
<img src="#.jpg"
onMouseOut="this.src='#.jpg'"
onMouseOver="this.src='#1.jpg'" width="100">
</td>
<td>
--> Hier soll dann ein Text stehen wenn das bild "#1.jpg" angezeigt wird.
</td>
</tr>

Gruß
mathesen

[Marc Reichelt]

Hallo Mathesen,

So schauts bisher aus:
<tr>
<td>
<img src="#.jpg"
onMouseOut="this.src='#.jpg'"
onMouseOver="this.src='#1.jpg'" width="100">
</td>
<td>
--> Hier soll dann ein Text stehen wenn das bild "#1.jpg" angezeigt wird.
</td>
</tr>

Das ist einfach: Du weist dem entsprechenden <td>-Tag, wo der Text stehen soll, eine id zu:
<td id="infotext">Hier soll dann [...]</td>

Mittels folgendem JavaScript-Code kannst du dann den Inhalt ändern:

document.getElementById("infotext").innerHTML ="Hier kommt dein Text hin, das ganze geht mit <b>HTML</b>-Code...";

Näheres hier:
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id

Bis dann!

Marc Reichelt || http://www.marcreichelt.de/

[Mathesen]

Das ist einfach: Du weist dem entsprechenden <td>-Tag, wo der Text stehen soll, eine id zu:
<td id="infotext">Hier soll dann [...]</td>

Mittels folgendem JavaScript-Code kannst du dann den Inhalt ändern:

document.getElementById("infotext").innerHTML ="Hier kommt dein Text hin, das ganze geht mit <b>HTML</b>-Code...";

Ja das verstehe ich ja noch... mein Problem liegt darin mit dem onMouse - Effekt beide dinge ausführen zu lassen.
Beim 2. Effekt, muss ich also noch irgendwie die Funktion unterbringen, welche den Text im benachbarten Feld aufruft ???
Und da hänge ich gerade irgendwie.

[Ashura]

Hallo.

Beim 2. Effekt, muss ich also noch irgendwie die Funktion unterbringen, welche den Text im benachbarten Feld aufruft ???
Und da hänge ich gerade irgendwie.

Verwende beim onmouseover-Event doch einfach eine selbstdefinierte funktion, die wiederum die beiden anderen Befehle (Bildwechsel und Text zeigen) enthält.

Schema:

function test() {
     Bildwechsel-Script;
     InnerHTML-Script;
}

Gruß, Ashura