Javascript-форум - Как сделать маску для рисунка

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

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как сделать маску для рисунка (https://javascript.ru/forum/misc/15285-kak-sdelat-masku-dlya-risunka.html)

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

Цитата:

Сообщение от dmitriymar (Сообщение 93429)

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

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

Цитата:

Сообщение от Aetae (Сообщение 93432)

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

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

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

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

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

Ну сделай 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>

Цитата:

Сообщение от Aetae (Сообщение 93458)

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

Спасибо!:victory: Именно то, что нужно. Я код пока не смотрел (сегодня вообще времени нет этим заниматься), но работает отлично:). А я думал завтра через canvas попробовать - заполнять полупрозрачным .fillStyle область вокруг рамки. Это так, может кому пригодится в других случаях:)