# onmouseover



## Silent_digital (8. Mai 2011)

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.



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

Das ist meine Funktion

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


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


----------



## roundaboutmedia (8. Mai 2011)

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


----------



## Parantatatam (8. Mai 2011)

Man kann es in jedem Fall verkürzen:

```
function einaus(id)
{
  if(document.getElementById) {
    var target = document.getElementById(id).style;
    target.display = (target.display == "") ? "none" : "";
  }
}
```


----------



## Netzwerkidi (9. Mai 2011)

Sehe ich das richtig bei Quirksmode, dass mouseenter-/leave vielleicht besser wäre?


----------



## Parantatatam (9. Mai 2011)

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.


----------



## Netzwerkidi (9. Mai 2011)

Im Halblesen bin ich Ganzgroß!


----------

