Инструкция
1
Постараемся сделать анимированную шапку, которая при наведении на нее курсора мыши будет менять свою конфигурацию. Например, черно-белая картинка в шапке преобразовывалась в цветную при взаимодействии или сменялась на другую.
2
Установите на свой компьютер библиотеку JQuery, предварительно скачав ее на официальном сайте (jquery.com).
3
Подключите библиотеку к своему html-файлу между тегами head, используя для этого тег script:
.
4
Выберите две картинки, которые при взаимодействии пользователя с шапкой будут сменять друг друга. Если вы хотите, чтобы был переход из черно-белого режима в цветной, то создайте копию картинки и обесцветьте ее в Photoshop.
5
Создайте в html-документе список из двух пунктов и к каждому прикрепите картинки, используя тег image. К самому списку примените класс стилей, например
    6
    Делайте это в том диве (div), который у вас отвечает за шапку сайта. Сначала укажите адрес картинки, которая должна отражаться в статичном состоянии, а потом ту, которая появляться при наведении.
    7
    Пропишите к первой картинки class="pervaya", а ко второй class:"vtoraya".
    8
    В прикрепленном файле css укажите для этих классов абсолютное позиционирование элементов (position: absolute;), фиксированную высоту и ширину (height и width).
    9
    Наложите картинки друг на друга слоями. Используйте для этого стиль z-index. Он позволяет выравнивать элементы по оси z, которая уходит от нас в глубину экрана.
    10
    Для самого списка укажите нужные вам отступы, выравнивание и уберите пункты списка (list-style-type: none;).
    11
    Создайте файл с расширением .js и вставьте в него следующий код:
    $(document).ready(function(){
    $("img.grey").hover(
    function() {
    $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
    });
    });
    12
    Этот код приведет анимацию вашей шапки в действие. Не забудьте подключить файл .js к html-документу.