Нужен JS (эффект "затухания" для IMG)

Тема в разделе "Веб-дизайн", создана пользователем basct, 24 мар 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. basct

    basct Постоялец

    Регистр.:
    13 июн 2008
    Сообщения:
    101
    Симпатии:
    46
    Уважаемые товарищи! Помогите разыскать js скриптик! Необходимо добиться эффекта "загорания-затухания" при наведении на изображения.
    (Загорание - при наведении курсора, а затухание - когда убираешь)
    Самым наглядный пример чего хочу, - в AIMP (в базовых скинах) используется такая фича, во всех (почти) значках управления.
    Главный момент: нужно что бы эффект загорания был "резкий", а "затухания" плавный. Ну в общем всё как в AIMP'e.
     
  2. мир

    мир Постоялец

    Регистр.:
    15 мар 2008
    Сообщения:
    83
    Симпатии:
    5
    есть вот такая статья...
    А если при наведении мышки на кнопку та изменилась, то продолжим:
    начало JavaScript`а внутри странички обозначается примерно как:

    <SCRIPT language=JavaScript1.2>
    (это обозначает начало скрипта и версию команд, на которых он построен)

    Теперь сам скрипт:

    function high(which2)
    это название функции и процедура (то, что ниже:(

    {стандартно - открытие последовательности параметров. theobject=which2 //
    назначен объектwhich2

    highlighting=setInterval("highlightit(theobject)",50)
    "освещение"=НазначитьИнтервал("подсветить(объект)",50)
    - "50" - это, собственно, сама величина интервала.
    ее можно поменять на иное значение - увидите изменения в работе скрипта.

    .. и закрытие последовательности параметров:
    }

    функция "бледности"
    function low(which2)
    {
    сие толкуем примерно как:

    clearInterval(highlighting)
    очистка интервала("освещения")

    which2.filters.alpha.opacity=20
    "имярёк2.Фильтруем.Альфа.засвеченность=20"
    }

    Функция яркости (фиг его знает что)
    function highlightit(cur2)

    {

    if (cur2.filters.alpha.opacity<100)
    если (фиг его знает что фильтрует яркость меньше 100 единиц)

    cur2.filters.alpha.opacity+=20
    (к фиг его знает чему фильтровать на +20 сильнее)

    else if (window.highlighting)
    если не так, то (запускаем освещабельность)

    clearInterval(highlighting)
    очищаем интервал (освещабельности)

    }
    </SCRIPT>
    (кАнЭц скрЫпта)

    примерно так.
    теперь... рассмотрим обращение к скрипту с объекта его приложения:

    как известно, картинку мы указываем как

    <img onMouseOver=high(this) style="FILTER: alpha(opacity=25)" onMouseOut=low(this) height=31 alt="надпись" width=88 border=0 src="путь к картинке.gif">

    Читается это так:
    <img - начало картинки.

    onmouseover=high(this)
    при наведении мышки - включить нашу функцию high (см. первый абзац скрипта)

    style="FILTER: alpha(opacity=25)
    стиль отображения картинки - фильтр прозрачности - 25% непрозрачности (из 100)

    onmouseout=low(this)
    как только курсор съедет с территории картинки - исполнить функцЫю low (найди в скрипте сам).

    src="/N/srez88x31b.gif"
    ну - это, собсно, та самая картинка,
    где src расшифровываеЦЦа как сокращение от английского source
    и в кавычках опосля знака "=" - тривиальный путь к картинке.

    width="83" height="31" -
    размеры картинки.

    Если их не задать она будет отражена в масштабе 1:1, если задать не такими, как родные размеры картинки, получим искажение.

    alt="любой текст, который будет виден, если картинка не загрузится"

    ну и закрытие тега картинки в виде непременного: >

    для тех, кто в танке:
    впендюриваем это

    <SCRIPT language=JavaScript1.2>
    function high(which2){
    theobject=which2
    highlighting=setInterval("highlightit(theobject)",50)
    }
    function low(which2){
    clearInterval(highlighting)
    which2.filters.alpha.opacity=20
    }
    function highlightit(cur2){
    if (cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=20
    else if (window.highlighting)
    clearInterval(highlighting)
    }
    </SCRIPT>в самое начало паги прямо под тег </head>

    затем берем это

    <IMG onmouseover=high(this) style="FILTER: alpha(opacity=25)" onmouseout=low(this) src="/NAVI/foox88x31.gif" width="83" height="31" alt="мАя кЫнопкА :0)">

    и впендюриваем на то место паги, где должна быть кнопка, промеж тегов
    <body>


    </body>

    где планируем нашу картинку.

    возможные глюки:

    перекосило картинку:
    размеры ты указал неправильно (если картинку иную попробуешь запихать)

    картинка не отображается вообще
    путь к ней не верен - убедись, что страничка со скриптом в одной директории с картинкой и проверь, правильно ли названа картинка. Если ты напишешь ее как pict.JPG - это не значит что она прочтется как pict.jpg!

    удач в нелегком опыте :0)

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

    <SCRIPT language=JavaScript1.1 src="menu.js"> </SCRIPT>
     
  3. fastdeath

    fastdeath Создатель

    Регистр.:
    26 апр 2009
    Сообщения:
    15
    Симпатии:
    14
    Спасибо , помогло , но,конечно не совсем то!
     
  4. Emporio

    Emporio Постоялец

    Регистр.:
    17 апр 2009
    Сообщения:
    63
    Симпатии:
    4
    Можно через CSS, и место меньше занимает, и можно сразу несколько картинок сделать такими

    CSS
    Код:
    #banners a img {
    
    opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
    
    }
    
    
    
    #banners a:hover img {
    
    opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
    
    }
    
    вот и всё, теперь, если нужно применить это к изображению, то заключаем его в тег:

    Код:
    [B]<div id="banners">[/B]
    
    Картинка с сылкой (банер)
    
    [B]</div>[/B]
     
  5. PHP_Master

    PHP_Master

    Регистр.:
    3 фев 2008
    Сообщения:
    2.647
    Симпатии:
    590
    Так ему ж с выпендрёжем нужно, а твой способ просто меняет прозрачность.
    ТС, кури фрэймворки типа jquery и mootools. Там эффектам можно задавать время.
     
  6. blacks

    blacks

    Регистр.:
    26 сен 2008
    Сообщения:
    391
    Симпатии:
    24
    "Добавлю свои 5к"
    Вот ссылочка, все просто и лекго рассписано:
    http://www.tigir.com/opacity.htm
     
  7. sugarcoma

    sugarcoma Создатель

    Регистр.:
    28 янв 2008
    Сообщения:
    38
    Симпатии:
    26
    также советую ознакомиться _http://www.webreview.org.ua/?id=3&action=article_detail&ar_id=24 есть пару инетересных способов реализации данного эффекта и обратного ему
     
Статус темы:
Закрыта.