Навигация onmouseover

ff98 · March 30, 2009

Народ, подскажите, пожалуйста, как сделать навигацию как на сайте www.gorodovoy.spb.ru??

(менюшка находится почти внизу, после слов "Отдых в Санкт-Петербурге - рестораны....")

Вроде как все просто - слои переключаются при наведении курсора на вкладки, но пытаюсь сделать тоже самое в упрощенном варианте, не получается(

не могу понять что забыл:

<!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>Меню</title>

<style type="text/css">
	#block1 .active {display:block}
</style>

</head>

<body>

<script language="JavaScript"><!--
// n1 - номер меню
// n2 - номер блока
function show_block(n1,n2)
{
 var l = document.all["fmenu"+n1].getElementsByTagName("div");
 for (var i=0; i<l.length; i++) if (l[i].className=="active") l[i].className="";

 var l = document.all["block"+n1].getElementsByTagName("div");
 for (var i=0; i<l.length; i++) l[i].style.display="none";

 document.all["m"+n2].className="active";
 document.all["layer"+n2].style.display="block";

 var l = document.all["layer"+n2].getElementsByTagName("div");
 for (var i=0; i<l.length; i++) l[i].style.display="block";

};
//--></script>


   <div>
		<table cellspacing="0">
		  <tr>
			<td><div class="active"><a href="http://link/" onmouseover="show_block(1,10)">Страница1</a></div></td>
			<td><div><a href="link/1" onmouseover="show_block(1,11)">Страница2</a></div></td>
			<td><div><a href="link/2" onmouseover="show_block(1,12)">Страница3</a></div></td></tr>
		</table>
	  </div>

<div id="block1">   

<div id="layer10" style="display:block">
<table><tr><td>Текст на Странице1</td></tr></table>
</div>

<div id="layer11" style="display:none">
<table><tr><td>Текст на Странице2</td></tr></table>
</div>

<div id="layer12" style="display:none">
<table><tr><td>Текст на Странице3</td></tr></table>
</div>

</div>

</body>
</html>

хэлп

Edited March 30, 2009 by ff98

Veseloff · April 1, 2009

C таким доктайпом не работает

zwie · April 1, 2009

такой вариант не устроит? имеются сформированные дивы + еще один див, куда будет подгружаться нужный при наведении на ссылку.

<!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">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Меню</title>

<style type="text/css">
	#block1 .active {display:block}
</style>

</head>

<body>

<script language="JavaScript">
// n1 - номер меню
// n2 - номер блока
function show_block(n2)
{
document.getElementById('myblock').innerHTML = document.getElementById('layer'+n2).innerHTML;
};
</script>


   <div>
		<table cellspacing="0">
		  <tr>
			<td><div class="active"><a href="http://link/" onmouseover="show_block(10);">Страница1</a></div></td>
			<td><div><a href="link/1" onmouseover="show_block(11);">Страница2</a></div></td>
			<td><div><a href="link/2" onmouseover="show_block(12);">Страница3</a></div></td></tr>
		</table>
	  </div>
<div id="myblock">Cюда будет выводиться текст</div>
<div id="block1">

<div id="layer10" style="display:none">
<table><tr><td>Текст на Странице1</td></tr></table>
</div>

<div id="layer11" style="display:none">
<table><tr><td>Текст на Странице2</td></tr></table>
</div>

<div id="layer12" style="display:none">
<table><tr><td>Текст на Странице3</td></tr></table>
</div>

</div>

</body>
</html>

ff98 · April 2, 2009

такой вариант не устроит? имеются сформированные дивы + еще один див, куда будет подгружаться нужный при наведении на ссылку.

<!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">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Меню</title>

<style type="text/css">
	#block1 .active {display:block}
</style>

</head>

<body>

<script language="JavaScript">
// n1 - номер меню
// n2 - номер блока
function show_block(n2)
{
document.getElementById('myblock').innerHTML = document.getElementById('layer'+n2).innerHTML;
};
</script>


   <div>
		<table cellspacing="0">
		  <tr>
			<td><div class="active"><a href="http://link/" onmouseover="show_block(10);">Страница1</a></div></td>
			<td><div><a href="link/1" onmouseover="show_block(11);">Страница2</a></div></td>
			<td><div><a href="link/2" onmouseover="show_block(12);">Страница3</a></div></td></tr>
		</table>
	  </div>
<div id="myblock">Cюда будет выводиться текст</div>
<div id="block1">

<div id="layer10" style="display:none">
<table><tr><td>Текст на Странице1</td></tr></table>
</div>

<div id="layer11" style="display:none">
<table><tr><td>Текст на Странице2</td></tr></table>
</div>

<div id="layer12" style="display:none">
<table><tr><td>Текст на Странице3</td></tr></table>
</div>

</div>

</body>
</html>

Спасибо! Отличный вариант!

Sign In

Навигация onmouseover

Question

ff98

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Veseloff

Link to comment

Share on other sites

zwie

Link to comment

Share on other sites

ff98

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information