Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

эффект затемнения картинки (dimn)
Author Message
dimn
Заглянувший



Joined: 20 Dec 2007
Posts: 6
Карма: 0
   поощрить/наказать


PostPosted: Fri Dec 21, 2007 11:36 pm (написано за 1 минуту 36 секунд)
   Post subject: эффект затемнения картинки
Reply with quote

Вот тут js.aceweb.ru/javascript/5/1/js.html есть интересный скрипт Image Fade Effect, выполняющий эффект затемнения картинки. При наведении курсора на картинку она постепенно приобретает нормальный вид.
Но, к сожалению, в опере и firefox не работает. Может у кого есть решение для всех браузеров?
Спасибо!
Back to top
View user's profile Send private message
dimagolov
Участник форума



Joined: 04 Feb 2007
Posts: 1664
Карма: 96
   поощрить/наказать

Location: Christ Church, Barbados

PostPosted: Sat Dec 22, 2007 12:19 am (спустя 42 минуты; написано за 59 секунд)
   Post subject:
Reply with quote

не смотрел, но я бы делал такое через opacity. для него есть аналог в FF/Opera который чуть отличается, но крос-броузерность достигается одной строчкой.
Back to top
View user's profile Send private message
dimn
Заглянувший



Joined: 20 Dec 2007
Posts: 6
Карма: 0
   поощрить/наказать


PostPosted: Sat Dec 22, 2007 10:12 am (спустя 9 часов 53 минуты; написано за 9 секунд)
   Post subject:
Reply with quote

а можно подробнее?
Back to top
View user's profile Send private message
Валенок
Участник форума



Joined: 06 Apr 2006
Posts: 520
Карма: -3
   поощрить/наказать


PostPosted: Sat Dec 22, 2007 6:08 pm (спустя 7 часов 55 минут; написано за 16 секунд)
   Post subject:
Reply with quote

dimagolov по-моему (особо не влезал) там это делается через
Code (JavaScript): скопировать код в буфер обмена
element.style.color
Back to top
View user's profile Send private message
dimagolov
Участник форума



Joined: 04 Feb 2007
Posts: 1664
Карма: 96
   поощрить/наказать

Location: Christ Church, Barbados

PostPosted: Sat Dec 22, 2007 7:22 pm (спустя 1 час 13 минут; написано за 2 минуты 25 секунд)
   Post subject:
Reply with quote

Валенок wrote:
dimagolov по-моему (особо не влезал) там это делается через
Code (JavaScript): скопировать код в буфер обмена
element.style.color
ну тогда надо IE обращение currentStyle менять (дополнять то есть) на getComputedStyle

хотя.... как это можно к картинке применить? по-моему только можно наложить прозрачный фильтр поверх нее и менять прозрачность
Back to top
View user's profile Send private message
Vizlim
Участник форума



Joined: 24 Sep 2007
Posts: 102
Карма: 16
   поощрить/наказать

Location: Киев

PostPosted: Sat Dec 22, 2007 9:00 pm (спустя 1 час 37 минут; написано за 2 минуты 9 секунд)
   Post subject:
Reply with quote

Вот весь исходник... (хотя исходник больше... но вначале идёт мусор(лишний код), к которому даже нет обращения...)
Code (JavaScript): скопировать код в буфер обмена
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
        if (object != "[object]"){  //do this so I can take a string too
                setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
                return;}

            clearTimeout(nereidFadeTimers[object.sourceIndex]);
            diff = destOp-object.filters.alpha.opacity;
            direction = 1;
            if (object.filters.alpha.opacity > destOp){
            direction = -1;}

            delta=Math.min(direction*diff,delta);
            object.filters.alpha.opacity+=direction*delta;
            if (object.filters.alpha.opacity != destOp){
            nereidFadeObjects[object.sourceIndex]=object;
            nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);}}
<IMG onmouseover=nereidFade(this,100,30,10) style="FILTER: alpha(opacity=30)" onmouseout=nereidFade(this,30,50,5) height=31 alt="" src="ace.gif" width=88 vspace=2 border=0></A>

действительно используется opacity...

brainerror.net/scripts/javascript/blendtrans/ -- Cross-browser BlendTrans Filter
www.javascriptkit.com/dhtmltutors/opacityns6.shtml -- Manipulating image opacity in Firefox
Back to top
View user's profile Send private message
dimagolov
Участник форума



