Замена div'а другим div'ом

Zaharov · August 14, 2009

Можно ли каким-либо образом применить эффект ролловер к дивам?

То есть при онклике или онмаусовер меняется один див на другой, при этом каждый из дивов содержит несколько объектов ( текст, таблица, картинка).

rash · August 14, 2009

Если размер обоих дивов одинаков и заранее известен, то можно даже без яваскрипта (в пролете только IE6, но скрипты его спасут).

rash · August 14, 2009

Все гораздо проще, даже это условие не обязательно.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Rollover</title>
	<style type="text/css" media="screen">
		.rollover {
			width: 200px;
			}
		.frame-1 span {
			color: #efefef;
			}
		.rollover .frame-2 {
			display: none;
			}
		.rollover:hover .frame-1 {
			display: none;
			}
		.rollover:hover .frame-2 {
			display: block;
			}
	</style>
</head>
<body>
<div class="rollover">
	<div class="frame-1">
		<p>Первая заповедь: не нав<span>р</span>еди!</p>
	</div>
	<div class="frame-2">
		<p>Что ж ты делаешь, а?!!</p>
	</div>
</div>
</body>
</html>

psywalker · August 15, 2009

rash

Я знал про этот метод, но всё же Спасибо, вот хотел спросить: А как заставить работать эту конструкцию в ИЕ6?

hf3 · August 15, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rollover</title>
<style type="text/css" media="screen">
.rollover {
width: 200px;
}
</style>
<script type='text/javascript'>
functiob changeDiv
{
 document.getElementBuId('frame1').style.display='none';
 document.getElementBuId('frame2').style.display='block';
}
functiob changeDiv2
{
 document.getElementBuId('frame1').style.display='block';
 document.getElementBuId('frame2').style.display='none';
}
</script>
</head>
<body>
<div class="rollover" onmouseover='changeDiv' onmouseout='changeDiv2'>
<div id="frame-1">
<p>Первая заповедь: не нав<span>р</span>еди!</p>
</div>
<div id="frame-2">
<p>Что ж ты делаешь, а?!!</p>
</div>
</div>
</body>
</html>

например как то так

psywalker · August 15, 2009

hf3

Воо, спасибо большое

rash · August 15, 2009

rash
Я знал про этот метод, но всё же Спасибо, вот хотел спросить: А как заставить работать эту конструкцию в ИЕ6?

ну я бы по наведению и отведению мыши менял класс, и для ие6 использовал имя класса вместо :hover

psywalker · August 15, 2009

ну я бы по наведению и отведению мыши менял класс, и для ие6 использовал имя класса вместо :hover

Слушай, извини плиз, я не понял, тоесть ты даже без JS мог бы так сделать? Если можно, то поподробнее расскажи, а

rash · August 15, 2009

Слушай, извини плиз, я не понял, тоесть ты даже без JS мог бы так сделать? Если можно, то поподробнее расскажи, а

0

Нет, без JS не получится, если только не обернуть все это дело в ссылку вместо дива -)

hf3 · August 15, 2009

Нет, без JS не получится, если только не обернуть все это дело в ссылку вместо дива -)

обертывать в ссылку - это извращение…))

ИМХО - вообще накаты, клики и все прочие события - изначально были вотчиной JS

Т.е. хорошо что в CSS есть псевдо класс Ховер , но JS будет явно не хуже… Тем более с его помощью можно все и в одном диве делать просто меняю его содержимое. DHTML очень полезная штука

rash · August 16, 2009

обертывать в ссылку - это извращение…))

Я знаю, это была шутка, если кто не понял :-)

ИМХО - вообще накаты, клики и все прочие события - изначально были вотчиной JS
Т.е. хорошо что в CSS есть псевдо класс Ховер , но JS будет явно не хуже… Тем более с его помощью можно все и в одном диве делать просто меняю его содержимое. DHTML очень полезная штука

Использовать стили, если это позволит обойтись без JS, хорошо уже хотя бы потому, что все будет работать даже без JS.

hf3 · August 16, 2009

если кто не понял :-)

хорошо уже хотя бы потому, что все будет работать даже без JS.

А много пользователей его отключают? Есть какая нить статистика на этот счет?

psywalker · August 16, 2009

хорошо уже хотя бы потому, что все будет работать даже без JS.
А много пользователей его отключают? Есть какая нить статистика на этот счет?

А дело не в этом, а дело в том, что если есть возможность обойтись простым CSS, то никчему использовать JS

hf3 · August 16, 2009

ну если то так да…

Но в данном случае Из за 6 ИЕ - только им не обойтись

Zaharov · August 16, 2009

Спасибо всем, кто откликнулся.

А если задача усложняется - дивов больше двух (например - 5).

Как сделать так, чтобы при клике мышкой только нужный див получал display:block, а остальные - display:none?

Edited August 16, 2009 by Zaharov

hf3 · August 16, 2009

А если задача усложняется - дивов больше двух (например - 5).
Как сделать так, чтобы при клике мышкой только нужный див получал display:block, а остальные - display:none?

Вот код который выше дал - все по шаблону - только вместо события onmouseover - onclick

{
document.getElementBuId('frame1').style.display='block';
document.getElementBuId('frame2').style.display='none';
document.getElementBuId('frame3').style.display='none';
document.getElementBuId('frame4').style.display='none';
document.getElementBuId('frame5').style.display='none';
}

rash · August 16, 2009

Но в данном случае Из за 6 ИЕ - только им не обойтись

Ну вот только для IE6 его и написать -)

hf3 · August 16, 2009

Ну вот только для IE6 его и написать -)

