|
|
Автор статьи и идеи: Erg_Noor |
|
| |
Часто новичками задаются вопросы, связанные с ролловерами. Люди делают их в ImageReady, случайно
делают там небольшую ошибку, в результате программа генерирует в HTML и JavaScript нечто,
работающее не так, как изначально задумывалось. А потом на форумах сыпятся вопросы вроде
"Я сделал, а у меня не работает, подскажите где ошибка".
А теперь серьёзно, уважаемые начинающие веб-дизигнеры. Я понимаю, что многим удобно пользоваться
дримвьюверами для создания сайта и имэджреди для создания ролловеров. Но понимаете ли вы на все
100% тот код, который эти программы вам генерируют? Это мне слегка напоминает ситуацию, когда
вместо того, чтобы произвести "умножение семь на восемь" человек использует вместо своей головы
калькулятор. В общем, давайте думать своей головой. Пригодится.
В этом уроке я хочу научить вас делать ролловеры для своих страниц вручную, дабы вы имели представление,
что там вообще происходит и как поменять в случае-чего что-нибудь (например, вставить ещё
один буттон), не начиная опять всё делать заново в Фотошопе и в Имэджреди. Итак...
|
|
Для начала рассмотрим на простеньком примере, как бы мы делали ролловер в ImageReady.
Допустим, нам поставлена задача сделать примерно такую вот штучку (поводите мышкой над
картинками)
Cоздадим в Фотошопе картинку размером 192х64 писеля и зальём её оранжевым цветом.
Теперь на трёх новых слоях поставим 3 картинки размерами 64х64 пикселя.
С помощью инструмента Slice Tool разделим картинку на 3 равные части, как на рисунке:
Теперь выставим Blending mode для этих трёх слоёв на Luminosity. Сохраним наш файл, скажем,
как roll.psd.
Открываем этот файл в ImageReady. Создадим для каждого слайса свой Rollover как на скрине и для этих ролловеров выставим
Blending mode на normal:
Ну, с этим у нас проблемы небыло, не так ли? Можем смело сохранять как HTML файл, выбрав
File->Save Optimized As. Но давайте выберем в меню File->Preview In->Internet Explorer и посмотрим
на выданный нам код. А выглядит он так:
|
|
<HTML>
<HEAD>
<TITLE>roll</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<!-- ImageReady Preload Script (roll.psd) -->
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
roll_01_over = newImage("images/roll_01-over.gif");
roll_02_over = newImage("images/roll_02-over.gif");
roll_03_over = newImage("images/roll_03-over.gif");
preloadFlag = true;
}
}
// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
<!-- ImageReady Slices (roll.psd) -->
<TABLE WIDTH=192 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<A HREF="#"
ONMOUSEOVER="changeImages('roll_01', 'images/roll_01-over.gif'); return true;"
ONMOUSEOUT="changeImages('roll_01', 'images/roll_01.gif'); return true;">
<IMG NAME="roll_01" SRC="images/roll_01.gif" WIDTH=64 HEIGHT=64 BORDER=0 ALT=""></A></TD>
<TD>
<A HREF="#"
ONMOUSEOVER="changeImages('roll_02', 'images/roll_02-over.gif'); return true;"
ONMOUSEOUT="changeImages('roll_02', 'images/roll_02.gif'); return true;">
<IMG NAME="roll_02" SRC="images/roll_02.gif" WIDTH=64 HEIGHT=64 BORDER=0 ALT=""></A></TD>
<TD>
<A HREF="#"
ONMOUSEOVER="changeImages('roll_03', 'images/roll_03-over.gif'); return true;"
ONMOUSEOUT="changeImages('roll_03', 'images/roll_03.gif'); return true;">
<IMG NAME="roll_03" SRC="images/roll_03.gif" WIDTH=64 HEIGHT=64 BORDER=0 ALT=""></A></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
|
|
|
Ну и бред!... Нет, ну работает, конечно, там в Adobe тож не дураки сидят. Но мусора то сколько!
Зачем так сложно? Многим новичкам будет непонятно, что же там такое понаписано то. В общем, давайте лучше своими руками
всё сделаем, да как можно проще.
|
|
Способ создания ролловера БЕЗ ImageReady.
Итак, откроем в Фотошопе созданный нами ранее файл roll.psd. Все созданные нами слайсы нам не нужны, забываем о них.
Инструментом Crop Tool вырезаем первый из трёх фрагментов. (ни в коем случае не нажимаем save!).
Теперь File->Save for web и сохраняем под названием pic1_no.gif. Теперь Blending mode для слоя с
"лицом" выставляем на Normal (мы ведь выставили для всех трёх слоёв Luminosity, помните?). Теперь
File->Save for web и сохраняем под названием pic1_yes.gif. Сохранили.
Теперь, чтобы вернуться на два шага назад (до вырезания первой из трёх картинок) нажимаем два раза
CTRL+ALT+Z. Проделываем тот же путь для создания остальных четырёх картинок. Получили:
pic1_no.gif |
pic2_no.gif |
pic3_no.gif |
pic1_yes.gif |
pic2_yes.gif |
pic3_yes.gif |
Теперь напишем код странички, на которой просто расположим три картинки. Располагать будем картинки
pic1_no.gif, pic1_no.gif и pic1_no.gif. Приставка "_no" означает, что
это картинка, которая будет видна, если на неё не наводить мышь. Итак,
хтмл-файл создайм в той же папке, в которой у нас лежат картинки.
Код будет такой:
|
|
|
<html>
<head>
<title>roll</title>
</head>
<body>
<table align="center">
<tr>
<td width="64">
<img src="pic1_no.gif" name="Pic1" width="64" height="64">
</td>
<td width="64">
<img src="pic2_no.gif" name="Pic2" width="64" height="64">
</td>
<td width="64">
<img src="pic3_no.gif" name="Pic3" width="64" height="64">
</td>
</tr>
</table>
</body>
</html>
|
|
|
!!! Не забываем поставить для каждой картинки name, оно
нам потом понадобится.
Смотрим, что получилось:
Ага! Непорядок! Между картинками пространство. Меняем строку
<table align="center">
на
<table align="center" cellpadding="0" cellspacing="0">
Получаем:
Вот теперь порядок. Теперь нам надо подумать, как бы это сделать так, чтобы картинки
при наведении на них мыши менялись на другие картинки. Использовать будем, как и в ImageReady
Javascript. Ну и, само-собой, картинки послужат нам буттонами для ссылки на три различных
странички. Но давайте сначала разберёмся с Javascript. Это объяснение расчитано на читателя,
который хотя бы немного знает, что это такое и с чем его едят. Итак, между <head>
и </head> пишем две следующее:
|
|
|
<script language="JavaScript">
<!--
if (document.images) {
// Kartinka nomer 1
Pic1on = new Image();
Pic1on.src = "pic1_yes.gif";
Pic1off = new Image();
Pic1off.src = "pic1_no.gif";
// Kartinka nomer 2
Pic2on = new Image();
Pic2on.src = "pic2_yes.gif";
Pic2off = new Image();
Pic2off.src = "pic2_no.gif";
// Kartinka nomer 3
Pic3on = new Image();
Pic3on.src = "pic3_yes.gif";
Pic3off = new Image();
Pic3off.src = "pic3_no.gif";
}
function picon(imja) {
if (document.images) {
document[imja].src = eval(imja + "on.src");
}
}
function picoff(imja) {
if (document.images) {
document[imja].src = eval(imja + "off.src");
}
}
//-->
</script>
|
| |
Давайте разберёмся. Мы имеем внизу две функции. Первая function picon указывает на событие, которое должно
произойти при наводке на картинку мыши. Вторая function picoff указывает на событие при отводе с картинки мыши.
Итак! При наводе мыши на картинку, скажем, pic1_no.gif с параметром imja, которое означает не имя файла, а имя картинки
(помните мы писали name="Pic1" в хтмл-коде выше?) и значение которого мы передадим функции
имя картинки для нашего скрипта будет это переданное имя плюс приставка on,
в нашем случае Pic1on.
Во второй функции function picoff (событие при отводе мыши) происходит то же самое, только
имя картинки для скрипта будет переданный параметр imja (который в нашем случае Pic1)
плюс приставка off, то-есть Pic1off.
Само-собой, что нам необходимо для каждой из наших трёх картинок указать состояния on и off,
что мы и делаем немного выше в скрипте (над обоими функциями). Мы пишем:
Pic1on = new Image();
Pic1on.src = "pic1_yes.gif";
Pic1off = new Image();
Pic1off.src = "pic1_no.gif";
Это означает, что при вызове function picon с параметром jmja, равным Pic1,
будет загружаться на место этой картинки другая картинка, скриптовое название которой Pic1on, а название файла которого
pic1_yes.gif.
Такие вот дела, мдаа... Вторая функция делает то же самое, просто загружает Pic1off,
название файла которого pic1_no.gif, расписывать это наверное не стоит.
Всё понятно? Немного сложно я объясняю, но если присмотреться к коду, то всё очень просто.
Ну да ладно, будем сводить наши черновики в один действующий код.
Итак, наш код почти готов, необходимо лишь вызывать эти самые функции function picon и function picoff
при загрузке картинок. Для этого используем mouseover и mouseout:
|
|
|
<html>
<head>
<title>roll</title>
<script language="JavaScript">
<!--
if (document.images) {
// Kartinka nomer 1
Pic1on = new Image();
Pic1on.src = "pic1_yes.gif";
Pic1off = new Image();
Pic1off.src = "pic1_no.gif";
// Kartinka nomer 2
Pic2on = new Image();
Pic2on.src = "pic2_yes.gif";
Pic2off = new Image();
Pic2off.src = "pic2_no.gif";
// Kartinka nomer 3
Pic3on = new Image();
Pic3on.src = "pic3_yes.gif";
Pic3off = new Image();
Pic3off.src = "pic3_no.gif";
}
function picon(imja) {
if (document.images) {
document[imja].src = eval(imja + "on.src");
}
}
function picoff(imja) {
if (document.images) {
document[imja].src = eval(imja + "off.src");
}
}
//-->
</script>
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<a href="link1.htm" onmouseover="picon('Pic1')" onmouseout="picoff('Pic1')">
<td width="64">
<img src="pic1_no.gif" name="Pic1" width="64" height="64">
</td>
</a>
<a href="link2.htm" onmouseover="picon('Pic2')" onmouseout="picoff('Pic2')">
<td width="64">
<img src="pic2_no.gif" name="Pic2" width="64" height="64">
</td>
</a>
<a href="link3.htm" onmouseover="picon('Pic3')" onmouseout="picoff('Pic3')">
<td width="64">
<img src="pic3_no.gif" name="Pic3" width="64" height="64">
</td>
</a>
</tr>
</table>
</body>
</html>
|
| |
ВОТ И ВСЁ! Сравните этот код с громоздким кодом, созданным в ImageReady. Результат
этого кода можно посмотреть здесь,
а сам код ещё раз глянуть (для тех, кто хотел бы сохранить себе этот код) можно
тут. А полностью весь пример без объяснений
(хтмл-файл с написанным с подсветкой кодом, хтмл-файл с картинками и сами картинки) можете
скачать там.
Послесловие: я надеюсь, что хоть кто-то понял то, что я пытался втолковать на протяжении
7 часов (как время летит, аж глаза болят! :-) ). Суть этого урока - пытайтесь сами своими руками
делать странички и скрипты. Вспомогательные программы - это, конечно, хорошо, но может случиться,
что когда-нибудь их у вас под руками не будет. Я не призываю вас пользоваться только Блокнотом,
но всё же...
|
|
|
|
