online 1
gast (50)

/ Forum / Webseiten/HTML

Webseiten/HTMLWebseiten/HTML

Fragevon Pomalion vom 01.03.2021, 14:47 Options

Mouse Over Effekt - Extra Bild?

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


Antwort schreiben

Antwort 1 von katy vom 01.03.2021, 15:28 Options

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

Antwort 2 von Computerfreaki vom 01.03.2021, 16:35 Options

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

Antwort 3 von Computerfreaki vom 01.03.2021, 16:36 Options

Huups ;-)
im ersten Codeteil fehlt noch ein
</script>

Antwort 4 von Pomalion vom 01.03.2021, 17:00 Options

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 ^^

Antwort 5 von Supermax vom 01.03.2021, 17:07 Options

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.

Antwort 6 von katy vom 01.03.2021, 18:02 Options

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

Ähnliche Themen

Bild als Frameborder
Computerfreaki  15.03.2008 - 15 Hits - 4 Antworten

Link in Bild einfügen
enita  30.03.2008 - 53 Hits - 2 Antworten

Bild immer neu
Joshuan  17.05.2008 - 27 Hits - 21 Antworten

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Version: supportware 1.9.150 / 10.06.2022, Startzeit:Thu Jan 8 21:07:44 2026