Показать сообщение отдельно
  #6 (permalink)  
Старый 30.03.2011, 21:19
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Берешь 6 DIV'ов где то к примеру)))
1-й див будет поверх фотки, будет как площадка где будут все остальные дивы.
2-й див будет селектор как бы, то есть то самый квадрат которым ты выделяешь.
Остальные 4 дива будут затемнять остальное пространство фотографии (сверху, слева, снизу, справа)

Наверное как то так.
$(document).ready(function() {
	$('#photo').load(function() {
		var img = $(this).offset(), 
		    imgWidth = $(this).width(), 
		    imgHeight = $(this).height();
		$(document.body).append('<div style="position: absolute;top:'+
			img.top+'px;left: '+img.left+'px;width: '+imgWidth+'px;height: '+imgHeight+'px;" id="area"></div>');
		$('#area').append('<div style="position: relative;z-index: 5;top: 0px;left: 0px;width: '+imgWidth+'px;height: '+imgHeight+'px;border: 2px red dotted;" id="select"></div>');
		$("#select").resizable({
			containment: '#area',
			handles: 'all',
			resize: function(event, ui) {
				$('#top').css('top', '0').css('left', '0').css('height', $("#select").position().top).css('width', imgWidth);
				$('#left').css('top', $("#select").position().top).css('height', $("#select").height()+2).css('width', ui.position.left).css('left', '0');
				$('#bottom').css('top', $("#select").position().top+$("#select").height()+2).css('height', $('#area').height()-($("#select").position().top+$("#select").height())).css('width', imgWidth).css('left', '0');
				$('#right').css('top', $("#select").position().top).css('height', $("#select").height()+2).css('width', $('#area').width()-(ui.position.left+$("#select").width())).css('left', ui.position.left+$("#select").width());
			}
		});
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="top"></div>');
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="left"></div>');
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="bottom"></div>');
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="right"></div>');
	});
});

Код конечно ооооооочень далеко от идеального, но думаю суть прояснить сможет)) Требуется еще и плагин resizable.
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай

Последний раз редактировалось walik, 30.03.2011 в 21:25.
Ответить с цитированием