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