guarda questo esempio

codice:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MOSTRA NASCONDI CON CSS</title>
<style type="text/css">
#default {
	float:left;
	width:300px;
	height:300px;
	margin:10px 0 0 2px;
	border:1px solid #000033;
	background:#ccccff url(http://p.playme.com/cspv/82-62-35-10...?ts=1266329667) no-repeat 50% 50%;
}
ul {
	padding:0;
	margin:10px 0;
	width:162px;
	position:relative;
	float:left;
}
li {
	display:inline;
	width:52px;
	height:52px;
	float:left;
	margin:0 0 2px 2px;
}
img {
	border:0;
}
img.thumb {
	display:block;
	width:50px;
	height:50px;
}
a, a:visited {
	display:block;
	border:1px solid #000033;
	background:#ffffff;
	color:#000033;
	text-decoration:none;
}
a:hover {
	border:1px solid #ccccff;
}
a:active, a:focus {
	border:1px solid #ffcc00;
}
span {
	display:none;
}
a:active span, a:focus span {
	display:block;
	position:absolute;
	top:0;
	left:164px;
	padding:0;
}
a:active span img, a:focus span img {
	width:auto;
	height:auto;
	border:1px solid #000033;
}
a:active span p, a:focus span p {
	color:#000033;
	background:#ccccff;
	line-height:1.1em;
	margin:0;
	padding:0;
	font-size:80%;
}
</style>
</head>

<body>
<div id="gallery">
	<ul>
		[*] <a href="#nogo">  <span> 
			

HAI CLICCATO LA FRECCIA NUMERO 1</p>
			</span> </a> 
		[*] <a href="#nogo">  <span> 
			

HAI CLICCATO LA FRECCIA NUMERO 2</p>
			</span> </a> 
	[/list]
	<div id="default"></div>
</div>
</body>
</html>