Jump to content
  • 0

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


Zaharov
 Share

Question

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

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

Link to comment
Share on other sites

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0
rash

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

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

:)

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Edited by Zaharov
Link to comment
Share on other sites

  • 0
А если задача усложняется - дивов больше двух (например - 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';
}

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

Вот утром человеку нужно было 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 by Zaharov
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

<!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), но все равно не работает.

Link to comment
Share on other sites

  • 0
Почему то не работает. Опечатки исправил (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 by hf3
Link to comment
Share on other sites

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

Там 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>

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

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

Link to comment
Share on other sites

  • 0
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

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

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

Link to comment
Share on other sites

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

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

:)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy