Увеличение картинки с тёмной рамочки - Скрипты Разное - web мастеру ucoz
Приветствую Вас Прохожий | RSS Понедельник, 16.01.2017, 22:12
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 16
Гостей: 14
Пользователей: 2
мир, MaDaRa



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Увеличение картинки с тёмной рамочки

Увеличение картинки с тёмной рамочки
Данный скрипт нашёл опять же на англ.сайте, немного подправил css, подписал значения в css, и вот выкладываю. Картинка увеличивается при наведении, подойдёт для тёмных дизайнов, а так как я подписал некоторые строки в css, то вы легко поймёте как изменить цвет текста или рамки...

Это в css

Code
/* smart image enlarger starts here */

.ienlarger {
  float: left;
  clear: none;
  padding-bottom: 5px;
  padding-right: 5px;
}

.ienlarger a {
  display:block;
  text-decoration: none;

}

.ienlarger a:hover{
  position:relative;
}

.ienlarger span img {
  border: 1px solid #FFFFFF; /* Белая рамка вокруг изображения */
  margin-bottom: 8px;
}

.ienlarger a span {
  position: absolute;
  display:none;
  color: #FFCC00; /* Цвет текста */
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px; /* Размер текста */
  background-color: #000000; /* темная рамка вокруг изображенгия */
  font-weight: bold;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 13px;
  padding-left: 10px;
}

.ienlarger img {
border-width: 0;
}

.ienlarger a:hover span {
  display:block;
  top: 50px; /* чем больше значение, тем ниже опустится картинка при наведении */
  left: 90px; /* Чем больше значение, тем больше в право уйдёт картинка при наведении */
  z-index: 100;
   

}

/* smart image enlarger ends here */

Это туда где будет изображение

Code

<div class="ienlarger"><a href="Ссылка куда будете переходить при нажатии, если не надо то поставьте #"><img src="Ссылка на изображение" width="100" height="100" alt="thumb" class="resize_thumb" /><span>
  <img src="Ссылка на изображение ещё раз" alt="large" /><br />
  Ваш Текст UcozOn.ru</span></a></div>

width="100" height="100" - вот этим вы можете регулировать уменьшенное изображение

Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 2212 | Комментарии: 2 | Рейтинг: 5.0/1 | |Категория: Скрипты Разное | Добавил: Kapusha | Дата: 24.03.2011 | Скачали: 0 | Теги: тёмной, Картинки, рамочки, увеличение
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 2
2 Kapusha   Дата: 24.03.2011  Время: 16:31   [№ 7260]
незачто)

1 LEO--MESSI   Дата: 24.03.2011  Время: 16:29   [№ 7259]
Как и говорил ты всё таки выложил!Спасибо


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 SALEACCS.RU - Магазин а...

0

2 Проблема с информером

14

3 Не работает статистика ...

18

4 Может у кого есть!

3

5 Работа на заводе

17

6 Вконтакте без причины б...

10

7 Комплексный прогон сайт...

51

8 Проблема с bbcode (code...

0

9 Как скачать видео файл ...

5

10 Уже все перепробовал )

2


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2017


Кнопка 88х31 сайта ucozon.ru