Webразработка с Macromedia Studio MX
Карты рисунков и переключатели
Карты рисунков и переключатели
Карты рисунков являются обычными изображениями, которые были разделены на слайсы (slices) в приложении Fireworks. Переключатели (rollovers) используют эти составляющие для определения того, какой рисунок какую часть заменяет. Надо сказать, что создать переключатели, которые замещают один рисунок другим, в Fireworks достаточно просто. Примером переключателя может служить изменение цвета кнопки при наведении на нее указателя мыши. Карты рисунков используются для помещения на одном рисунке ссылок на разные адреса. Например, если у вас есть полоска с тремя значками, можно создать карту так, чтобы с каждым значком был связан свой собственный адрес URL. В следующих трех примерах мы покажем: как создать простой переключатель, который замещает один рисунок другим; как создать распределенный переключатель, который использует один рисунок на странице 'для замещения другого рисунка; и как использовать внешний по отношению к Fireworks рисунок для распределенного переключателя.
Для того чтобы создать простой переключатель, выполните следующие действия.
1. Откройте в Fireworks файл Rolloverl.png. Щелкните на рисунке и выберите в меню пункт Edit=>Insert=>Slice. Откройте панель Frames (Кадры), нажав комбинацию клавиш <Shift+F2> или щелкнув Frames and History и выбрав вкладку Frames.
2. Откройте файл Rollover2. png, щелкните на рисунке и скопируйте его в буфер обмена. Закройте рисунок.
3. В меню Panel Option выберите пункт Add Frames (Добавить кадры). Откроется диалоговое окно Add Frames. В поле ввода Number введите 1. В области Insert New Frames выберите пункт After Current Frame. Щелкните на кнопке ОК.
4. Под номером 1 откроется новый кадр. Выделите его и вставьте в него рисунок из буфера обмена.
5. Выделите кадр с номером 1, щелкните на фрагменте, выделив его, после чего щелкните на белом маркере внутри. Перетащите маркер в верхний левый угол фрагмента. От маркера в левый верхний угол рисунка протянется синяя линия (Рисунок 9.24).
6. Откроется диалоговое окно Swap Image, запрашивающее, где расположен рисунок, замещающий исходный. Так как у нас имеется только один дополнительный кадр, в списке Swap Image From будет находиться только кадр Frame 2. Щелкните на кнопке ОК.
7. Щелкните на вкладке Preview и протестируйте замещение. Также можно нажать клавишу <F12> и протестировать замещение в броузере.
