OnMousOver über einen Link

[robwillkeks]

Heyho,

ich hab ein Link in einem DIV.

Wenn man diesen anklickt, erscheint ein anderes DIV. Das vorher ausgeblendet ist.
Klickt man erneut drauf, wird das DIV wieder ausgeblendet.

Jetzt meine Frage, wie stell ich das an, dass man nur mit der Maus über den Link fahren muss ohne zu klicken, dass das DIV eingeblendet/ausgeblendet wird.

Mit einem OnMousOver oder? Und wie bau ich den ein?

Hier mein Code:

<script language="JavaScript" type="text/javascript"> 
function toggleDiv(element){  if(document.getElementById(element).style.display == 'none')
document.getElementById(element).style.display = 'block';  else       
document.getElementById(element).style.display = 'none'; } //--> 
</script> 


<div style="border:#ddd solid 0px; width: 90px;" id="fixiert3">   
<a href="javascript:toggleDiv('toggle');" title="klick mich" style="display:block; padding:0px; text-decoration: none;">&rsaquo;&rsaquo; Details</a>   
</div>  
<div id="toggle" style="display:none; border:#ddd solid dashed 0px; margin-top:0px; padding:0px; width:200px;">           
<a href="#">- Reklamation erfassen</a><br>
<a href="#">- Reklamation abschließen</a><br>
<a href="#">- Reklamation schließen</a>
<a href="javascript:toggleDiv('toggle');" title="klick mich" style="display:block; padding:0px;">
- Weg</a>
</div>

Ich hoff das geht :)

Gruß
RobRob ;)

 

[emarci]

Hier bitte schön:

<script type="text/javascript"> 
<!--
function toggleDiv(element){
    if(document.getElementById(element).style.display == 'none')
        document.getElementById(element).style.display = 'block';
    else
        document.getElementById(element).style.display = 'none';
}
//-->
</script>

<div onmouseout="toggleDiv('toggle');">
<div style="border:#ddd solid 0px; width: 90px;" id="fixiert3">   
    <a href="toggleDiv('toggle');" onmouseover="toggleDiv('toggle');" title="klick mich" style="display:block; padding:0px; text-decoration: none;">&rsaquo;&rsaquo; Details</a>   
</div>  
<div id="toggle" style="display:none; border:#ddd solid dashed 0px; margin-top:0px; padding:0px; width:200px;">           
    <a href="#">- Reklamation erfassen</a><br>
    <a href="#">- Reklamation abschließen</a><br>
    <a href="#">- Reklamation schließen</a>
    <a href="javascript:toggleDiv('toggle');" title="klick mich" style="display:block; padding:0px;">- Weg</a>
</div>
</div>

Sobald jemand über "Details" mit der Maus kommt wird dein Menü angezeigt.
Dann habe ich noch das gesamte Menu in einen DIV-Container gepackt, wenn die Maus aus dem Container fährt, wird deine Funktion wieder ausgeführt und das Menü verschwindet.
Du kannst dein Skript 1:1 damit so ersetzten.

Grüße
Marcel

 

[lascaux]

function overlay() {
  document.getElementById('toggle').style.visibility = (document.getElementById('toggle').style.visibility == "visible") ? "hidden" : "visible";
}

Selbe Funktionalität, nur eine kürzere Schreibweise. In deinem CSS-Teil muss aber die Sichtbarkeit (visibility) auf hidden gestellt sein.



lascaux