Форум

lancer · #1 (**permalink**) 23.07.2010, 02:42

Добрый день.
Возникла задача, не знаю возможно ли ее решить на JS.

Имеется картинка, которую сверху полностью закрывает белый слой.
Возможно ли вывести заранее неизвестную область картинки поверх этого слоя?
Если бы требовалось выводить всегда одну и ту же известную область, решение было бы очевидным: заранее вырезать область
и выводить ее поверх белого слоя.

Дополнительное условие: прорезать вырезку в белом слое и меняя его положение показывать таким образом нужную область - не подходит.
Скажем так, под белым слоем лежит еще один, вырезка беспомощна.

Область картинки. z-index:3;
Белый слой. z-index:2;
Картинка. z-index:1;

Octane · #2 (**permalink**) 23.07.2010, 02:47

Поверх изображения расположите SVG-элемент (VML в IE). При помощи SVG Path можно любую кривую описать.

Gvozd · #3 (**permalink**) 23.07.2010, 03:07

сделай див, и в него помести копию картинки.
абсолютным позиционированием обоих, и overflow добейся нужного эффекта

lancer · #4 (**permalink**) 23.07.2010, 03:41

Octane, спасибо, возможно воспользуюсь - с SVG совсем не знаком.

Gvozd,
Не понял идеи, совсем.

Gvozd · #5 (**permalink**) 23.07.2010, 14:47

<html>
<head>
<style>
img, div {
position: absolute;
}
</style>
</head>
<body>
<img src="http://ya.ru/logo.png" style="left:0px;top:0px;" />
<div style="background-color:green;left:10px;top:10px;height:50px;width:50px;">
</div>
<div style="overflow:hidden;left:15px;top:15px;height:20px;width:20px;">
<img src="http://ya.ru/logo.png" style="position:absolute;left:-15px;top:-15px;" />
</div>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript