Приветствую Вас Прохожий | RSS Воскресенье, 04.12.2016, 13:19
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


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



Статистика
Онлайн всего: 11
Гостей: 10
Пользователей: 1
LESIYI



Главная » Файлы » Скрипты для 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" - вот этим вы можете регулировать уменьшенное изображение

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

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 2190 | Комментарии: 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 Куплю сайты с ТИЦ/PR (п...

9

2 Предлагаю услуги для ан...

0

3 Предлагаю услуги по про...

0

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

51

5 Сайт онлайн фильмов на ...

1

6 Проблема с таблицей

9

7 Отредактировать фото

2

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

1

9 Скрипт "Нравится&q...

3

10 Меню для сайта

3


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


Комментарии



Copyright UcozOn.ru™ © 2008-2016


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