[code]<div id="link"><img src="http://uscripts.ucoz.net/scripts_img/energo_news3.png"/></div>
<div id = "content">
<div id="text">Профиль/Вход</div>
<div id="blocks">
<div id = "block1">тут первый блок</div>
<div id="block2" >тут второй блок</div>
</div>
</div>
<script type="text/javascript">
$('#block2').hide()
$('#link').toggle(function(){
$('#block1').hide()
$('#text').text('Форум')
$('#block2').fadeIn(3000)
} , function() {
$('#block2').hide()
$('#text').text('Профиль/Вход')
$('#block1').fadeIn(3000)
})
</script>
<style>
#link{
width: 140px;
background-color: #ffffff;
text-decoration: none;
padding-left: 140px;
background-repeat: none;
align: center;
}
#link:hover{
width: 140px;
background-color: #abcdef;
text-decoration: none;
padding-left: 140;
background-repeat: none;
align: center;
}
#content{
border: 1px solid lightgrey;
position: absolute;
width: 280px;
height: 205px;
background-color: #ffffff
}
#block1 {
position: relative;
height: 160px;
margin-left: 5px;
margin-right : 5px;
border: 1px solid #abcdef;
border-top: none;
padding: 5 5 5 5;
}
#block2 {
position: relative;
height: 160px;
margin-left: 5px;
margin-right : 5px;
border: 1px solid #abcdef;
border-top: none;
padding: 5 5 5 5;
}
#text{
background-color: #f5f5dc;
padding-top: 5px;
padding-bottom: 6px;
border-bottom: 1px solid lightgrey;
font-family: Verdana;
font-size: 14px;
padding-left: 10px;
font-weight:bold
}
</style>
[/code]