[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Всплывающая картинка при наведении на ссылку или на картинку
offtop
Дата: Воскресенье, 19.05.2013, 08:51 | Сообщение # 1
Оффлайн
Пользователи
Сообщений: 216
IP: Скрытная информация


Интересный скрипт работает на css. При наведении на ссылку (картинку) появляется картинка. Очень удобно делать к примеру в блок друзья при наведении на ссылку будет виден скриншот сайта но он не обновляется т.е. только та картинка которую поставите.
CSS стиль я немного переделал под себя.
в 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: #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 */   
   }   
   /*---------------------*/


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


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

Код
<a class="thumbnail" href="#"><img src="ссылка на рисунок" width="100px" height="66px" border="0" /><span><img src="ссылка на рисунок" />Ваш текст</span></a>


_
Прикрепления: 6176909.png (423.4 Kb)
  • Страница 1 из 1
  • 1
Поиск: