רוטר - |עזרה| זקוק לעזרה ולפתרון במערך ה Z-INDEX

האשכול	מחבר	תאריך כתיבה	מספר
זה בעייתי,	שמשון פישטונה	28.02.10 19:11	1
אני אבחן את האופציה ואעדכן בהתאם	שרון אורן	28.02.10 19:14	2
היה לי קצת זמן, אז כתבתי לך משהו קטן בJS,	שמשון פישטונה	28.02.10 22:30	3
הפתרון שלך עובד אבל לא בדיוק פותר לי את הבעיה	שרון אורן	01.03.10 13:53	4

האשכול

מחבר

תאריך כתיבה

מספר

זה בעייתי,

שמשון פישטונה

28.02.10 19:11

אני אבחן את האופציה ואעדכן בהתאם

שרון אורן

28.02.10 19:14

היה לי קצת זמן, אז כתבתי לך משהו קטן בJS,

שמשון פישטונה

28.02.10 22:30

הפתרון שלך עובד אבל לא בדיוק פותר לי את הבעיה

שרון אורן

01.03.10 13:53

מה שאתה עושה זה בוחר את האלמנטים שאתה רוצה להחשיך וזהו בערך, הכול נעשה בJS.

זאת המחלקה בJS:


var PartialBlackPage = function ()
{
	this.selected = null;
	this.current = null;
	
	this.select_elements = function (elements)
	{
		this.selected = elements;
	}
	
	this.execute = function ()
	{
		for (var el in this.selected)
		{
			this.current = document.getElementById(this.selected[el]);
			
			var createBlack = document.createElement("div");
			
			createBlack.style.top = this.current.offsetTop;
			createBlack.style.left = this.current.offsetLeft;
			
			createBlack.style.width = this.current.offsetWidth;
			createBlack.style.height = this.current.offsetHeight;
			
			createBlack.className = 'opacity';
			createBlack.setAttribute("class","opacity");
			
			this.current.parentNode.appendChild(createBlack);
		
		}
	}
}

השימוש הוא בצורה הבאה:


	var partialObject = new PartialBlackPage();
	var elements = ["test","test3"];
	
	partialObject.select_elements(elements);
	partialObject.execute();

כשElements מכיל את כול האלמנטים המוחשכים שלך בתוך מערך, דוגמא לשימוש:


<html>
	<head>
		<script src="partial_black.js" type="text/javascript"></script>
		<script type="text/javascript">
			window.onload = function ()
			{
				var partialObject = new PartialBlackPage();
				var elements = ["test","test3"];
				
				partialObject.select_elements(elements);
				partialObject.execute();	
			}
		</script>	
		<style type="text/css">
			div#test { width: 200px; height: 200px; border: 1px solid black;}
			div#test2 { width: 500px; height: 200px; border: 1px solid black;}
			div#test3 { width: 200px; height: 200px; border: 1px solid black;}
			.opacity {opacity: .75;filter: alpha(opacity=75); -ms-filter: "alpha(opacity=75)";-khtml-opacity: .75; -moz-opacity: .75; position: absolute;background-color: black;}
		</style>
	</head>
	<body>
		<div id="test">dasdas</div>
		<div id="test2">dsadasdasdas</div>
		<div id="test3">daskjdkasdas</div>
	</body>
</html>

אפשר גם לשחק עם אפקט הfade של jquery ולוותר על הappendChild.
תהנה.