Mouse Over Effekt - Extra Bild?

Question

Huhu,

zum Thema Mouse-Over Effekt gibts ja einige Beiträge. Ich such aber eine spezielle Abwandlung.

Ich hab auf meiner Website auf der linken Seite einige Namen stehen. Wenn ich mit der Maus über einen namen fahr soll auf der rechten Seite ein Bild von dem Namen erscheinen, wisst ihr wie ich das in HTML umsetzen kann?

Lg

Answer 1

Hallo Pomalion,

in HTML geht das gar nicht!
Entweder du nutzt dafür CSS oder (einfacher, aber unzuverlässiger) JavaScript.

Wie du schon erwähntest, gibt's dafür viele Anleitungen im Netz, vor allem für JavaScript-Lösungen. Schau dir doch erst einmal welche an und stelle dann hier etwas konkretere Fargen dazu.

katy

Answer 2

Du hast links die Namen stehen. Wenn du rechts oder irgendwo anders auf deiner Seite einen Div-Container (dieser hat die ID=bildanzeige) hast, wo die Bilder angezeigt werden sollen, könnte es folgendermaßen funktionieren:

<script type="text/javascript">
function namensbild(bilddatei, person) {
document.getElementById('bildanzeige').innerHTML = "<img src=\"" + bilddatei + "\" alt=\"" + person + "\" />";
}
function wiederausblenden() {
document.getElementById('bildanzeige').innerHTML = "";
}

Bei den Namen auf der linken Seite fügst du dann ein onmouseover und ein onmouseout Attribut hinzu:

<a href="max_mustermann.html" onmouseover="namensbild('m_mustermann.jpg', 'Max Mustermann');" onmouseout="wiederausblenden();">Max Mustermann</a>

So müsste es eigentlich funktionieren

Mfg Computerfreaki

Answer 3

Huups ;-)
im ersten Codeteil fehlt noch ein

</script>

Answer 4

hi Computerfreaki

hat super geklappt =)

hab nur noch ein kleines problem. und zwar sind die ganzen namen ja nun links. was kann ich machen dass die namen keine links sind?

weil wenn ich da drauf drücke dann werd ich ja auf irgendwas weiter geleitet und das will ich net ^^

Answer 5

Schließe die Namen einfach in <span></span> ein, also

<span onmouseover="namensbild('m_mustermann.jpg', 'Max Mustermann');" onmouseout="wiederausblenden();">Max Mustermann</span>

. Das sollte mit den aktuellen Browsern jedenfalls funktionieren, bei älteren Browsern weiss ich nicht ob das onmouseover/out-Event auch bei <span> verfügbar ist.

Alternativ geht auch

<a href="javascript:void(0);" onmouseover="namensbild('m_mustermann.jpg', 'Max Mustermann');" onmouseout="wiederausblenden();">Max Mustermann</a>

, das bewirk daß bei Click auf den Link nichts passiert.

Answer 6

Natürlich unterstützen alle Browser onmouse-Events für span. Ein Link ist da vollkommen sinnlos und verwirrt nur.

Eine Abfrage, ob das Element mit der entsprechenden ID existiert würde übrigens auch zum guten Programmierstil gehören, sonst könnte das Skript einfach abstürzen, wenn zu früh (beim Seite laden) die Maus über so einen Bereich kommt.

katy