How to create an image hover mouseover using Fireworks Как создать образ наведите ссылке использованием фейерверков

Posted on July 5, 2009 at 5:35 am Написал 5 июля, 2009 в 5:35 AM

To create web pages with dynamic HTML capabilities from scratch, we would traditionally need to master DHTML and that includes HTML techniques like image hotspots and JavaScript. In this tutorial I will show you how to automatically create DHTML pages with a swap image behavior using Adobe Fireworks. Для создания веб-страниц с динамическими возможностями HTML с нуля, мы традиционно необходимо освоить DHTML и HTML, что включает в себя методы как изображение "горячих точек" и JavaScript. В этом учебном пособии я покажу вам, как автоматически создавать DHTML-страниц с подкачки образ поведения с использованием Adobe фейерверков .

The final output is a complete DHTML project complete with HTML, image files and JavaScript code – and those are done without any coding by hand. Окончательный вывод является полным DHTML проекта в комплекте с HTML, файлы изображений и JavaScript-код - и это делается без какого-либо кодирования вручную.

1.) Create an image using the shape tool under the vector section (by default, the shape is set to rectangle). 1.) Создать образ, используя форму инструмента под вектор раздел (по умолчанию в форме установлен прямоугольника). To view more images simply click on the small arrow beside the rectangular image, or simply press “U” to toggle the most commonly used shapes. Чтобы просмотреть дополнительные изображения просто нажмите на маленькую стрелку рядом с прямоугольной изображение, или просто нажать "U" для переключения на наиболее часто используемые формы. Below is a screenshot of expanded shape tool. Ниже приведен скриншот расширенной формы инструмента.

2.) The shape we are going to create will act as a trigger for our swap image behavior later on. 2.) Форма мы собираемся создать будет выступать в качестве триггера для наших подкачки образ поведения позже. For now we will use a circle but you can use any shape or object as you prefer. Пока мы будем использовать один круг, но вы можете использовать любую форму или объект, как вам удобнее.

3.) After creating a shape on your canvas import a picture to be used for image swapping. 3.) После создания формы на холсте импортировать изображения, которые будут использоваться для обмена изображения. Click on file then import, or press ctrl + r on your keyboard then browse for the desired picture. Нажмите на файл затем импортировать, или нажмите Ctrl + R на клавиатуре, а затем просмотреть желаемое изображение.

4.) Your canvas should have a trigger button and image as discussed earlier. 4.) Ваш холст должен иметь кнопку и вызвать образ, как обсуждалось ранее. Next we create a new frame used for another image. Далее мы создаем новый кадр используется для другого изображения. Click New/Duplicate frame under the Frames and History panel. Нажмите кнопку Новый / Повторяющийся кадр под Рамки и история группы.

5.) Select newly created frame and import another image. 5.) Выберите вновь созданный кадр и импорта другой образ. It is best that image on frame 1 and frame 2 has exactly the same absolute positioning on your canvas. Это лучшее из того, что изображение на 1 кадр и кадр 2 же абсолютное позиционирование на холсте.

6.) Going back to frame 1. 6.) Возвращаясь к рамке 1. While the circle shape is selected, right click on it and insert a polygonal slice in it. Несмотря на то, что круг форма выбрана, щелкните правой кнопкой мыши на нем и вставить многоугольными ломтик в нем.

7.) Next create a rectangular slice for image 1 and image 2 7.) Следующая создать прямоугольный кусочек для изображения 1 и Фото 2

Frame 1: Should look like image below Рамка 1: Если посмотреть, как изображение ниже

Frame 2: Рамка 2:

8.) Select the circle image on frame 1 then right click on it and click Add swap image behavior: 8.) Выберите окружности изображение на 1 кадре щелкните правой кнопкой на ней и выберите пункт Добавить подкачки образ поведения:

9.) Upon clicking on add swap image behavior another window will appear, click on the rectangular slice we created earlier. 9.) После нажатия на съемных добавить изображение поведение другого окна, нажмите на прямоугольный кусочек мы создали ранее.

10.) Press F12 on your keyboard to preview it on your browser. See the difference between the two screenshots below before and after hovering the mouse pointer on the circle. 10.) Нажмите F12 на вашей клавиатуре, чтобы просмотреть его в браузере. Увидеть разницу между двумя скриншоты до и после зависания мыши по кругу.

Before hover: Перед наведите:

During hover: В режиме висения:

Adobe Fireworks is available from this URL: Adobe фейерверков доступна из этого URL: http://www.adobe.com/products/fireworks/ http://www.adobe.com/products/fireworks/

Ben Carigtan shows you how it's done. Бен Carigtan показывает вам, как это сделать.

Enjoyed this post? Понравилась эта должность? Subscribe to Online Tech Tips via Подписка на Интернет Технология Советы через RSS Feed RSS Подача or via или через Email Электронная почта and receive free daily productivity tips. и получите бесплатно ежедневно производительности советы.

» Filed Under », Поданной в соответствии с Web Site Tips Веб-сайт Советы

Save this page Сохраните эту страницу	Stir it up on Mixx Тщательно размешайте его вверх на Mixx
Add to Reddit Добавить к Reddit	Stumble this page Stumble на этой странице