Ликиликс

  сайтостроение программирование

  

Меняющаяся картинка при наведении мыши

Меняющаяся картинка при наведении мыши

На протяжении уже двух месяцев думал написать эту статью но всё как-то руки не доходили, ну вот сегодня решился но всё как то встречайте "Меняющаяся картинка при наведении мыши". Будем рассматривать два варианта, первый при наведении на цветную картинку мышью чтобы менялась на чёрно белую и наоборот, второй меняющаяся картинка на другую.

Цветная картинка при наведении мыши.

Если вам подходит верхний вариант то тут нет ни чего сверх естественного всё очень просто, скрипт состоит из класса css и из одной вертикальной картинки её можно скачать тут , да действительно что моя картинка вам не нужна, но для начального эксперимента в самый раз, так что копируйте, а затем делайте свою какая вам нужна - это можно сделать в любом преметивном редакторе картинок.

Установка

Для установки данного скрипта вставьте в ваш css файл ниже приведённый код.

#rollover {
background: url(images/w2.png);  картинка и путь к ней.
display: block;
width: 184px; ширина картинки
height: 150px; высота картинки
}

#rollover:hover {
background-position: 0 -150px; смешение картинки при наведении курсора
}

Если по какой либо причине у Вас нет файла css вставьте этот код по соседству с счётчиком статистики.
<style type="text/css">
#rollover {
background: url(images/w2.png);
display: block;
width: 184px;
height: 150px;
}

#rollover:hover {
background-position: 0 -150px;
}
</style>

И последний шаг, в том месте где должна отображаться картинка вставьте этот  DIV

<div id="rollover"></div>

Ещё один хороший скрипт

Установка

<img onmouseover="this.src='images/1ww.png';" onmouseout="this.src='images/0ww.png';" border="0" alt="" src="images/0ww.png">
Как можно заметить в скрипте 2 картинка 1 отображается в штатном режиме, а
вторая при наведении, этот скрипт не требует ни каких прочих элементов


 

Подпишитесь на новые статьи через twitter

 

 
Copyright © My Company 2009-2013      обратная связькарта сайта