Javascript-форум - Новое из CSS Sprites. Находим применение.

Значт, посетила меня, однажды, мысль - а что, если сделать так?! Вот, что, собственно, из этого вышло:

HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New CSS Sprites</title>
<link type="text/css" rel="stylesheet" href="index_<?= $stylesheet ?>.css" />
</head>
<body>
<div class="menu">
  <a href="#1">Link 1</a> 
  <a href="#2">Link 2</a> 
  <a href="#3">Link 3</a> 
  <a href="#4">Link 4</a> 
  <a href="#5">Link 5</a>
</div>

<div class="body_old">
  <div class="pages">
    <div class="page"><a name="1" class="anchor">Page 1</a>Text page 1</div>
    <div class="page"><a name="2" class="anchor">Page 2</a>Text page 2</div>
    <div class="page"><a name="3" class="anchor">Page 3</a>Text page 3</div>
    <div class="page"><a name="4" class="anchor">Page 4</a>Text page 4</div>
    <div class="page"><a name="5" class="anchor">Page 5</a>Text page 5</div>
  </div>
  <div class="hide_div"></div>
</div>
</body>
</html>

Здесь динамически задаётся имя стилей - для оперы свой, для остальных свой:

$stylesheet=(strtok($_SERVER['HTTP_USER_AGENT'],'/')=='Opera')?'opera':'other';

Это связано с особенностью этого браузера.

Стили для Оперы (index_opera.css):

.body_old{
	position:absolute;
	left:200px;
	top:100px;
	width:400px;
	height:300px;
	overflow:hidden;
	border:#f00 1px solid;
}
.page{
	height:100%;
	overflow:hidden;
	background-color:#fff;
	z-index:0;
}
.pages{
	height:100%;
	margin-right:-17px;
	overflow:auto;
}
.hide_div{
	position:absolute;
	left:0;
	top:0;
	width:400px;
	height:300px;
	background-color:#CCC;
	opacity:0;
	z-index:1;
}
.menu{
	position:absolute;
	left:400px;
	top:80px;
}
a.anchor{
	display:block;
}

Стили для остальных (index_other.css):

.body_old{
	position:absolute;
	left:200px;
	top:100px;
	width:400px;
	height:300px;
	overflow:hidden;
	border:#F00 1px solid;
}
.page{
	height:100%;
	overflow:hidden;
}
.pages{
	height:100%;
}
.hide_div{
	display:none;
}
.menu{
	position:absolute;
	left:400px;
	top:80px;
}
a{
	text-decoration:none;
	border:none;
}
a:active{
	text-decoration:none;
	border:none;
}

Если бы не опера - областей применения было бы намного больше:(

Вобщем, краткое описание:
Мы видим менюшку из 5-ти ссылок(может быть любое количество). Мы все можем менять контент в одном определённом блоке простыми CSS-правилами при наведении. Цель же этого приёма - менять контент при клике. Из-за оперы мы не можем вставлять в контент ссылки, формы и т.д., т.к. они перестают работать. Обойти это мне не удалось:(. Не мешает нормальной индексации. Можно поставить закладку. Если это баян - напишите, но подобных приёмов я нигде не видел. Тестил на опере, ие, лисе.
Делимся мыслями.