Форум

Aetae · #11 (**permalink**) 21.02.2011, 13:19

Почему не очень подходит то?
Потому что 800p может оказаться мало?
Так сделай 8000px.
Или вооще табличкой, лол.)

Aljnk · #12 (**permalink**) 21.02.2011, 14:20

Сообщение от dmitriymar

а чтото сложного-больший контейнер вложи в меньший. меньшему отображать только то что внутри. и води больший относительно меньшего. хочешь водить меньший-води но тогда изменяй ещё координаты большего относительно меньшего

Честно говоря не совсем понимаю как можно сделать то, что я спрашивал, способом, что ты описал??? Это ничего не даст.

Сообщение от Aetae

Почему не очень подходит то?

Не подходит потому, затемнятся должен только фоновый рисунок, а все остальное нет. Но при этом прозрачный рисунок должен иметь возможность перемещатся над другими объектами на затемняя их.

dmitriymar · #13 (**permalink**) 21.02.2011, 14:22

Aljnk,
ты прав,я не правильно прочитал твой пост

Aetae · #14 (**permalink**) 21.02.2011, 14:28

Э-э, но если прозрачный рисунок будет над не затемнёнными объектами то его собсно не будет видно? Я таки до конца не понимаю чего ты хошь.=\

Aljnk · #15 (**permalink**) 21.02.2011, 14:56

Не, понял ты все правильно, просто рисунок не весь прозрачный - это типа рамки пустой внутри.

Aetae · #16 (**permalink**) 21.02.2011, 16:35

Ну сделай 2 элемента.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<style type="text/css">
	*{margin:0;padding:0;cursor:none}
	body {overflow:hidden;background:url('http://javascript.ru/forum/attachment.php?attachmentid=702&stc=1&d=1298243258') 50% 50%;}
	#container {margin:50px auto; position:relative;overflow:hidden;background-image:url('http://javascript.ru/forum/attachment.php?attachmentid=702&stc=1&d=1298243258');height:277px;width:417px; }
	#maskInner {
		position:absolute;
		border:800px solid #000;
		filter: alpha(opacity=80);
		-moz-opacity: 0.8;
		-khtml-opacity: 0.8;
		opacity: 0.8;
   }
   #maskOuter {position:absolute}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var mi=document.getElementById('maskInner').style;
		var mo=document.getElementById('maskOuter').style;
		var l=document.getElementById('container').offsetLeft;
		
		document.onmousemove=function(e){
			e||(e=window.event);
			mi.cssText='left:'+(e.clientX-899-l)+'px;top:'+(e.clientY-903)+'px';
			mo.cssText='left:'+(e.clientX-99)+'px;top:'+(e.clientY-53)+'px';
		}
	}
	</script>
</head>
<body>
	<div id="container">
		<img src="http://javascript.ru/forum/attachment.php?attachmentid=708&stc=1&d=1298314949" id="maskInner">
	</div>
	<img src="http://javascript.ru/forum/attachment.php?attachmentid=707&stc=1&d=1298314949" id="maskOuter">
</body>
</html>

Aljnk · #17 (**permalink**) 21.02.2011, 17:08

Сообщение от Aetae

Ну сделай 2 элемента.

Спасибо!

Именно то, что нужно. Я код пока не смотрел (сегодня вообще времени нет этим заниматься), но работает отлично

. А я думал завтра через canvas попробовать - заполнять полупрозрачным .fillStyle область вокруг рамки. Это так, может кому пригодится в других случаях

Форум

Справочник

Discord чат

Курсы javascript