Четверг, 05.03.2026, 05:03
Меню сайта
    Форма входа
    Категории раздела
    скрипты для ucoz сайта [3099]
    шаблоны для ucoz скачать [2660]
    Иконки групп для форума [25]
    Графика для сайта [1953]
    шаблоны psd для фотошопа [27]
    кисти для фотошопа [39]
    уроки фотошопа на русском языке [4]
    стили для фотошопа [3]
    шрифты для фотошопа cs4 [12]
    Web-master [3058]
    Поиск
    Календарь
    «  Май 2009  »
    Пн Вт Ср Чт Пт Сб Вс
        123
    45678910
    11121314151617
    18192021222324
    25262728293031
    Архив записей
    Наш опрос
    Умеете ли вы писать скрипты для ucoz?
    Всего ответов: 73
    Мини-чат
    200
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Главная » 2009 » Май » 10 » Картинка при наведении на ссылку или на картинку
    15:10
    Картинка при наведении на ссылку или на картинку

    Интересный скрипт работает на css . При наведении на ссылку появляется картинка .. Очень удобно делать к примеру в блок друзья при наведении на ссылку будет видно скрин сайта но он необновляется т.е. только та картинка которую сделали вы ...

    Чтобы его установить в css прописываем :

    Code
    <style type="text/css">

    .thumbnail{
    position: relative;
    z-index: 0;
    }

    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }

    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }

    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }

    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */

    }

    </style>

    Ссылка должна быть такая :

    Code
    <a class="thumbnail" href="http://1ucoz.3dn.ru/">ваш текст<span><img src="ссылка на рисунок" />
    ваш текст </span></a>

    Также можно сделать чтобы при наведении на картинку появлялас еще картинка например увеличенная очень красиво получается ..

    Code
    <a class="thumbnail" href="http://1ucoz.3dn.ru/"><img src="ссылка на рисунок" width="100px" height="66px" border="0" /><span><img src="ссылка на рисунок" />
    Ваш текст</span></a>
    Категория: скрипты для ucoz сайта | Просмотров: 626 | Добавил: NoName74 | Рейтинг: 0.0/0
    Всего комментариев: 1
    1 DaVinChi  
    0
    Неплохо, вполне можно поставить + cool cool

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