✔ Text soll sich bei Mouseover ändern

[_Bjoern_]

Hallo ...

ich hoffe, ihr könnt mir hierbei auch weiterhelfen.

Ich habe eine Tabelle erstellt. Dort sind einige Bilder enthalten. Gehe ich mit der Maus über die Bilderm, ändert sich deren Aussehen einwandfrei.
Jedoch wäre es erwünschenswert, wenn ein Text dazu eingeblendet wird ....

<table width="60%" border="0">
<tr>
<td><a href="" onMouseOver="chgImg('me', meOn)" onMouseOut="chgImg('me', meOff)"><img src="images/me_grey.gif" width="100" height="100" alt="about me" border="0" name="me"></a></td>
<td></td>
<td><a href="" onMouseOver="chgImg('cars', carsOn)" onMouseOut="chgImg('cars', carsOff)"><img src="images/cars_grey.gif" width="100" height="100" alt="my cars" border="0" name="cars"></a></td>
<td></td>
</tr>
</table>

Und hier der dazugehörige Js-Code:

<script language="JavaScript" type="text/javascript">
<!--
meOff = new Image();
meOff.src = "images/me_grey.gif";
meOn = new Image();
meOn.src = "images/me_color.gif";

carsOff = new Image();
carsOff.src = "images/cars_grey.gif";
carsOn = new Image();
carsOn.src = "images/cars_color.gif";

function chgImg(name, objekt)
{
window.document.images[name].src = objekt.src;
}
//-->
</script>

Nun soll, in der Spalte daneben immer der gewünschte Text eingeblendet werden, solange die Maus auf eins der Bilder zeigt.

Danke wie immer für Eure Unterstützung.

 

[con-f-use]

Gib den Spalten eine id und verwende document.getElementById() und innerHTML. Du kannst einen zweiten Befehl in einen (onmouseover-/onmouseout-)Event einbauen indem du ihn durch ein Semikolon von den anderen trennst.

<td onmouseover="andereAnweisung();document.getElementById('ziel').innerHTML = 'text'">BiLd</td>
      <td id="ziel">Hier steht dann der Text</td>

Alternativ kannst auch das mit der id lassen und this.nextSibling verwenden, dann darfst du aber an der Struktur der Tabelle nichts ändern.

<td onmouseover="andereAnweisung;this.nextSibling.nextSibling.innerHTML = 'text'">BiLd</td>
       <td>Hier steht dann der Text</td>

Mein Tipp: Lern die JavaScript-Grundlagen. Einen Text irgentwo reinzuschreiben ist fast schon zu simpel um es hier zu posten, da es in jedem JavaScript-Tutorial erklärt wird und die Befehle Namen tragen, aus denen jeder schlau wird.

 

[_Bjoern_]

Danke für Deine schnelle Hilfe. Sicherlich werde ich mir in den nächsten Tagen JS-Grundlagen aneignen. Jedoch ist die Frage, ob der Besucher JS eingeschaltet hat. Wie wirkt sich das dann aus? Besteht die Gefahr, dass er den Text in diesem Fall sogar nicht sehen kann?

 

[con-f-use]

Wenn javascript ausgeschlatet ist, passiert einfach nichts, wenn man mit der Maus drüber fährt. Tätsächlich haben aber weit über 80% der User JavaScript eingeschaltet. Ich würde einfach irgentwo auf der Seite einen Hinweis einbringen, dass zur korrekten Darstellung JavaScript von nöten ist. Es gibst außerdem auch noch den <noscript>-Tag und man kann mit etwas Denkaufwand JavaScripte so schreiben, dass die Website auch noch gut benutzbar ist, wenn jemand JavaScript ausgeschaltet hat. In deinem Fall bietet sich z.B. das alt-Attribut des <img>-Tags an, wo du auch eine Art Beschreibung unterbringen kannst, die dann beim Überfahren mit der Maus angezeigt wird.