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

Возможно, вы видели подобный эффект, сделанный во Flash. Но во-первых - Flash есть не у всех, во вторых - размер загружаемого Flash ролика несоизмерима по размерам с небольшим скриптом на JavaScript.

Пусть есть некоторое количество картинок (желательно квадратных для более красивого эффект выдвижения). Необходимо, что при наведении на одну из картинок она плавно увеличивалась в размерах, то есть создавалось ощущение, что она плавно выдвигается. Для придания изящности, необходимо также добавить тень небольшим картинкам, которая исчезает по мере увеличения изображения.

Следующий код позволяет продемонстрировать данный эффект:

< style>

.image { cursor: hand;
border: 1px solid;
FILTER:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#666666,strength=30)}

< /style>

< script language=JavaScript>

var pic = new Array("pic0", "pic1", "pic2", "pic3");
var x = new Array(120,120,120,120,120);
var y = new Array(120,120,120,120,120);
var sh = new Array(30,30,30,30,30);
var t = new Array();

function tonext(a) {

x[a]+=5;
y[a]+=5;
sh[a]-=2;
document.getElementById(pic[a]).width=x[a];
document.getElementById(pic[a]).height=y[a];
document.getElementById(pic[a]).style.filter='progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#666666,strength='

+sh[a]+')';
t[a] = setTimeout("tonext("+a+")",10);
if (x[a]>=195) {
document.getElementById(pic[a]).width=195;
document.getElementById(pic[a]).height=195;
clearTimeout(t[a]);
}
}

function toback(a) {

x[a]-=5;
y[a]-=5;
sh[a]+=2;
document.getElementById(pic[a]).width=x[a];
document.getElementById(pic[a]).height=y[a];
document.getElementById(pic[a]).style.filter='progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#666666,strength='

+sh[a]+')';
t[a] = setTimeout("toback("+a+")",10);
if (x[a]< =120) {
document.getElementById(pic[a]).width=120;
document.getElementById(pic[a]).height=120;
clearTimeout(t[a]);
}
}

< /script>

< body leftMargin=100 topMargin=80>
< center>
< table cellpadding=0 cellspacing=0>
< tr valign=center>

< td width=215 height=215 align=center>
< img src=lemur.jpg width=120 height=120 class=image onmouseover='tonext(0)' onmouseout='toback(0)' name=pic0>
< /td>

< td width=215 height=215 align=center>
< img src=flamingo.jpg width=120 height=120 class=image onmouseover='tonext(1)' onmouseout='toback(1)' name=pic1>
< /td>

< tr valign=center>
< td width=215 height=215 align=center>
< img src=dog.jpg width=120 height=120 class=image onmouseover='tonext(2)' onmouseout='toback(2)' name=pic2>
< /td>

< td width=215 height=215 align=center>
< img src=leo.jpg width=120 height=120 class=image onmouseover='tonext(3)' onmouseout='toback(3)' name=pic3>
< /td>

< /tr>
< /table>
< /center>

На странице были размещены четыре картинки, оригинальный размер которых составляет 195x195, но которые отображаются как 120x120. При этом, картинки по умолчанию имеют теневой фильтр:

FILTER:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#666666,strength=30)

Параметр color позволяет задать цвет тени, direction - угол падения, strength - разброс тени.

При наведении указателя мыши на любую из картинок вызывается функция tonext(), а если картинка теряет указатель - toback().

Функции tonext() и toback() выполняют противоположные действия. Функция tonext() увеличивает отображаемый размер картинки и уменьшает тень:

x[a]+=5;
y[a]+=5;
sh[a]-=2;

функция toback() наоборот, уменьшает изображение и увеличивает тень к прежнему состоянию:

x[a]-=5;
y[a]-=5;
sh[a]+=2;

Обратите внимание, что в массиве pic должны хранится все имена картинок (pic1, pic2...) по порядку. Количество элементов в массивах x, y, sh должно быть не меньше, чем количество картинок, учавствующих в эффекте.