Hola designermaster, he creado hace poco lo que me parece andas buscando, nada más copia el código y fíjate si te sirve.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body{
font-family:Arial;
font-size:1em;
color:#666666;
background-color:#000000;
}
#din{
-moz-border-radius:1em;
padding:1em;
width:370px;
color:#666666;
}
#cerrar a{
position:relative;
top:-7px;
width:20px;
float:right;
text-align:right;
display:block;
text-decoration:none;
color:#000000;
font-weight:bold;
font-size:1.5em;
}
#cerrar a:hover{
font-weight:bold;
color:#666666;
font-size:1.5em;
}
#abrir a{
position:absolute;
top:1em;
right:1em;
margin-left:1em;
text-decoration:none;
font-weight:bold;
-moz-border-radius:0.2em;
font-size:1.5em;
background-color:#FFCC00;
color:#000000;
}
#abrir a:hover{
color:#666666;
}
</style>
</head>
<script language="JavaScript">
/* proximo paso:
pasar a funciones externas los scripts envevidos en las etiquetas html*/
</script>
<body>
<div id="din"
onMouseOver = "this.style.backgroundColor = '#FFCC00';"
onMouseOut = "this.style.backgroundColor = '#000000';">
<span id="cerrar"><a href="#" onclick="getElementById('din').style.display = 'none';
getElementById('abrir').style.display = 'block';">[x]</a>
</span>
El choque entre el equipo paraguayo <i>Cerro
Porteño</i> y el peruano <i>Sporting Cristal</i> se destaca
entre los ocho partidos que cerrarán esta semana
la primera fase de la Copa Libertadores de América
</div>
<br>
<span id="abrir" style="display:none;" onclick="getElementById('din').style.display = 'block';
this.style.display = 'none';"><a href="#"><<</a>
</span>
<br>
</body>
</html>
Saludos!