Прозрачный аватар (или аватар с подсветкой)

Поделиться1Вт, 11 Май 2010 21:25:27

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2704
Уважение: +4065
Позитив: +2371
Пол: Мужской
Последний визит:
Пн, 6 Май 2024 23:38:34

Эту фишку увидел на одном IPBшном форуме

аватары на форуме имеют прозрачность, которая исчезает при наведении курсора

давольно таки легко реализовывается

в html-верх:

<style type="text/css">
.post-author ul li.pa-avatar img{opacity:0.4; filter:alpha(opacity=40);}
.post-author ul li.pa-avatar img:hover {opacity:1; filter:alpha(opacity=100);}
</style>

красным выделена степень прозрачности аватара - 0.4 для Оперы, Мозиллы и т.д. (от 0.1 до 1)
и 40 для IE (от 10 до 100)

хотя у меня IE упорно отказывается работать с прозрачностью

ПРИМЕР

+4

Instagram drumman.1

Поделиться2Вт, 11 Май 2010 21:37:57

Автор: Taira
Заслуженный
Зарегистрирован: Ср, 5 Авг 2009
Сообщений: 46
Уважение: +4
Позитив: +2
Последний визит:
Ср, 13 Апр 2011 11:31:12

забавный скрипт.)
особенно хорошо подходит для темных форумов мистической тематики (где обязательно какой-то умник втычет себе яркую аву т.Т)

заранее извиняюсь за несоблюдение правил, но возможно ли сделать подобную подсветку для всех изображений на форуме? вроде бы, где-то видел такую штуку.

0

Поделиться3Вт, 11 Май 2010 21:38:19

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

Taira
Это не скрипт ><

0

Поделиться4Вт, 11 Май 2010 21:40:58

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

Taira

<style type="text/css">
img {opacity:0.4; filter:alpha(opacity=40);}
img:hover {opacity:1; filter:alpha(opacity=100);}
</style>

Проверяйте.

0

Поделиться5Вт, 11 Май 2010 21:51:03

Автор: Taira
Заслуженный
Зарегистрирован: Ср, 5 Авг 2009
Сообщений: 46
Уважение: +4
Позитив: +2
Последний визит:
Ср, 13 Апр 2011 11:31:12

FeroDaR
работает, спасибо.

0

Поделиться6Вт, 11 Май 2010 22:07:56

Автор: АЛЬБ
Cтарожил
Зарегистрирован: Ср, 31 Окт 2007
Сообщений: 3178
Уважение: +445
Позитив: +206
Пол: Мужской
Последний визит:
Вс, 4 Дек 2011 20:01:22

FeroDaR написал(а):

Проверяйте.

Taira написал(а):

FeroDaRработает, спасибо.

:rofl: работает.. но как!?

FeroDaR написал(а):

img

не умничай.. я валенок в скриптах и кодах и то знаю что это такое!! ты поставь и посмотри всю графику на форуме..

0

Поделиться7Вт, 11 Май 2010 22:14:16

Автор: Taira
Заслуженный
Зарегистрирован: Ср, 5 Авг 2009
Сообщений: 46
Уважение: +4
Позитив: +2
Последний визит:
Ср, 13 Апр 2011 11:31:12

АЛЬБ написал(а):

ты поставь и посмотри всю графику на форуме..

все отлично с остальной графикой. эффект тот, которого я и хотел.)

0

Поделиться8Вт, 11 Май 2010 22:14:25

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

АЛЬБ
Что всё по правилам работает... Прозрачность же можно регулировать... Есть честно я не понял проблемы...

0

Поделиться9Вт, 11 Май 2010 22:17:57

Автор: mkusher
Не rocket science
Зарегистрирован: Ср, 19 Мар 2008
Сообщений: 821
Уважение: +1000
Позитив: +706
Пол: Мужской
Последний визит:
Вт, 7 Янв 2020 15:14:17

мм, лучше так

<style type="text/css">.post-author ul li.pa-avatar img {filter:alpha(opacity=20);
opacity: 0.2;
-moz-opacity: 0.2;
-khtml-opacity: 0.2;}
.post-author ul li.pa-avatar img:hover {filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;}
</style>

Отредактировано mkusher (Вт, 11 Май 2010 22:18:26)

+1

Поделиться10Вт, 11 Май 2010 22:23:54

Автор: АЛЬБ
Cтарожил
Зарегистрирован: Ср, 31 Окт 2007
Сообщений: 3178
Уважение: +445
Позитив: +206
Пол: Мужской
Последний визит:
Вс, 4 Дек 2011 20:01:22

FeroDaR написал(а):

Есть честно я не понял проблемы...

у меня шапка например тоже такая же как и авики.. дальше я не стал смотреть..
проверил.. вся графика на форуме такая!!

Отредактировано АЛЬБ (Вт, 11 Май 2010 22:25:57)

0

Поделиться11Вт, 11 Май 2010 22:25:26

Автор: mkusher
Не rocket science
Зарегистрирован: Ср, 19 Мар 2008
Сообщений: 821
Уважение: +1000
Позитив: +706
Пол: Мужской
Последний визит:
Вт, 7 Янв 2020 15:14:17

АЛЬБ написал(а):

у меня шапка например тоже такая же как и авики.. дальше я не стал смотреть

ну все что в теге img есть в документе будет и реклама по идее тоже )

0

Поделиться12Вт, 11 Май 2010 22:26:30

Автор: АЛЬБ
Cтарожил
Зарегистрирован: Ср, 31 Окт 2007
Сообщений: 3178
Уважение: +445
Позитив: +206
Пол: Мужской
Последний визит:
Вс, 4 Дек 2011 20:01:22

mkusher написал(а):

и реклама по идее тоже )

и она!!

0

Поделиться13Вт, 11 Май 2010 23:39:16

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

Сделал штуку, которое делает прозрачность к элементам с классом реф

<style type="text/css">
.ref {filter:alpha(opacity=20);
opacity: 0.2;
-moz-opacity: 0.2;
-khtml-opacity: 0.2;}
.ref:hover {filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;}
</style>

Нет... эта штука не делает всё таким. А делает только тем изображениям у которых класс "ref"

Вот к примеру вы вставьте картинку кодом:

<img src="картинка">

Нету эффекта...А теперь берём и делаем так: Код:

<img src="картинка" class="ref">

Эффект есть!

Можете сравнить в обьявление... там картинка с классом и без. http://tests.poinet.ru/

Отредактировано FeroDaR (Вт, 11 Май 2010 23:41:47)

0

Поделиться14Вт, 11 Май 2010 23:47:55

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

Если постах:

HTML-верх:

<style type="text/css">
.ref {filter:alpha(opacity=20);
opacity: 0.2;
-moz-opacity: 0.2;
-khtml-opacity: 0.2;}
.ref:hover {filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;}
</style>

ХТМЛ-низ:

<script>
function addSpoiler(str,from,internal){
var pos=0,pos2=0,newpos=0
if((pos=str.indexOf("[opti",from))==-1) return str;
if((pos2=str.indexOf("[/opti]"),pos+6)==-1) return str;
newpos=str.indexOf("[opti]",pos+6)
if(newpos<pos2 && newpos!=-1) str=addSpoiler(str,pos+6,true)
if((pos2=str.indexOf("[/opti]",pos+6))==-1) return str;
str=str.substring(0,pos)+makeSpoiler(str.substring(pos+6,pos2))+str.substring(pos2+7,str.length)
if( str.indexOf("[opti]")!=-1 && internal==false) str=addSpoiler(str,0,false)
return str}
function makeSpoiler(txt){
txt='<img src="'+txt+'" class="ref">'
return txt}
if(document.URL.indexOf("viewtopic.php")!=-1){
elm=document.getElementById("pun-main").getElementsByTagName("div")
for(x in elm) if(elm[x].className=="post-content"){
var post=elm[x]
post.innerHTML=addSpoiler(post.innerHTML,0,false)}}
</script>

Тэги: [opti]ссылка на кратинку[/opti]

Пример: http://tests.poinet.ru/viewtopic.php?id=3

Отредактировано FeroDaR (Ср, 12 Май 2010 17:29:47)

0

Поделиться15Ср, 12 Май 2010 01:04:12

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2704
Уважение: +4065
Позитив: +2371
Пол: Мужской
Последний визит:
Пн, 6 Май 2024 23:38:34

фига се тут дебаты развернулись )))

mkusher написал(а):

мм, лучше так

<style type="text/css">.post-author ul li.pa-avatar img {filter:alpha(opacity=20);
opacity: 0.2;
-moz-opacity: 0.2;
-khtml-opacity: 0.2;}
.post-author ul li.pa-avatar img:hover {filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;}
</style>

я думал об таком варианте, но -moz-opacity для старых версий Мозиллы, а -khtml-opacity для старых версий Сафари, я посчитал, что уже не актуально,
а с другой стороны не помешает, кашу маслом не испортишь

FeroDaR написал(а):

Сделал штуку, которое делает прозрачность к элементам с классом

то что обратил внимание на классы молодец, в верном направлении мыслишь

FeroDaR написал(а):

Если постах:

если нужно все изображения в постах сделать с таким свойством, то можно ещё проще

<style type="text/css">
.postimg {filter:alpha(opacity=40); -moz-opacity: 0.4; -khtml-opacity: 0.4; opacity: 0.4;}
.postimg:hover {filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;}
</style>

поскольку все изображения в постах имеют класс .postimg

а если же есть желание создать отдельный класс с таким родом свойств, то и в скрипте твоём можно уже задать эти параметры

вместо