Joined: 04 Feb 2007
Posts: 1664
Карма: 96
   поощрить/наказать

Location: Christ Church, Barbados

PostPosted: Sat Dec 22, 2007 9:51 pm (спустя 51 минуту; написано за 1 минуту 7 секунд)
   Post subject:
Reply with quote

вместо
style="FILTER: alpha(opacity=30)"
нужно
style="FILTER: alpha(opacity=30); opacity: 0.3;"

ну и в коде аналогично, только через object.style.opacity
Back to top
View user's profile Send private message
Guest






Карма: 388
   поощрить/наказать


PostPosted: Sun Nov 30, 2008 11:24 pm (спустя 11 месяцев 8 дней 1 час 32 минуты; написано за 44 секунды)
   Post subject:
Reply with quote

dimagolov, можно, плз, подробнее, что на что нужно заменить в скрипте?
Back to top
Тот же гость
Guest





Карма: 388
   поощрить/наказать


PostPosted: Sun Dec 28, 2008 10:35 pm (спустя 27 дней 23 часа 11 минут; написано за 20 секунд)
   Post subject:
Reply with quote

Так никто не знает как?
Back to top
Vizlim
Участник форума



Joined: 24 Sep 2007
Posts: 102
Карма: 16
   поощрить/наказать

Location: Киев

PostPosted: Sat Jan 03, 2009 11:29 am (спустя 5 дней 12 часов 53 минуты; написано за 8 минут 54 секунды)
   Post subject:
Reply with quote

Тот же гость wrote:
Так никто не знает как?
Я вернулся =) И я знаю... скрипт был написан только для браузера IE (Internet Explorer)... в других он и не должен был работать... по нескольким причинам (причины назову ниже)
Для начала... скрипт тот был вынут из ссылки в первом посте на скрипт... Проверял сегодня в IE beta 2... не работает, пишет ошибку...
Если за комментировать этот код:
Code (JavaScript): скопировать код в буфер обмена
if (object != "[object]"){  //do this so I can take a string too
                setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
                return;}
, то он будет работать под IE...
dimagolov wrote:
style="FILTER: alpha(opacity=30); opacity: 0.3;"
ну и в коде аналогично, только через object.style.opacity
Для справки это всё очередной туфта...
1. В скрипте идёт строчка
Code (JavaScript): скопировать код в буфер обмена
if (!document.all)
return
Говорит о том что дальнейшее выполнение этой функции не возможно для браузеров не IE...
2. В IE opacity принимает значение от 0 до 100... в других браузерах от 0 до 1
3. object.sourceIndex - такой атрибут существует только у IE... в других браузерах его нет... Он определяет номер тега...


Вот рабочий кроссбраузерный скрипт (Работает во всех современных браузерах, а это IE beta 8, Opera 9.6, Firefox 3.0.5, Google chrome):
Code (JavaScript): скопировать код в буфер обмена
<html>
<head>
<title> </title>
<script>
var nereidFadeObjects = new Object();
var nereidFadeTimers = new Object();
var opacitiz=0

//
window.onload=function() {
  var e=document.getElementsByTagName('*')
  for (var i=0,l=e.length;i<l;i++) e[i].sourceIndex=i
}

//
//
//
function KrossBrows(object,num) {
        if (num==1)
                if (!document.all) nereidFade(object, 1,30,0.1);
                else nereidFade(object, 100,30,10);
        else
                if (!document.all) nereidFade(object, 0.3,50,0.05);
                else nereidFade(object, 30,50,5);
}

//
//
//
//
//
function nereidFade(object, destOp, rate, delta){
        if (!document.all) opacitiz=object.style.opacity;
        else opacitiz=object.filters.alpha.opacity;
       
        clearTimeout(nereidFadeTimers[object.sourceIndex]);
        diff = destOp-opacitiz;
        direction = 1;
        if (opacitiz > destOp) direction = -1;

        delta=Math.min(direction*diff,delta);
        if (!document.all) object.style.opacity=parseFloat(object.style.opacity)+(direction*delta);
        else object.filters.alpha.opacity+=direction*delta;

        if (opacitiz != destOp){
                nereidFadeObjects[object.sourceIndex]=object;
                nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
        }
}
</script>
</head>
<body>
<IMG onmouseover="KrossBrows(this,1)" style="FILTER: alpha(opacity=30);opacity:0.3" onmouseout="KrossBrows(this,0)" height=31 alt="" src="ace.gif" width=88 vspace=2 border=0></A>
<IMG onmouseover="KrossBrows(this,1)" style="FILTER: alpha(opacity=30);opacity:0.3" onmouseout="KrossBrows(this,0)" height=31 alt="" src="ace.gif" width=88 vspace=2 border=0></A>
</body>
</html>
Back to top
View user's profile Send private message
Anton Diaz (тот же гость)
Guest





Карма: 388
   поощрить/наказать


PostPosted: Mon Jan 12, 2009 10:14 pm (спустя 9 дней 10 часов 45 минут; написано за 1 минуту 43 секунды)
   Post subject:
Reply with quote

Проверил, работает на всех браузерах, что у меня есть:
Opera 9.62
Google Chrome 1.0.154.36
Internet Explorer 7.0.5730.11
Firefox 2.0.0.20

Супер. Спасибо)))
Back to top
Adid
Guest





Карма: 388
   поощрить/наказать


PostPosted: Fri Mar 20, 2009 6:04 am (спустя 2 месяца 7 дней 7 часов 49 минут; написано за 3 минуты 22 секунды)
   Post subject:
Reply with quote

Vizlim, огромное спасибо. Правда мой Эксплорер выдает все время ошибку сценария на 14-ой строке...
Уже все глаза переглядел не могу найти чего ж ему там не нравится.


У самого ещё более гениальная идея, хочу что бы пока картинка без наведения на неё мышкой, была мало того что бы прозрачной и "потухшей", так ещё и ч/б.
а при наведении плавненько становилась ярче и цветнее.
Догадываюсь, что нужно либо ещё один скрипт писать, либо в этот чего нибудь да впиндюрить..
Ведь существует же фильтр
Quote:
<img src="1.jpg" border=0 style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)" onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'">
Если поможете всё водино сплести, буду очень благодарен.
Заранее спасибо.
Back to top
sataval
Guest





Карма: 388
   поощрить/наказать


PostPosted: Sat Apr 18, 2009 2:53 pm (спустя 29 дней 8 часов 49 минут; написано за 28 секунд)
   Post subject:
Reply with quote

Спасибо большое! очень пригодился скрипт!!)))))
Back to top
ColloS
Guest





Карма: 388
   поощрить/наказать


PostPosted: Thu Jul 23, 2009 6:09 pm (спустя 3 месяца 5 дней 3 часа 15 минут; написано за 9 минут 37 секунд)
   Post subject:
Reply with quote

window.onload=function() {
  var e=document.getElementsByTagName('*')
  for (var i=0,l=e.length;i<l;i++) e[i].sourceIndex=i




Удалите [i] и проблемы с ошибкой исчезнут
Back to top
dimagolov
Участник форума



Joined: 04 Feb 2007
Posts: 1664
Карма: 96
   поощрить/наказать

Location: Christ Church, Barbados

PostPosted: Thu Jul 23, 2009 8:34 pm (спустя 2 часа 25 минут; написано за 14 секунд)
   Post subject:
Reply with quote

ColloS, это-то тут при чем?
Back to top
View user's profile Send private message
Guest






Карма: 388
   поощрить/наказать


PostPosted: Wed Jul 29, 2009 4:31 pm (спустя 5 дней 19 часов 56 минут; написано за 1 минуту 38 секунд)
   Post subject:
Reply with quote

На самом деле свойство sourceIndex в IE только для чтения, но к счастью, оно и так хратит правильные значения, т.е. надо делать только для не-IE браузеров.
Нужно исправить window.onload:
Quote:
//Функция предназначена для нумерации тегов
window.onload=function() {
    var e=document.getElementsByTagName('*');
    if(e[1].sourceIndex==undefined) {
        for (var i=0,len=e.length;i<len;i++) e[i].sourceIndex=i;
    }
}
Back to top
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Page 1 of 1    Email to a Friend.
You cannot post new topics in this forum. You cannot reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML