JavaScript: Увеличение насыщенности

09-16-2007, 06:34 PM

Доброго времени суток.
Есть одна проблема, которая нуждается в решении и дальнейшей реализации посредством JavaScript'ов.
Требуется сделать на форуме очень интересный визуальный эффект: постепенное увеличение насыщенности. То есть при наведении указателя мыши на логотип, начинает увеличиваться насыщенность (из чёрно-белого в RGB). Как это сделать?
Крайне желательны подробные описания каждых шагов действий + всех прикрепляемых / загружаемых файлов + вставляемый / редактируемый код.

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

09-16-2007, 08:40 PM

Quote:

Требуется сделать на форуме очень интересный визуальный эффект: постепенное увеличение насыщенности.

Эээ... в голову приходит только постепенное увеличение прозрачности.

09-16-2007, 09:09 PM

Quote:

Originally Posted by kirbak

Эээ... в голову приходит только постепенное увеличение прозрачности.

Ну 'opacity'...Ну давайте попробуем. 'Opacity'
Есть кусок кода для получения того самого эффекта:

HTML Code:

<html>
<head>
<!-- Устанавливаем изначальную прозрачность картинок -->
<style type="text/css">
  img {
    filter:alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
  }
</style>

<!-- Подключаем библиотеку -->
<script type="text/javascript" src="/js/opacity.js"></script>

<script type="text/javascript">
// Создаем правило изменения прозрачности: задаем имя правила, начальную и конечную прозрачность, а также необязательный параметр задержки влияющий на скорость смены прозрачности
  fadeOpacity.addRule('oR1', .3, 1, 30);
</script>

</head>
<body>

<img id="fImg1" onMouseOver="fadeOpacity(this.id, 'oR1')"  onmouseout="fadeOpacity.back(this.id)" src="/forum/images/oumar_headerL.gif" width="471" height="204" />

Вот код 'header' из самого стиля.

PHP Code:


			
<!-- logo -->

<a name="top"></a>

<table width="100%"  border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td class="headerwrap"><table width="100%"  border="0" cellspacing="0" cellpadding="0">

      <tr>



<td class="headerL"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="images/oumar/spacer.gif" alt="$vboptions[bbtitle]" width="471" height="204" border="0"></a></td>



        <td valign="top" class="headerR"><table width="100%"  border="0" cellspacing="0" cellpadding="0">

           </td>

          </tr>

        </table></td>

      </tr>

    </table></td>

  </tr>

  <tr>

    <td class="cwrap">

<!-- /logo -->

<!-- content table -->

$spacer_open



$_phpinclude_output

Сама картинка oumar_headerL.gif
Действие: Вставляю код из первой части в 'header'.
Эффект: При изменении стиля -- все изображения теряют начальную прозрачность (становятся с прозрачностью 30 %), и эффекта никакого. Хотя библиотека 'Opacity.js' (скачал с tigir.ru) загружена верно и в браузере стоит галка у 'Использовать JavaScript'

Прошу подсказать как действовать. Сам ламер ещё тот, но я стараюсь учиться и анализировать.

P.S. Для 15 лет, наверное, ещё ничего.

09-16-2007, 09:19 PM

Хм. Я бы на flash сделал бы, наверно мороки куда меньше будет? )

09-16-2007, 09:26 PM

Quote:

Originally Posted by Romchik®

Хм. Я бы на flash сделал бы, наверно мороки куда меньше будет? )

Хм. Это самый идеальный вариант, конечно же...
Но ведь я не имею ни малейшего представления о 'Flash' и о создании swf анимаций. Самое обидное - за меня никто не нарисует, наверняка.
Увы, в 10 классе не предподают 2D/3D-графику, а продолжают учить переводить числа в двоичные, троичные ... системы... :)

P.S. Потому и хотелось бы сделать дедовским способом, посредством JS. Где мой мозг ещё чуть-чуть понимает. Совсем немного.
P.P.S. Romchik®: нарисуешь за меня? За 1 WMZ %) Больше карманных электронных денег у меня нет.

09-16-2007, 09:28 PM

Goncharov, я думал лого уже нарисовано? Я сделать этот эффект на flash думаю нетрудное дело.

09-16-2007, 09:35 PM

Romchik®, лого нарисовано. Мне сам эффект сделать нужно...Или там действительно не так всё сложно, как мне кажется? Школьник справится? %)
Хм. К примеру, я нарисовал...Далее как вставить всё это добро? И куда именно?

09-16-2007, 09:57 PM

Goncharov, нетрудно совсем, хотя небольшой опыт во flash не помешает.
Поищи туториалы, их валом на твою тему.

09-16-2007, 10:12 PM

Quote:

Originally Posted by Romchik®

Goncharov, нетрудно совсем, хотя небольшой опыт во flash не помешает.
Поищи туториалы, их валом на твою тему.

Хорошо. Огромное спасибо за оказанную помощь... Начну, значит, по-тихоньку HTML изучать...

Добавлено через 4 минуты
тьфу...Flash, а не HTML...хотя и это тоже.