| Kosten | Вторник, 23 Мая 2017 | Сообщение 1 |
| Мы уже привыкли, что видя изображение мы делаем по нему клик и оно увеличивается. А вот как к примеру вы сделаете в надписи или в строке, поставите картинку, то будет не красиво и криво. И здесь нам пригодиться эти стили, которые могут сделать все очень шикарно при написание или просто где то поставить и написать рядом, можете посмотреть и вам только надо навести. Пропишу сразу два 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, все отлично, есть свой профиль и в нем все что ты загрузил, не одной еще не пропало, но не заметил, а им пользуюсь долго.
| | Страна: (RU) |
| |
| Kolinkor | Вторник, 23 Мая 2017 | Сообщение 2 |
| Самый не нужный скрипт и не вижу его применение.
| | Страна: (RU) |
| |
| Scheme | Вторник, 23 Мая 2017 | Сообщение 3 |
| Цитата Brung (  ) Самый не нужный скрипт и не вижу его применение.
Кому как, кто то в описание ставит и удобно.
| | Страна: (RU) |
| |
| Kosten | Вторник, 30 Мая 2017 | Сообщение 4 |
|
| Цитата Brung ( ) Самый не нужный скрипт и не вижу его применение.
Можно в описание поставить, ставят же ссылки, на переход, а если по теме, то очень удобно будет.
| | Страна: (RU) |
| |
| trem200 | Среда, 31 Мая 2017 | Сообщение 5 |
| Довольно интересный скрипт, вот пытаюсь в информере фотографий его сделать.
| | Страна: (RU) |
| |
