Скрипты для сайта

Скрипты для сайта

Главная | Регистрация | Вход

Приветствую Вас Гость | RSS

Меню сайта

Теги HTML

Терминология языка HTML
Теги HTML по алфавиту
Теги HTML по типу
Уроки HTML начинающим

CSS

Введение в стили CSS
Параметры шрифта и фона
Отображения текста
Отступы,рамки и выделение
Параметры абзацев,списков
Параметры таблиц
Специальные селекторы

Реклама

Все для сайта

Все для графики
Меню и навигация
Слайдеры и слайдшоу
Кнопки и иконки
Tooltips
Аудио и видео плееры
Формы и таблицы

Галерея вашего магазина


Галерея вашего магазина Интересный и простой эффект, который можно использовать на сайте интернет магазина. Полноразмерные изображения помещаются в контейнер DIV меньшего размера. Изображение центрируется, но не показывается полностью, так как параметр overflow:hidden - в состоянии включен. При наведении мыши на картинку, overflow:hidden переходит в состояние выключен и рубашка показывается полностью. JAVASCRIPT <script type="text/javascript" src="http://samouchka-html.ucoz.ru/script/1.6.2.gal.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".teebox a").mouseover(function(){ $(this).parent().addClass("selected"); $(this).find('img').animate({opacity: "0.0"}, 0); //Hides overlay $(this).parent().find('.caption').hide(); //Hides Caption }).mouseout(function(){ $(this).parent().removeClass("selected"); $(this).find('img').animate({opacity: "1.0"}, 0); //Shows overlay $(this).parent().find('.caption').show(); //Shows Caption }); }); </script> Основной код CSS: <style type="text/css"> { margin:0; padding:0; } img{ border: none; } body { text-align: center; background: #222; } h2{ color: #333; font:italic 36px Georgia, serif; padding: 20px; border-bottom: dashed 1px #999; clear: both; } #content{ width: 100%; margin: 0px auto; background: #fff; text-align: center; margin-bottom: 50px; } .row{ /Container for each row of shirts/ width: 495px; margin: 0px auto; clear:both; padding: 20px 0; } .teebox{ overflow: hidden; /Prevents excess of image from showing/ position: relative; margin: 0 10px; width: 144px; /Width and height define thumbnail size/ height: 183px; float: left; clear: right; z-index: 0; } .selected{ overflow: visible; /Display part of image that not currently visible/ z-index: 10; } .teebox img { left:-84px; /Use this number to center your image when not hovered/ position: absolute; } .teebox a{ /Area that changes to selected class when hovered over/ display:block; position: relative; float: left; left: 84px; /Use to line up the overlay image/ z-index: 1; } .caption{ color: #2FB5FF; font:14px Arial; position: relative; float: left; left: 0px; top: 146px; padding: 10px; background: #222; z-index: 1; } </style> Листинг* <div id="content"> <h2>Галерея рубашек</h2> <div class="row"> <div class="teebox"> <a href="#"><img src="/images/overlay.png"></a> <img src="/images/pinktee.png"> <div class="caption">$10</div> </div> <div class="teebox"> <a href="#"><img src="/images/overlay.png"></a> <img src="/images/bluetee.png"> <div class="caption">$10</div> </div> <div class="teebox"> <a href="#"><img src="/images/overlay.png"></a> <img src="/images/greytee.png"> <div class="caption">$10</div> </div> </div> <div class="row"> <div class="teebox"> <a href="#"><img src="/images/overlay.png"></a> <img src="/images/redtee.png"> <div class="caption">$10</div> </div> <div class="teebox"> <a href="#"><img src="/images/overlay.png"></a> <img src="/images/pinktee.png"> <div class="caption">$10</div> </div> <div class="teebox"> <a href="#"><img src="/images/overlay.png"></a> <img src="/images/redtee.png"> <div class="caption">$10</div> </div> </div> <h2>Например, для интернет магазина</h2> </div> Предпросмотр Скачать

Заработай сейчас!

Заработай сейчас

Навигация по сайту

Поиск по сайту

Друзья сайта

Самоучитель html
Все для веб-мастера
Музыка для души
Мир развлечений
Скачать кино бесплатно!
Видеоклипы online

Хостинг от uCoz

Avon

Присоединяйтесь
к Avon