а как же расшеряемость?)

Вот утром человеку нужно было 2 дива - ксс - справлялся , а вот вечером ему уже нужно 5 дивов - Ксс в пролете, а JS - только добавить 3 строчки ну и сами дивы само собой

Zaharov · August 16, 2009

а как же расшеряемость?)
Вот утром человеку нужно было 2 дива - ксс - справлялся , а вот вечером ему уже нужно 5 дивов - Ксс в пролете, а JS - только добавить 3 строчки ну и сами дивы само собой

Точно. Вот тому подтверждение - новый вопрос:

а если вместо id подставить class будет работать?

<div id="frame1" class="frame"></div>
<div id="frame2" class="frame"></div>
<div id="frame3" class="frame"></div>
<div id="frame4" class="frame"></div>
<div id="frame5" class="frame"></div>
......

{
document.getElementBuId('frame1').style.display='block';
document.getElementBuId('frame').style.display='none';

}

И, если не в лом, подскажите, где в сети есть полный и удобный справочник по Яваскрипту?

Вот как данный сайт для HTML и CSS( HtmlBook.Ru).

Edited August 16, 2009 by Zaharov

rash · August 16, 2009

Вот утром человеку нужно было 2 дива - ксс - справлялся , а вот вечером ему уже нужно 5 дивов - Ксс в пролете, а JS - только добавить 3 строчки ну и сами дивы само собой

В задаче был ролловер. Ролловер подразумевает два элемента. Если элементов может быть больше, то это не ролловер, и задача сформулирована неверно.

Zaharov · August 16, 2009

В задаче был ролловер. Ролловер подразумевает два элемента. Если элементов может быть больше, то это не ролловер, и задача сформулирована неверно.

Ну, в принципе, да. Это уже другая задача как закрыть несколько дивов. Пока не получается.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rollover</title>
<style type="text/css" media="screen">
.rollover {
width: 200px;
}
</style>
<script type='text/javascript'>
functiob changeDiv
{
 document.getElementBuId('frame1').style.display='none';
 document.getElementBuId('frame2').style.display='block';
}
functiob changeDiv2
{
 document.getElementBuId('frame1').style.display='block';
 document.getElementBuId('frame2').style.display='none';
}
</script>
</head>
<body>
<div class="rollover" onmouseover='changeDiv' onmouseout='changeDiv2'>
<div id="frame-1">
<p>Первая заповедь: не нав<span>р</span>еди!</p>
</div>
<div id="frame-2">
<p>Что ж ты делаешь, а?!!</p>
</div>
</div>
</body>
</html>

например как то так

Почему то не работает. Опечатки исправил (function), но все равно не работает.

hf3 · August 16, 2009

Почему то не работает. Опечатки исправил (function), но все равно не работает

ну так часто бывает когда набираешь код лапками))

Там u вместое y , скобок нету…

Вообще набирать такое нужено в спец. редакторах)))

вот…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rollover</title>
<style type="text/css" media="screen">
.rollover {
width: 244px;
}
#frame2
{
	display:none;
}
</style>
<script type='text/javascript'>
function changeDiv()
{
document.getElementById("frame1").style.display="none";
document.getElementById("frame2").style.display="block";
};
function changeDiv2()
{
document.getElementById("frame1").style.display="block";
document.getElementById("frame2").style.display="none";
};
</script>
</head>
<body>
<div class="rollover" onmouseover="changeDiv()" onmouseout="changeDiv2()">
	<div id="frame1">
		<p>Первая заповедь: не нав<span>р</span>еди!</p>
	</div>

	<div id="frame2">
	<p>Что ж ты делаешь, а?!!</p>
	</div>
</div>
</body>
</html>

Edited August 16, 2009 by hf3

Zaharov · August 16, 2009

ну так часто бывает когда набираешь код лапками))

Там u вместое y , скобок нету…

Вообще набирать такое нужено в спец. редакторах)))

вот…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rollover</title>
<style type="text/css" media="screen">
.rollover {
width: 244px;
}
#frame2
{
	display:none;
}
</style>
<script type='text/javascript'>
function changeDiv()
{
document.getElementById("frame1").style.display="none";
document.getElementById("frame2").style.display="block";
};
function changeDiv2()
{
document.getElementById("frame1").style.display="block";
document.getElementById("frame2").style.display="none";
};
</script>
</head>
<body>
<div class="rollover" onmouseover="changeDiv()" onmouseout="changeDiv2()">
	<div id="frame1">
		<p>Первая заповедь: не нав<span>р</span>еди!</p>
	</div>

	<div id="frame2">
	<p>Что ж ты делаешь, а?!!</p>
	</div>
</div>
</body>
</html>

Работает. Спасибо.

Эта кодировка:

чем-то удобнее charset=windows-1251?

rash · August 16, 2009

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
чем-то удобнее charset=windows-1251?

Она удобнее тем, что может включать любые существующие символы, в то время, как набор символов в windows-1251 ограничен.

Некоторых смущает то, что символы, не входящие в ASCII кодируются больше, чем одним байтом, но я считаю, что чем беспокоиться о байтах в исходном тексте, лучше графику оптимизировать как следует.

s0rr0w · August 17, 2009

Она удобнее тем, что может включать любые существующие символы, в то время, как набор символов в windows-1251 ограничен.

Неверно. Всего 65 тысяч символов. Если бы это было правдой, то не было бы UTF-16

Tokolist · August 17, 2009

И не было бы UTF-32

Sign In

Замена div'а другим div'ом

Question

Link to comment

Share on other sites

29 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information