infobox onmouseover, möchte dass Sie bei onmouseout wieder verschwindet

[miisbaby]

Hallo!

Ich habe auf meiner Webseite eine Infobox, die erscheint, wenn man mit dem Cursor über ein Bild fährt. Diese Schliesst sich per Mausklick auf das [X]. Jetzt würde ich den code gerne so abändern, dass die box sich auch per "onmousedown(?)" wieder schliesst. Also wenn man mit dem Cursor vom Bild weg geht. Da es ein bisschen mühsam ist, wenn man ungewollt drüberfährt und man jedesmal die box schliessen muss.

Das wäre der code:

<div id="showimage" style="position: absolute; width: 210px; visibility: hidden; top: 290px; left: 60%;">

<table border="0" cellspacing="0" cellpadding="2" width="210" bgcolor="#303030">
<tbody>
<tr>
<td width="100%">

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td id="dragbar" style="cursor: pointer;" onmousedown="initializedrag(event)" width="100%">
<span style="font-family: Trebuchet; color: #ffffff;"><strong><small>So einfach geht's:</small></strong></span>
</td>
<td style="cursor: hand;">
<a style="color: #ff8c00; text-decoration: none;" onclick="hidebox();return false" href="#"><strong>[X]</strong></a>
</td>
</tr>
<tr>
<td style="padding: 4px;" colspan="2" width="100%" bgcolor="#FF69B4">
1. Artikel in den Warenkorb.
<p>&nbsp;</p>
<p>
2. Zahlungsart wählen und "Nächster Schritt" anklicken.
</p>
<p>&nbsp;</p>
<p>
3. Dann im Check-out Formular&nbsp;ganz unten&nbsp; im&nbsp;Bemerkungsfeld die Angaben platzieren.
</p>
<p>&nbsp;</p>
<p>
Brauchen Sie weitere <a href="/app/scc234a1ceca060e4/p20214381b8b1f7eb/">Hilfe</a>?
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>


und das hier der dazugehörige Link:

<p>
<a onmouseover="javascript:document.getElementById('showimage').style.visibility='visible'" href="#"><img src="http://u.jimdo.com/www32/o/scc234a1ceca060e4/img/ibe99d92899df72ca/1317659156/std/image.png" alt="Grafik" /></a>
</p>


Was muss ich denn ändern damit mein oben genannter Wunsch erfüllt wird?

(habe bereits probiert das onklick durch onmouseout zu ersetzen, etc. hat aber alles nix gebracht :'( )

Danke vielmal für eure Hilfe!!!!

 

[threadi]

onmouseout wäre der richtige EventHandler.

 

[miisbaby]

ja habs im nachhinein auch gemerkt... wo muss ich's denn verändern/reinsetzen/ersetzen?

Sorry habe erst kürzlich angefangen mich in die materie einzulesen...

 

[threadi]

Beispiel:

<a onmouseover="daspassiertbeiMausBeruehrung();" onmouseout="daspassiertwennMausLinkVerlaesst();" href="#">

Hinweis: Das was Du willst, kann man auch eigentlich mit CSS erreichen. Das sähe z.B. so aus (wenn der Link die Klasse "link" hat):

a.link img { display: none; }
a.link:hover img { display: block; }