| Главная » Статьи » Скрипты » Скрипты для 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" - вот этим вы можете регулировать уменьшенное изображение | |
| Просмотров: 484 | Теги: | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |
