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

Главная » Файлы » Скрипты для Юкоз | Новые скрипты для Юкоз | Скрипты на Юкоз

Интересный скрипт работает на 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>

Ваша оценка:

Рейтинг: 3.0 Всего:4 Добавил: Михалыч

« Назад

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:

Комментарии

Всего комментариев: 0