Принцип производства
Принцип создания изображений подкачки основан на использовании инструмента Swap image, применяемого к панели поведения в Dreamweaver. Настройте так, чтобы при наведении курсора мыши на определенное изображение кнопки позволяла самой кнопке осуществлять обмен изображения (обмен на картинку с желтым текстом) и в то же время проектировать обмен изображениями указателя (обмен на указатель, указывающий на текущее изображение указателя кнопки) для достижения вышеуказанного эффекта.
^-^: На самом деле некоторые вещи на веб-странице кажутся очень загадочными, но в основе всего лежит простое изменение нескольких изображений или нескольких слоев.
материалы для крафта
Здесь демонстрируется переворачивание 7 изображений кнопок, поэтому нам нужно создать в общей сложности 21 изображение, 14 изображений кнопок и 7 изображений указателей, чтобы добиться показанного эффекта. Среди них 7 изображений кнопок на передней панели имеют названия B1-1~B1-7 соответственно, 7 изображений фоновых кнопок называются B2-1~B2-7 соответственно, а 7 изображений-указателей называются Z1~Z7 соответственно, и их указатели указывают на кнопки. от одного до семи. Для создания изображений кнопок можно использовать программное обеспечение для создания изображений, например Fireworks.
Способ приготовления
1. Создайте файл веб-страницы.
2. Вставьте таблицу 7×2 и объедините левый столбец таблиц, чтобы вставить изображение-указатель. Семь таблиц справа используются для вставки изображений кнопок.
3. Вставьте первое изображение указателя Z1 в таблицу слева и вставьте синие передние кнопки B1-1~B1-7 в 7 рядов ячеек справа (эффект показан на рисунке 2).
4. Нажмите «Окно (Windows) → Поведение», чтобы вызвать панель поведения.
5. Выберите первое изображение, чтобы настроить поведение. Вот изображение кнопки с надписью «Руководящая идея» (изображение B1-1).
6. Нажмите кнопку «плюс» и выберите «Заменить изображение» во всплывающем меню, чтобы открыть диалоговое окно замены изображения. Основная часть наших настроек будет выполнена в этом диалоговом окне.
7. Нажмите кнопку обзора в диалоговом окне, а затем выберите конечное изображение, в которое будет перевернуто изображение кнопки. В данном случае это изображение кнопки с желтым текстом, то есть изображение B2-1. Затем нажмите ОК.
8. Повторите шаг 6, выберите изображение указателя Z1 в текстовом поле изображения, а затем снова нажмите кнопку обзора, чтобы перевернуть его к первому файлу указателя Z1. Нажмите ОК. После выполнения вышеперечисленных операций результаты отображения на панели поведения показаны на рисунке 3.
9. Выберите второе изображение кнопки B1-2, переверните его на кнопку B2-2 в соответствии с описанным выше методом и переверните изображение-указатель на второе изображение-указатель Z2.
10. Выполните описанные выше действия и настройте следующие 5 картинок на режим обмена изображениями.
11. Нажмите F12 для предварительного просмотра и наведите указатель мыши на каждое изображение. Как насчет этого, правда?