помогите по js
Всем доброго времени суток.
Кто знает подскажите, как мне сделать такую же штуку как на этом сайте
vitaminpro.ru.
Мне нужно что бы при наведении на див он увеличивался в длину, и при этом появлялась надпись.
Просто даже не знаю что искать, направьте в нужное русло.
В js не силён, пытался сделать сам, но получается какая-то ерунда, надпись появляется только у одного дива. А нужно для каждого
Кто знает подскажите, как мне сделать такую же штуку как на этом сайте
vitaminpro.ru.
Мне нужно что бы при наведении на див он увеличивался в длину, и при этом появлялась надпись.
Просто даже не знаю что искать, направьте в нужное русло.
В js не силён, пытался сделать сам, но получается какая-то ерунда, надпись появляется только у одного дива. А нужно для каждого
показывай что сделал.. и как, от этого и плясать будем..
Вобще можно повесится событием на весь документ, или на родительский елемент дял всех дивов, и уже из обработчика смотерть на каком конкретно елементе мы находимся...
Вобще можно повесится событием на весь документ, или на родительский елемент дял всех дивов, и уже из обработчика смотерть на каком конкретно елементе мы находимся...
Цитата: vadim525
Всем доброго времени суток.
Кто знает подскажите, как мне сделать такую же штуку как на этом сайте
vitaminpro.ru.
Мне нужно что бы при наведении на див он увеличивался в длину, и при этом появлялась надпись.
Просто даже не знаю что искать, направьте в нужное русло.
В js не силён, пытался сделать сам, но получается какая-то ерунда, надпись появляется только у одного дива. А нужно для каждого
Кто знает подскажите, как мне сделать такую же штуку как на этом сайте
vitaminpro.ru.
Мне нужно что бы при наведении на див он увеличивался в длину, и при этом появлялась надпись.
Просто даже не знаю что искать, направьте в нужное русло.
В js не силён, пытался сделать сам, но получается какая-то ерунда, надпись появляется только у одного дива. А нужно для каждого
Вешаете на события onmouseover и onmouseout обработчики увеличения (на первый) размера через класс или напрямую в стиль а на второй это всё убираем. Так как этот блок содержит вложенные элементы поэтому нужно быть внимательным с событиями.
Зачем вам вообще JavaScript?
CSS рулит:
[HTML]<!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=windows-1251" />
<meta http-equiv="Content-Language" content="ru" />
<title>Витаминки - зло</title>
<style type="text/css">
.cnt {
float: left;
position: relative;
width: 160px;
height: 250px;
border-right: 1px solid #ccc;
}
.div {
position: absolute;
top: 0;
left: 0;
}
.xx {
width: 139px;
padding: 10px;
background-color: #FFF;
}
.cnt:hover { border-right: 0; width: 161px; }
.cnt:hover .div { left: -1px; }
.cnt:hover .xx { border: 1px solid gray; }
.cnt:hover .hidden {
border-top: 1px solid #ccc;
display: block;
}
.hidden { display: none; }
.clear { clear:both; }
</style>
</head>
<body>
<div class="prodlist">
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<p>
VitaminPRO - это интернет-магазин профессионального спортивного питания и здоровых продуктов. Вся представленная продукция имеет необходимые сертификаты.
Основная особенность бренда - направленность на широкого потребителя, от профессиональных спортсменов до тех, кто просто хочет поддерживать себя в форме.
Не секрет, что спортивное питание во многих странах Европы является неотъемлемой частью рациона любого человека, который следит за своим здоровьем и физическим состоянием. Мода на здоровый образ жизни растет постоянно и в России, в том числе и за счет популяризации правительством РФ.
Компания VitaminPRO предлагает Вам продукцию от ведущих мировых брендов на рынке спортивного питания:Optimum Nutrition, Universal Nutrition, BSN, MHP, Dymatize Nutrition, Multipower, Weider, Genetic Force, Country Life, Pro Tan, Power System, Ultimate Nutrition и другие.
Широкий спектр товаров, представленных в магазине, поможет Вам дополнить рацион питания необходимыми витаминами и минералами, протеином (белком) и углеводами. В линейке товаров представлены препараты для снижения веса, термогенные комплексы (жиросжигатели), специальные препараты для мужчин и для женщин, необходимые аминокислоты, препараты, способствующие активному долголетию и иные товары, предназначенные для того, чтобы добиться успеха не только в спортивном зале, но в повседневной жизни, ведь Ваш успех это Ваше здоровье и здоровье Ваших родных и близких!
</p>
</body>
</html>
[/HTML]
CSS рулит:
[HTML]<!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=windows-1251" />
<meta http-equiv="Content-Language" content="ru" />
<title>Витаминки - зло</title>
<style type="text/css">
.cnt {
float: left;
position: relative;
width: 160px;
height: 250px;
border-right: 1px solid #ccc;
}
.div {
position: absolute;
top: 0;
left: 0;
}
.xx {
width: 139px;
padding: 10px;
background-color: #FFF;
}
.cnt:hover { border-right: 0; width: 161px; }
.cnt:hover .div { left: -1px; }
.cnt:hover .xx { border: 1px solid gray; }
.cnt:hover .hidden {
border-top: 1px solid #ccc;
display: block;
}
.hidden { display: none; }
.clear { clear:both; }
</style>
</head>
<body>
<div class="prodlist">
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<p>
VitaminPRO - это интернет-магазин профессионального спортивного питания и здоровых продуктов. Вся представленная продукция имеет необходимые сертификаты.
Основная особенность бренда - направленность на широкого потребителя, от профессиональных спортсменов до тех, кто просто хочет поддерживать себя в форме.
Не секрет, что спортивное питание во многих странах Европы является неотъемлемой частью рациона любого человека, который следит за своим здоровьем и физическим состоянием. Мода на здоровый образ жизни растет постоянно и в России, в том числе и за счет популяризации правительством РФ.
Компания VitaminPRO предлагает Вам продукцию от ведущих мировых брендов на рынке спортивного питания:Optimum Nutrition, Universal Nutrition, BSN, MHP, Dymatize Nutrition, Multipower, Weider, Genetic Force, Country Life, Pro Tan, Power System, Ultimate Nutrition и другие.
Широкий спектр товаров, представленных в магазине, поможет Вам дополнить рацион питания необходимыми витаминами и минералами, протеином (белком) и углеводами. В линейке товаров представлены препараты для снижения веса, термогенные комплексы (жиросжигатели), специальные препараты для мужчин и для женщин, необходимые аминокислоты, препараты, способствующие активному долголетию и иные товары, предназначенные для того, чтобы добиться успеха не только в спортивном зале, но в повседневной жизни, ведь Ваш успех это Ваше здоровье и здоровье Ваших родных и близких!
</p>
</body>
</html>
[/HTML]
Цитата: MrLinker
Зачем вам вообще JavaScript?
CSS рулит:
CSS рулит:
Незнаю как в последних версия ИЕ, но 6 такое не будет работать (hover поддерживается только для тэга a) поэтому и JS.
Цитата:
Незнаю как в последних версия ИЕ, но 6 такое не будет работать (hover поддерживается только для тэга a) поэтому и JS.
hover в IE6 и IE7 чинится.
http://www.xs4all.nl/~peterned/csshover.html
Фикс на базе js.
Суммарная доля посетителей IE6+IE7 ~15%
Js отключен у 25% пользователей.
Таким образом можно подсчитать, у скольких юзеров не сработает CSS-вариант: 15 / 4 = 3,75%
При прямом js-подходе - 25%
Вопросы есть?
Так что "поэтому и JS" совсем необосновано.
Вопрос есть, откуда такие цифры.
Собсно я бы тоже отдал предпочтение ЦСС, но попробовал бы извратиться и вместо дива использовал бы ссылку ...
Собсно я бы тоже отдал предпочтение ЦСС, но попробовал бы извратиться и вместо дива использовал бы ссылку ...
Цифры получены из статистики.
По поводу js обсуждалось как-то:
http://forum.codenet.ru/showthread.php?t=61717
По поводу js обсуждалось как-то:
http://forum.codenet.ru/showthread.php?t=61717
Цитата: MrLinker
Цифры получены из статистики.
пруфлинк? на авторитетный источник только..
Что же все такие ленивые, openstat.ru
Цитата: MrLinker
Зачем вам вообще JavaScript?
CSS рулит:
[HTML]<!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=windows-1251" />
<meta http-equiv="Content-Language" content="ru" />
<title>Витаминки - зло</title>
<style type="text/css">
.cnt {
float: left;
position: relative;
width: 160px;
height: 250px;
border-right: 1px solid #ccc;
}
.div {
position: absolute;
top: 0;
left: 0;
}
.xx {
width: 139px;
padding: 10px;
background-color: #FFF;
}
.cnt:hover { border-right: 0; width: 161px; }
.cnt:hover .div { left: -1px; }
.cnt:hover .xx { border: 1px solid gray; }
.cnt:hover .hidden {
border-top: 1px solid #ccc;
display: block;
}
.hidden { display: none; }
.clear { clear:both; }
</style>
</head>
<body>
<div class="prodlist">
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<p>
VitaminPRO - это интернет-магазин профессионального спортивного питания и здоровых продуктов. Вся представленная продукция имеет необходимые сертификаты.
Основная особенность бренда - направленность на широкого потребителя, от профессиональных спортсменов до тех, кто просто хочет поддерживать себя в форме.
Не секрет, что спортивное питание во многих странах Европы является неотъемлемой частью рациона любого человека, который следит за своим здоровьем и физическим состоянием. Мода на здоровый образ жизни растет постоянно и в России, в том числе и за счет популяризации правительством РФ.
Компания VitaminPRO предлагает Вам продукцию от ведущих мировых брендов на рынке спортивного питания:Optimum Nutrition, Universal Nutrition, BSN, MHP, Dymatize Nutrition, Multipower, Weider, Genetic Force, Country Life, Pro Tan, Power System, Ultimate Nutrition и другие.
Широкий спектр товаров, представленных в магазине, поможет Вам дополнить рацион питания необходимыми витаминами и минералами, протеином (белком) и углеводами. В линейке товаров представлены препараты для снижения веса, термогенные комплексы (жиросжигатели), специальные препараты для мужчин и для женщин, необходимые аминокислоты, препараты, способствующие активному долголетию и иные товары, предназначенные для того, чтобы добиться успеха не только в спортивном зале, но в повседневной жизни, ведь Ваш успех это Ваше здоровье и здоровье Ваших родных и близких!
</p>
</body>
</html>
[/HTML]
CSS рулит:
[HTML]<!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=windows-1251" />
<meta http-equiv="Content-Language" content="ru" />
<title>Витаминки - зло</title>
<style type="text/css">
.cnt {
float: left;
position: relative;
width: 160px;
height: 250px;
border-right: 1px solid #ccc;
}
.div {
position: absolute;
top: 0;
left: 0;
}
.xx {
width: 139px;
padding: 10px;
background-color: #FFF;
}
.cnt:hover { border-right: 0; width: 161px; }
.cnt:hover .div { left: -1px; }
.cnt:hover .xx { border: 1px solid gray; }
.cnt:hover .hidden {
border-top: 1px solid #ccc;
display: block;
}
.hidden { display: none; }
.clear { clear:both; }
</style>
</head>
<body>
<div class="prodlist">
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
<div class="cnt">
<div class="div">
<div class="xx">
<img src="http://vitaminpro.ru/img/catalog/l795.jpg" alt=""/>
<p><a href="#">Hi Protein Gainer 6lb - 2724g</a></p>
<p><strong>1655 руб.</strong></p>
<div class="hidden">
<p>2724 г.</p>
<p><a href="#">Добавить в корзину</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<p>
VitaminPRO - это интернет-магазин профессионального спортивного питания и здоровых продуктов. Вся представленная продукция имеет необходимые сертификаты.
Основная особенность бренда - направленность на широкого потребителя, от профессиональных спортсменов до тех, кто просто хочет поддерживать себя в форме.
Не секрет, что спортивное питание во многих странах Европы является неотъемлемой частью рациона любого человека, который следит за своим здоровьем и физическим состоянием. Мода на здоровый образ жизни растет постоянно и в России, в том числе и за счет популяризации правительством РФ.
Компания VitaminPRO предлагает Вам продукцию от ведущих мировых брендов на рынке спортивного питания:Optimum Nutrition, Universal Nutrition, BSN, MHP, Dymatize Nutrition, Multipower, Weider, Genetic Force, Country Life, Pro Tan, Power System, Ultimate Nutrition и другие.
Широкий спектр товаров, представленных в магазине, поможет Вам дополнить рацион питания необходимыми витаминами и минералами, протеином (белком) и углеводами. В линейке товаров представлены препараты для снижения веса, термогенные комплексы (жиросжигатели), специальные препараты для мужчин и для женщин, необходимые аминокислоты, препараты, способствующие активному долголетию и иные товары, предназначенные для того, чтобы добиться успеха не только в спортивном зале, но в повседневной жизни, ведь Ваш успех это Ваше здоровье и здоровье Ваших родных и близких!
</p>
</body>
</html>
[/HTML]
да так работает всё отлично, спасибо, но хочется немного плавности, поэтому и надо на js
Плавности хочется вам.
А вот посетителям интернет-магазина плавность не нужна. Им нужно быстро и понятно.
Это мое мнение.
Решать вам, конечно.
И вообще, возможно у вас и не интернет-магазин.
А вот посетителям интернет-магазина плавность не нужна. Им нужно быстро и понятно.
Это мое мнение.
Решать вам, конечно.
И вообще, возможно у вас и не интернет-магазин.
Цитата: Lone Wolf
показывай что сделал.. и как, от этого и плясать будем..
Вобще можно повесится событием на весь документ, или на родительский елемент дял всех дивов, и уже из обработчика смотерть на каком конкретно елементе мы находимся...
Вобще можно повесится событием на весь документ, или на родительский елемент дял всех дивов, и уже из обработчика смотерть на каком конкретно елементе мы находимся...
ну делал так
[HTML]
<script type="text/javascript">
function hiddenLayer() {
document.getElementById("descr").style.visibility = "hidden";
}
function showLayer() {
document.getElementById("descr").style.visibility = "visible";
}
</script>
[/HTML]
дальше css
[HTML]
.one {
width: 200px;
height: 200px;
position: relative;
float: left;
}
.one:hover {
width: 200px;
height: 300px;
position: relative;
float: left;
}
[/HTML]
HTML
[HTML]
<div class="one" onMouseOver="showLayer()" onMouseOut="hiddenLayer()">
<img src="IMP/3d.png" border="0px">
<div id="descr" style="visibility: hidden">
<a href="#">добавить в корзину</a>
</div></div>
[/HTML]
я если чесно, пока только интутивно понимаю что к чему, но реализовать не могу, вот учусь на примерах
Цитата: MrLinker
Плавности хочется вам.
А вот посетителям интернет-магазина плавность не нужна. Им нужно быстро и понятно.
Это мое мнение.
Решать вам, конечно.
И вообще, возможно у вас и не интернет-магазин.
А вот посетителям интернет-магазина плавность не нужна. Им нужно быстро и понятно.
Это мое мнение.
Решать вам, конечно.
И вообще, возможно у вас и не интернет-магазин.
Ну да, это не совсем интернет магазин, это картинная галерея, где есть возможность добавить картину в галерею
Цитата: MrLinker
Что же все такие ленивые, openstat.ru
не совсем понял по поводу openstat.ru