IMHO.WS - Подсветка картинок по контуру

RaZEr
:up:
Код:
Активная картинка - картинка, которая меняет сой вид в зависимости от действий посетителя. Простейший тому пример - картинка изменяется после проведения над ней курсоа мыши. В этой статье я расскажу вам как осуществить эту идею. 



Первое, что нужно сделать, задействовать основной скрипт. Его мы поместим между тегами <head> и </head>. Выглядит скрипт так: 

<SCRIPT>

<!--

if (document.images) {

image1on = new Image();

image1on.src = "swap_pic1.gif";

image1off = new Image();

image1off.src = "swap_pic.gif";



}



function turnOn(imageName) {

if (document.images) {

document[imageName].src = eval(imageName + "on.src");

}

}



function turnOff(imageName) {

if (document.images) {

document[imageName].src = eval(imageName + "off.src");

}

}

-->

</SCRIPT>



Используемые обозначения:

swap_pic.gif - Картинка, которая будет отображаться первоначально

swap_pic1.gif - Картинка, которая загорится после подведения мыши



Основное уже сделано. Теперь браузер знает и обычную картинку и "активную". Осталось только указать ему, где вставлять картинку. Выбирайте место, где требуется эта картинка и на ее месте прописываете следующее: 





<a href="HTTP://MWEB.RU" onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')"> <img name="image1" src="swap_pic.gif" alt="Пример активной картинки" width="100" height="50" border="0"></a> 

Парамытры alt, width и height меняйте в зависимости от конкретной ситуации. 



Теперь осталось проверить, что же получилось: 





Скрипт работает как в Internet Explorer, так и в Netscape Navigator, в связи с чем вы можете не опасаться за его работоспособность в зависимости от типа браузераю Вы можете использовать этот скрипт неограниченное число раз на одной странице. Все упирается только во возможности браузера и компьютера :) Юзайте на здоровье :)
Взято с сайта http://maste.ru