Страница 1 из 11
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Появление изображение при наведении на ссылку
Появление изображение при наведении на ссылку
Kosten
Дата: Вторник, 23.05.2017, 14:10 | Сообщение # 1
Администраторы
Сообщений:15011
Награды: 49


Мы уже привыкли, что видя изображение мы делаем по нему клик и оно увеличивается. А вот как к примеру вы сделаете в надписи или в строке, поставите картинку, то будет не красиво и криво. И здесь нам пригодиться эти стили, которые могут сделать все очень шикарно при написание или просто где то поставить и написать рядом, можете посмотреть и вам только надо навести. Пропишу сразу два CSS, по факту они почти одинаковы, но чтоб вам понятней было.



Первый:

В CSS ставим стили и можно в самый низ

Код
.thumbnail{  
  position: relative;  
  z-index: 50;  
  }  
  .thumbnail:hover{  
  background-color: transparent;  
  z-index: 150;  
  }  
  .thumbnail span{  
  position: absolute;  
  background-color: #0064af;  
  padding: 2px;  
  left: 10px;  
  border: 0px solid white;  
  visibility: hidden;  
  color: Yellow;  
  text-decoration: none;  
  border-radius: 0px 0px 0px 0px;  
  -moz-border-radius: 0px 0px 0px 0px;  
  -webkit-border-radius: 0px 0px 0px 0px;  
  }  
  .thumbnail span img{  
  border-width: 0;  
  padding: 2px;  
  }  
  .thumbnail:hover span{  
  visibility: visible;  
  top: 0;  
  left: 15px;  
  }


И вот сам код, который привязан к ним.

Код
<a class="thumbnail" href="$ENTRY_URL$">$TITLE$<span><img src="$IMG_URL1$" height ="200" width="500"/></span></a>


Теперь давайте рассмотрим второй вариант.



Здесь все также создано на чистых стилях и в 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>


Как видите они почти одинаковые, но просто первый сделан так, что вид материала модуля можно установить, да применение много найти по этим эффектам найти.

Комментарий на этот скрипт:

1. Знал эту фишку еще раньше и на многих сайтах ее видел. А что на счет вид материала, то вот как некоторые делали, и что главное не каких файлов, а чистый CSS, что реально порадовало.

2. Это уже старый код, говорю про второй, он давно в паблике, а первый не отличается от второго, только стили по другому настроены.

3. Картинку свою поставил, правильно, нужно оригинально а не как у всех. Коды эти правильно говорите старые, но они актуальные и их применяют очень много где на сайтах.

4. Сейчас второй код проверил, не чего быстро выскакивает изображение. Первый пока не проверял, хочу на вид материала его проверить, должен отлично влиться.

5. А это отличная идея в описание вставлять, к примеру, вот так и сы можете посмотреть как у вас будет и "будут" в этом слове картинка, по мне все отлично впишется и поисковики думаю быстро найдут.

6. Всегда такие коды рабочие пригодятся, если одному не нужно, это не факт, что он всем не нравиться.

7. Когда рабочие ссылки и сделан скрипт отлично, он всегда будет нужен.

8. Могу по пальцем перещелкать, где точно нет битых ссылок, но спамить не буду, да из вообще мало. Скопируют и дело в шляпе, даже пару слов от себя не напишут.

9. Это просто от незнание они оставляют ссылки, не зная, что будет с тем ресурсом завтра, может его снесут или папку уберут, где она находиться и от этого битые.

10. Раньше как помню хостинг радикал был и вот как видишь скрипт, если одна рабочая ссылка, это не означает, что остальные такие же.

11. Да, был такой и есть наверное, самый популярный был, но только не сейчас. Вообще иногда пользуюсь этим хостингом prnt.sc, все отлично, есть свой профиль и в нем все что ты загрузил, не одной еще не пропало, но не заметил, а им пользуюсь долго.
Прикрепления: 3888205.jpg(27Kb) · 7259850.jpg(58Kb)
Страна: (RU)
Kolinkor
Дата: Вторник, 23.05.2017, 14:26 | Сообщение # 2
Vip
Сообщений:302
Награды: 1


Самый не нужный скрипт и не вижу его применение.
Страна: (RU)
Scheme
Дата: Вторник, 23.05.2017, 14:31 | Сообщение # 3
Пользователи
Сообщений:157
Награды: 1


Цитата Brung ()
Самый не нужный скрипт и не вижу его применение.

Кому как, кто то в описание ставит и удобно.
Страна: (RU)
Kosten
Дата: Вторник, 30.05.2017, 23:35 | Сообщение # 4
Администраторы
Сообщений:15011
Награды: 49


Цитата Brung ()
Самый не нужный скрипт и не вижу его применение.

Можно в описание поставить, ставят же ссылки, на переход, а если по теме, то очень удобно будет.
Страна: (RU)
trem200
Дата: Среда, 31.05.2017, 11:40 | Сообщение # 5
Проверенные
Сообщений:374
Награды: 3


Довольно интересный скрипт, вот пытаюсь в информере фотографий его сделать.
Страна: (RU)
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Появление изображение при наведении на ссылку
Страница 1 из 11
Поиск: