vivo: link:hover und onclick

hallo,
ich bastel ein menu, dass ich mir eigentlich recht simpel vorstellte: ein bild als menupunkt, welches größer wird beim hover und so bleibt wenn man's anklickt. dann stellte ich fest, dass es nur mit javascript sicher ist, dass es groß bleibt, weil :focus oder :visited in verschiedenen Browsern unterschiedlich arbeiten und ausserdem ihre eigenschaften nicht behalten...
gut, hab ich mich a bissel ins javascript eingearbeitet und endlich diesen herrlichen code gebastelt. die überlegung war, bei allen clicks auf egal welchen menupunkt, erstmal alles klein zu machen (um nicht abfragen zu müssen was gerade aktiv ist) und dann das geklickte bild einfach in den dimensionen zu verändern. endlich hatte alles funktioniert, doch nach dem ersten click auf ein bild mit onClick-event geht das hovern nicht mehr. weiß jemand, wie ich dieses problem umgehe?

der quellcode ist zusammengestückelt, es fehlen ein paar css-formatierungen (der übersicht halber...)

<html>  
<head>  
<title>Media</title>  
<meta name="author" content="vivo">

~~~javascript <script type="text/javascript">
 <!--
 function einblenden(abc)
  {
  document.getElementById("menumedia_audio").style.height="20px";
  document.getElementById("menumedia_audio").style.width="56px";
  document.getElementById("menumedia_video").style.height="20px";
  document.getElementById("menumedia_video").style.width="53px";
  document.getElementById("menumedia_fotos").style.height="20px";
  document.getElementById("menumedia_fotos").style.width="56px";
  document.getElementById("menumedia_blogs").style.height="20px";
  document.getElementById("menumedia_blogs").style.width="56px";
  document.getElementById("menumedia_lyrics").style.height="20px";
  document.getElementById("menumedia_lyrics").style.width="55px";
  document.getElementById("menumedia_disco").style.height="20px";
  document.getElementById("menumedia_disco").style.width="111px";
  document.getElementById("menumedia_presse").style.height="20px";
  document.getElementById("menumedia_presse").style.width="64px";
  var breite = document.getElementById(abc).style.width;
  var breitezahl = parseInt(breite);
  breitezahl = Math.round(breitezahl*31/20);
  breitestr = String(breitezahl);
  breitestr = breitestr + "px";
  document.getElementById(abc).style.width=breitestr;
  document.getElementById(abc).style.height="31px";
}
  //-->
 </script>

 ~~~css
<style type="text/css">  
#menumedia_audio {  
  height:20px;  
  width:56px;  
  text-align:center;  
  vertical-align:middle;  
}  
#menumedia_audio:hover,#menumedia_audio:focus {  
  height:31px;  
  width:84px;  
}  
#menumedia_video{  
  height:20px;  
  width:53px;  
  text-align:center;  
  vertical-align:middle;  
}  
#menumedia_video:visited,#menumedia_video:hover,#menumedia_video:active,#menumedia_video:focus {  
  height:31px;  
  width:80px;  
  }  
#menumedia_fotos {  
  height:20px;  
  width:56px;  
  text-align:center;  
  vertical-align:middle;  
}  
#menumedia_fotos:visited,#menumedia_fotos:hover,#menumedia_fotos:active,#menumedia_fotos:focus {  
  height:31px;  
  width:86px;  
  }  
#menumedia_blogs {  
  height:20px;  
  width:56px;  
  text-align:center;  
  vertical-align:middle;  
}  
#menumedia_blogs:visited,#menumedia_blogs:hover,#menumedia_blogs:active,#menumedia_blogs:focus {  
  height:31px;  
  width:86px;  
  }  
#menumedia_lyrics {  
  height:20px;  
  width:55px;  
  text-align:center;  
  vertical-align:middle;  
}  
#menumedia_lyrics:visited,#menumedia_lyrics:hover,#menumedia_lyrics:active,#menumedia_lyrics:focus {  
  height:31px;  
  width:84px;  
}  
#menumedia_disco {  
  height:20px;  
  width:111px;  
  text-align:center;  
  vertical-align:middle;  
}  
#menumedia_disco:visited,#menumedia_disco:hover,#menumedia_disco:active,#menumedia_disco:focus {  
  height:31px;  
  width:170px;  
}  
#menumedia_presse {  
  height:20px;  
  width:64px;  
  text-align:center;  
  vertical-align:middle;  
}  
#menumedia_presse:visited,#menumedia_presse:hover,#menumedia_presse:active,#menumedia_presse:focus {  
  height:31px;  
  width:98px;  
}  
 </style>
</head>  
<body background="bilder/layout/background.jpg">  
 <div id="theme"><img src="bilder/layout/media.jpg" alt="" border="0" width="470" height="184"> </div>  
         <div id="inhalt"> </div>  
         <div id="inhaltsinhalt">  
         <table align="center" border="0" cellspacing="0" cellpadding="0">  
<tr>  
 <td height="31px" align="center" valign="middle" style="text-align:center,vertical-align:middle,height:31px" >  
        <a href="media_audio.html" target="mediaframe"><img src="bilder/layout/menu_buttons/audio_31.png" id="menumedia_audio" onclick="einblenden('menumedia_audio')" border="0"></a>  
    </td>  
    <td height="31px" align="center" valign="middle" style="text-align:center,vertical-align:middle,">  
        <a href="media_video.php" target="mediaframe"><img src="bilder/layout/menu_buttons/video_31.png" id="menumedia_video" onclick="einblenden('menumedia_video')" border="0"></a>  
    </td>  
    <td height="31px" align="center" valign="middle"style="text-align:center,vertical-align:middle,">  
        <a href="bilder/scripts/showalbum.php?albumposition=0,0" target="mediaframe"><img src="bilder/layout/menu_buttons/fotos_31.png" id="menumedia_fotos" onclick="einblenden('menumedia_fotos')"  border="0"></a>  
    </td>  
    <td height="31px" align="center" valign="middle" style="text-align:center,vertical-align:middle,">  
        <a href="media_blogs.php" target="mediaframe"><img src="bilder/layout/menu_buttons/blogs_31.png" id="menumedia_blogs" onclick="einblenden('menumedia_blogs')"  border="0"></a>  
    </td>  
    <td height="31px" align="center" valign="middle" style="text-align:center,vertical-align:middle,"  
        <a href="media_lyrics.php" target="mediaframe"><img src="bilder/layout/menu_buttons/lyrics_31.png" id="menumedia_lyrics" onclick="einblenden('menumedia_lyrics')" border="0"></a>  
    </td>  
    <td height="31px" align="center" valign="middle" style="text-align:center,vertical-align:middle,">  
        <a href="media_biografie.html" target="mediaframe"><img src="bilder/layout/menu_buttons/discografie_31.png" id="menumedia_disco" onclick="einblenden('menumedia_disco')"  border="0"></a>  
    </td>  
    <td height="31px" align="center" valign="middle" style="text-align:center,vertical-align:middle,">  
       <a href="media_presseartikel.php" target="mediaframe"><img src="bilder/layout/menu_buttons/presse_31.png" id="menumedia_presse" onclick="einblenden('menumedia_presse')"  border="0"></a>  
    </td>  
</tr>  
</table>  
<div id="mediaframediv">  
        <iframe src="media_audio.html" width="100%" height="100%" scrolling="auto" status="no" marginheight="0" marginwidth="0" frameborder="0" name="mediaframe" allowtransparency="yes" >  
  
   <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:  
  Sie können die eingebettete Seite über den folgenden Verweis  
  aufrufen: <a href="index.html">Start</a></p>  
</iframe></div>  
</div>  
</body>  
</html>
  1. mit den eventhandlern onmouseover und onmouseout lässt sich das ja noch steuern...doch daraus ergibt sich wieder das ursprungsproblem: wenn man das aktuell geklickte bild verlässt wirds wieder klein. dafür funktionieren over und out auch nach dem ersten klick.

     <script type="text/javascript">  
     <!--  
     function clicken(abc)  
      {  
      document.getElementById("menumedia_audio").style.height="20px";  
      document.getElementById("menumedia_audio").style.width="56px";  
      document.getElementById("menumedia_video").style.height="20px";  
      document.getElementById("menumedia_video").style.width="53px";  
      document.getElementById("menumedia_fotos").style.height="20px";  
      document.getElementById("menumedia_fotos").style.width="56px";  
      document.getElementById("menumedia_blogs").style.height="20px";  
      document.getElementById("menumedia_blogs").style.width="56px";  
      document.getElementById("menumedia_lyrics").style.height="20px";  
      document.getElementById("menumedia_lyrics").style.width="55px";  
      document.getElementById("menumedia_disco").style.height="20px";  
      document.getElementById("menumedia_disco").style.width="111px";  
      document.getElementById("menumedia_presse").style.height="20px";  
      document.getElementById("menumedia_presse").style.width="64px";  
      var breite = document.getElementById(abc).style.width;  
      var breitezahl = parseInt(breite);  
      breitezahl = Math.round(breitezahl*31/20);  
      breitestr = String(breitezahl);  
      breitestr = breitestr + "px";  
      document.getElementById(abc).style.width=breitestr;  
      document.getElementById(abc).style.height="31px";  
    }  
    function over(abc)  {  
      var breite = document.getElementById(abc).style.width;  
      var breitezahl = parseInt(breite);  
      breitezahl = Math.round(breitezahl*31/20);  
      breitestr = String(breitezahl);  
      breitestr = breitestr + "px";  
      document.getElementById(abc).style.width=breitestr;  
      document.getElementById(abc).style.height="31px";  
       }  
    function out(abc)  {  
      var breite = document.getElementById(abc).style.width;  
      var breitezahl = parseInt(breite);  
      breitezahl = Math.round(breitezahl*20/31);  
      breitestr = String(breitezahl);  
      breitestr = breitestr + "px";  
      document.getElementById(abc).style.width=breitestr;  
      document.getElementById(abc).style.height="20px";  
    }  
      //-->  
     </script>
    
     <a href="media_audio.html" target="mediaframe"><img src="bilder/layout/menu_buttons/audio_31.png" id="menumedia_audio" onclick="clicken('menumedia_audio')" onmouseover="over('menumedia_audio')" onmouseout="out('menumedia_audio')" border="0"></a>  
    
    

    ich brauch jetzt nur noch irgendwas, dass das onmouseout und over nachdem onclick-event ausstellt und erst wieder aktiviert wenn ein anderes menuelement geklickt wurde.