Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Кому на Руси жить хорошо?
Всего ответов: 893
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Разные скрипты

Всплывающая картинка при наведении на ссылку или на картинку

Хочешь сказать спасибо? Кликни на рекламный баннер.

30.06.2012, 22:09
Интересный скрипт работает на css. При наведении на ссылку (картинку) появляется картинка. Очень удобно делать к примеру в блок друзья при наведении на ссылку будет виден скриншот сайта но он не обновляется т.е. только та картинка которую поставите.
CSS стиль я немного переделал под себя.
в CSS прописываем :
Code
/*Всплывающий скриншот*/
.thumbnail{  
position: relative;  
z-index: 0;  
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{ /*CSS for enlarged image*/  
position: absolute;  
background-color: #3d3d3d;  
padding: 5px;  
left: -1000px;  
border: 1px solid white;  
visibility: hidden;  
color: Yellow;  
text-decoration: none;  
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}  
.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 */  
}  
/*---------------------*/

Ссылка должна быть такая :
Code
<a class="thumbnail" href="#">Ссылка<span>Здесь описание<img src="ВАША КАРТИНКА" width="500"/></span></a>

Также можно сделать чтобы при наведении на картинку появлялась еще картинка например увеличенная очень красиво получается ..
Code
<a class="thumbnail" href="#"><img src="ссылка на рисунок" width="100px" height="66px" border="0" /><span><img src="ссылка на рисунок" />Ваш текст</span></a>

Готово !





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 32741 | Загрузок: 0 | Комментарии: 15 | Рейтинг: 4.8/17
Теги: Всплывающая картинка, скрипт, при наведении на ссылку или на карт, картинка в подсказке
Всего комментариев: 141 2 »
Сообщение №14 от Эдуард
Добавлен: 08.01.2016

Спасибо за скрипт. Подскажите, а как сделать чтобы всплывающая картинка закрывалась еще и щелчком мыши по ней, а не только сдвигом курсора с неё?
Сообщение №12 от Андрей
Добавлен: 08.08.2015

Спасибо! Хороший скрипт, применил на своем проекте.
Сообщение №13 от Олег
Добавлен: 08.08.2015

Пожалуйста. У нас в коллекции много всего интересного, но пока нет времени на новые материалы. Заходите к нам ещё smile
Сообщение №10 от Светлана
Добавлен: 24.02.2014

Добрый вечер. Подскажите как сделать в этом скрипте так, чтобы вместо ссылки был текст, по которому можно перейти на нужный сайт. У меня не получается.
Сообщение №11 от Олег
Добавлен: 25.02.2014

Здравствуйте Светлана !
Если честно я вообще не понял что Вы хотите сделать.
Какую строчку Вы хотите изменить ???
Сообщение №6 от Александр
Добавлен: 09.11.2013

Большое спасибо. Но увы спасибо это не хлеб. Олег, а мы можем рассчитывать на Вашу помощь, не безвозмездную, в формировании портала. Предложенный Вами скрипт мы хотели бы применять на портале. Есть такая станица ССЫЛКА СКРЫТА АДМИНОМ, здесь осуществляется выбор государства, и далее нужно осуществлять переходы на соответствующие сайты.
Сообщение №7 от Олег
Добавлен: 09.11.2013

Вы можете рассчитывать на мою не безвозмездную yes помощь.
Сообщение №8 от Александр
Добавлен: 09.11.2013

как можно будет с Вами оперативно связываться??
Сообщение №9 от Олег
Добавлен: 09.11.2013

Отправил письмо Вам на E-Mail.
Сообщение №3 от Александр
Добавлен: 09.11.2013

За скрипт спасибо большое. Красивый. Вопрос. Как понял стоит две ссылки:
первая стоит на малой фото - вызывает увеличенную фотографию,
вторая стоит на увеличенной фото - возможно подключения необходимого адреса.
Если правильно понял, подтвердите, а если ошибаюсь, то как сделать ссылку на нужный адрес уже с увеличенной фотографии.
Спасибо
Сообщение №4 от Олег
Добавлен: 09.11.2013

Пожалуйста Александр.
А вот вопроса вашего вообще не понял.
Сообщение №5 от Александр
Добавлен: 09.11.2013

Есть демо-фото в фотоальбоме, вашим скриптом увеличиваем фото. На примере увеличенное фото имеет ссылку (для последующего возможного перехода) или мне показалось?
Просто по технологии мне необходимо на сайте разместить фото (или рисунки), далее по ссылке (Ваша подходит на все 100!) открывается другая фотография (картинка), тут все замечательно. Но с нее то мне и нужен переход на указанный адрес сайта. Конкретно, подключение ссылки с открывающемуся рисунку или фото для последующего перехода.
Сообщение №2 от Sid111
Добавлен: 23.04.2013

А можно ли сделать 2 всплывающих картинки, одна под другой?
1-6 7-7
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Шерлок Холмс никогда не говорил : "Это элементарно, Ватсон."


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

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

Друзья сайта