Блог

В данный момент я работаю над проектом, в котором у меня есть два изображения, одно размещено поверх другого, и я хотел бы, чтобы нижнее изображение отображалось больше при наведении курсора мыши на изображение, и мне это нужно на пиксельном уровне, я попытался создать количество X по Yиз divs, которые были размером 1 на 1 пиксель, каждый из которых имел один и тот же фон, но смещал фон по их позициям, поэтому каждый верхний пиксель изображения был размером 1 пиксель, чтобы я мог изменять непрозрачность каждого div при наведении курсора мыши. Попытка этого привела к остановке моего браузера с таким количеством divs.

Есть ли способ, с помощью которого я могу это сделать (не во flash), но таким образом, чтобы он работал во всех браузерах достаточно быстро, чтобы он выглядел плавно и без остановки браузера?

Наиболее подходящим был бы элемент Canvas. Однако он поддерживается не ВСЕМИ браузерами, а только реальными. (Internet Explorer добавил поддержку Canvas только в версии 9).

используя абсолютное позиционирование холста над изображением, кто-то может изменить альфа-значения холста, чтобы базовое изображение «просвечивало».

Примером не производственного кода может быть это (протестировано и работает в FF7): http://jsbin.com/uxizav/edit#preview