Stolica.ru
Main > Lessons > Other > Rollover

Автор статьи и идеи: 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 часов (как время летит, аж глаза болят! :-) ). Суть этого урока - пытайтесь сами своими руками делать странички и скрипты. Вспомогательные программы - это, конечно, хорошо, но может случиться, что когда-нибудь их у вас под руками не будет. Я не призываю вас пользоваться только Блокнотом, но всё же...



Rambler's Top100 TopList

таймер времени | детская мебель на заказ, мебель на заказ по индивидуальным размерам москва

Stolica.ru