Значт, посетила меня, однажды, мысль - а что, если сделать так?! Вот, что, собственно, из этого вышло:
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-правилами при наведении. Цель же этого приёма - менять контент при клике. Из-за оперы мы не можем вставлять в контент ссылки, формы и т.д., т.к. они перестают работать. Обойти это мне не удалось
. Не мешает нормальной индексации. Можно поставить закладку. Если это баян - напишите, но подобных приёмов я нигде не видел. Тестил на опере, ие, лисе.
Делимся мыслями.