Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.07.2010, 02:42
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

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

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

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

Область картинки. z-index:3;
Белый слой. z-index:2;
Картинка. z-index:1;
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2010, 02:47
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Поверх изображения расположите SVG-элемент (VML в IE). При помощи SVG Path можно любую кривую описать.
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2010, 03:07
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

сделай див, и в него помести копию картинки.
абсолютным позиционированием обоих, и overflow добейся нужного эффекта
Ответить с цитированием
  #4 (permalink)  
Старый 23.07.2010, 03:41
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

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

Gvozd,
Не понял идеи, совсем.
Ответить с цитированием
  #5 (permalink)  
Старый 23.07.2010, 14:47
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

<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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42
Как заранее закэшировать картинки в браузере IE 6 ilshat Internet Explorer 8 30.01.2009 15:26