nicht angemeldet
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>