Javascript-форум - Подсветка картинки решение.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Подсветка картинки решение. (https://javascript.ru/forum/dom-window/28833-podsvetka-kartinki-reshenie.html)

Подсветка картинки решение.

Всем доброго времени суток.
Это продолжение темы:
http://javascript.ru/forum/dom-windo...-kartinki.html
Предложений было много,но никто точного ответа не дал=) у всех как и у меня было абстрактное представление.
В три часа ночи перед сном я врубился как сделать то, что мне нужно.
вот ссылка на демку:
http://l-liava-l.narod.ru/
Она еще сыровата но облагородить не проблема.:)
Вот мое решение

<HTML>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css.css" type="text/css">
<script type="text/javascript" src="js.js" ></script>
</head>
<body>

<div id="cursor"></div><!-- блок летающий за курсором -->
<div id="img"></div><!--монохромная картинка -->



</body>
</HTML>

Код:

 //тут все и так ясно ширину высоту и left top меняем как хотим 

#img{

background:url('2.jpg');

width:469px;

height:500px;

position:absolute;

left:300px;

top:250px;

z-index:0;

}



#cursor{

background:url('1.jpg') no-repeat;

background-position:0px 0px;

position:absolute;

z-index:1;

left:300px;

top:250px;

width:200px;

height:200px;

overflow:hidden;

}

$(document).ready( function() {
//забираем положение и высоту с шириной из css
var widthM = parseInt($('#img').css('width'));
var heightM = parseInt($('#img').css('height'));
var leftM = parseInt($('#img').css('left'));
var topM = parseInt($('#img').css('top'));
//следим за курсором
$().mousemove( function(e) {
var x = parseInt(e.pageX);
var y = parseInt(e.pageY);
if(x > leftM && x < leftM + widthM && y > topM && y< topM + heightM)//запрещаем цветному блоку выходить за пределы чернобелого
{
x = x - leftM;
y = y - topM;

$('#cursor').css({'left':e.pageX,'top':e.pageY,'background-position': -x + 'px'+' '+ -y   +'px'});//заставляем цветной блок бегать за мышкой, менять позицию фона.

}

});
});

l-liava-l, молодца
:) Ощущения забавное, как будто валеники прорезаны и красная панель ходит в дырке за валенком
И Задачка классная!

Чуть поправил стиль

http://hostjs-mybb2011.narod.ru/l_liava-_l.htm

Цитата:

Чуть поправил стиль

http://hostjs-mybb2011.narod.ru/l_liava-_l.htm

прикольно)

l-liava-l, забавно, напиши в ту ветку что то может автору топика пригодится..

Deff, баг
http://awesomescreenshot.com/05776xk70

beard,
Хм - я ж спецом отодвинул - дабы чуть выше казалась

смахивает на линзу, не важно если так надо, значит так надо, извини;)

beard,
Она как то не впечатляет когда без отрыва ... или нун реализовывать плавный переход в текущую ЧБ
Без отрыва = ощущение, что просто апликация

еще бы эта область появлалсь при наведении на изображение)
вот как здесь

http://vremenno.net/examples/jquery-zoomy-plugin/