Журнал WEB Star - Коврик TrigGer'a - все о web-дизайне, Photoshop'e, Flash'e
Коврик TrigGer'a - все о web-дизайне и web-мастеринге
Общая информация
 
  WEB design
 
  WEB фокусы
 
  Programming
   

Главная
Авторам
Сотрудничество
Ссылки

© Copyright Алекс aka TrigGer & x-graphic studio.
© Все права защищены.

Перепечатка материалов разрешается, только после письменного разрешения автора (e-mail). При перепечатке любого материала с журнала видимая ссылка на источник www.kovrik.hut.ru и все имена, ссылки авторов обязательны.

*** WEB Star *** #2 WEB фокусы

RollOver: как и зачем?

Автор: Алекс aka TrigGer
Источник: kovrik.hut.ru

Сейчас мы будем изучать очень интересное явление, как ролловер рисунки. Что же такое rollover? Путешествуя по Интернету я много раз замечал, что при наведении на тот или иной элемент навигации или ссылку, она меняет свой цвет, размер и всячески мигает, привлекая свое внимание. Это делается, для то-го чтобы пользователь знал, что ссылка выбрана. Ну, так вот… Увидев это я решил докопаться до истины и узнать, как же все-таки эта штука работает. А работает она с помощью JavaScript'а, конечно, не совсем простого, на первый взгляд, но если приглядеться по внимательней, то можно понять.
Для знающих людей (в частности JavaScript) это не проблема соорудить себе такую штуку, но речь идет не о профессионализме мастера, а том, чтобы новичок смог создать что-то подобное. Не хочется повторяться, но текстовые ссылки можно сделать и с помощью обычных Каскадных таблиц (CSS), но тут дело касается графических рисунков. Как же все-таки это сделать?

Приступим. В самом начале нам потребуется вот что: нужно создать один или несколько элементов навигации, к примеру, кнопок. Затем нужно сделать точно такие же копии кнопок, но уже с разным шрифтом или цветом букв (что пожелаете). Знаете, это напоминает анимирование объектов, только это будет происходить с помощью языка HTML и нашего старого доброго HTML-редактора или на худой случай простого Блокнота, это тем кто пишет в ручную все тэги. Ну, так вот, создаем новый документ и в самом начале страницы (это код), после тэга </head>, пишем следующее:

<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Далее пишем строку со ссылкой на страницу, а потом идут ссылки на функции, которые бы прописали в самом начале JavaScript'a. Хочу отдельно ос-тановиться и пояснить на следующем моменте. MM_swapImage - это функция подкачки рисунка с указанием его имени и пути, где лежит рисунок уже изме-ненной кнопки. Далее идет указание на саму кнопку в оригинале и все. Это будет выглядеть примерно так:

<a href="http://www.kovrik.hut.ru" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','../pic/rollover/roll_on.jpg',1)"><img name="Image1" border="0" src="../pic/rollover/roll.jpg" width="200" height="37"></a>

Вот что у нас получилось.

Журнал WEB Star

Конечно, можно усложнить задачу и сделать так, чтобы не кнопка меня-лась, а, например, дисплей или просто можно сделать подсказку в виде графи-ческого файла и спрятать ее до тех пора пока пользователь не наведет на ука-занную ссылку. Вот тогда то она и появляется. Как же это сделать? Тоже с по-мощью JavaScript'a. В начале документа (код) пишем следующее:

<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Ну а далее по той же схеме. Это будет выглядеть так:

<a href="http://www.kovrik.hut.ru"><img src="../pic/rollover/roll.jpg" width="200" height="37" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tv','','../pic/rollover/tv_on_web.jpg',1)" border="0" alt="Журнал WEB Star"></a>

Вот что у нас получилось.

Журнал WEB Star

Надеюсь, что вам это поможет. Если что-то не получается пиши на e-mail, вместе разберемся, а лучше всего сходите на сайт посвященный web-дизайну и задайте свои вопросы на форуме.
Удачи!

Наверх страницы