onmouseover

S

Silent_digital

Mitglied
Hallo,

ich möche bei einer Navigation einen Mouseover haben, dass ein bestimmter text an einer bestimmten Stelle erscheint, dies funktioniert auch soweit. Aber wenn ich jetzt über einen anderen Punkt mit der Maus gehe bleibt der alte text bestehen und der neue hängt sich dran.


Code: 
<script language="JavaScript" type="text/javascript">
<!--
function show(Id) {
 if(document.getElementById)
   document.getElementById(Id).style.visibility = "visible";
}
//-->
</script>

Das ist meine Funktion
HTML: 
<TABLE WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0 BACKGROUND="images/navi/nav_6.jpg">
				<TR VALIGN="TOP">
					<TD WIDTH="65"><a href="index.html" onmouseover="menu(1);"><IMG SRC="images/navi/nav_1_1.jpg" NAME="nav_1_1" onmouseover="show(1);this.src='images/navi/nav_1_2.jpg'" onmouseout="this.src='images/navi/nav_1_1.jpg'" onclick="this.src='images/navi/nav_1_2.jpg'"></a></TD>
					<TD WIDTH="73"><IMG SRC="images/navi/nav_2_1.jpg" NAME="nav_2_1" onmouseover="show(2);this.src='images/navi/nav_2_2.jpg'" onmouseout="this.src='images/navi/nav_2_1.jpg'"></TD>
					<TD WIDTH="108"><IMG SRC="images/navi/nav_3_1.jpg" NAME="nav_3_1" onmouseover="show(3);this.src='images/navi/nav_3_2.jpg'" onmouseout="this.src='images/navi/nav_3_1.jpg'"></TD>
					<TD WIDTH="90"><IMG SRC="images/navi/nav_4_1.jpg" NAME="nav_4_1" onmouseover="show(4);this.src='images/navi/nav_4_2.jpg'" onmouseout="this.src='images/navi/nav_4_1.jpg'"></TD>
					<TD WIDTH="110"><IMG SRC="images/navi/nav_5_1.jpg" NAME="nav_5_1" onmouseover="show(5);this.src='images/navi/nav_5_2.jpg'"></TD>
					<TD WIDTH="247"> </TD>
				</TR>
			</TABLE>

das ist die Navigation mit den mouseover

HTML: 
<DIV ID="subnav">
<span id="1" style="visibility:hidden">Der erste TEXT</span><span id="2" style="visibility:hidden">Der zweite TEXT</span>
							
<span id="leer" style="visibility:hidden"> </span></div>

Das ist die Stelle mit dem Text
 
Code: 
<script type="text/javascript">
function einaus( targetId )
{
  if (document.getElementById)
  {
    var target  = document.getElementById( targetId );

    if (target.style.display == "none")
    {
      target.style.display = ""
    }
    else
    {
      target.style.display = "none"
    }
  }
}

</script>
</head>

<body>
<a href="#" onmouseover="einaus ('text')" onmouseout="einaus ('text')">Click</a>
<div id="text" style="display:none">
	Erster Text
</div>

Ich weiß jetzt nicht ob dass die eleganteste Variante ist aber es geht:).
Vielleicht hat hier jemand noch eine andere bessere Variante.

Grüße
 
Man kann es in jedem Fall verkürzen:
Code: 
function einaus(id)
{
  if(document.getElementById) {
    var target = document.getElementById(id).style;
    target.display = (target.display == "") ? "none" : "";
  }
}
 
Nein, dass siehst du falsch. Da steht, dass diese Ereignisse nur der Internet Explorer implementiert und er somit damit allein da steht. Wenn du dich nicht nur auf den Browser aus Redmond spezialisieren willst, solltest du die Ereignisse mouseover und mouseout nutzen. Ich versteh auch nicht, welchen Nachteil die im Vergleich zu mouseenter und mouseleave haben.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück