✔ Mousover mit JS

G

Gunah

Erfahrenes Mitglied
moin allerseits

habe dazu bisher nicht gefunden, kann auch sein, das ich den Falschen Such begriff gewählt habe...

also ich möchte eine art Mousover haben, allerdings nicht mit 2 Bildern...
es soll so sein

wenn man über ein Button geht soll an einer stelle auf der Homepage angezeigt werden, was "passiert" pzw. eine beschreibung kommen...

also so
Code: 
MENU:
 - Eintrag1
 - Eintrag2 <-- Aktiv
 - Eintrag3
 - Eintrag4

Desc:
Beschreibung von Eintrag2

MfG Mathis
 
Moin!
Quick und dirty.. meinst du sowas in der Art:
Code: 
<html>
<input type="button" onmouseover="document.getElementById('test').innerHTML='beschreibung1'">
<input type="button" onmouseover="document.getElementById('test').innerHTML='beschreibung2'">
<p id='test'>Hallo</p>
</html>
Je nach Wunsch dann noch ein onmouseout Event hinzufügen..


*grüssle*
MeinerEiner
 
ah danke :) :)

nur gibts in JS eine einfache möglichkeit als es so zu machen wie ich es gemacht habe mit sicherheit oder (bezogen auf mouseout)?

Code: 
<input type="button" onmouseover="document.getElementById('test1').innerHTML='beschreibung1'">
<a type="button" onmouseover="document.getElementById('test1').innerHTML='beschreibung2'" onmouseout="document.getElementById('test2').innerHTML=''">test2</a>
<p id='test1'>Hallo1</p>

mache es jetzt so:
Code: 
<a onmouseover="document.getElementById('test1').style.visibility='visible'" onmouseout="document.getElementById('test1').style.visibility='hidden'">test1</a>

MfG Gunah
 
Zuletzt bearbeitet:
Das Ganze ist auch ohne JavaScript möglich, beispielsweise:
HTML: 
<ul>
	<li><a href=""><em>Eintrag 1</em> <span>Beschreibung 1</span></li>
	<li><a href=""><em>Eintrag 2</em> <span>Beschreibung 2</span></li>
	<li><a href=""><em>Eintrag 3</em> <span>Beschreibung 3</span></li>
	<li><a href=""><em>Eintrag 4</em> <span>Beschreibung 4</span></li>
	<li><a href=""><em>Eintrag 5</em> <span>Beschreibung 5</span></li>
</ul>
Code: 
ul {
	position: relative;
}
ul li a:link span,
ul li a:visited span {
	display: none;
}
ul li a:link:hover span {
	display: block;
	position: absolute;
	left: 0;
	bottom: -2em;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück