כיצד לממש החשכת המסך עם שקיפות.
בהרבה אתרים שמציגים וידיאו (כמו בנענע ואחרים) יש פיצ'ר מאוד נחמד, אפשר לצפות במסך מלא - אבל אם אין ברצונכם לצפות במסך מלא ועדיין אתם רוצים לצפות בלי שכל הפרסומות יציקו מסביב וכל צבעי האתר ישגעו אתכם - יש לחצן מעניין בשם "הדלק זרקור" (או משהו כזה).
לאחר לחיצה על הלחצן, המסך מוחשך (אבל שקוף) ורק הנגן עדיין בפעולה.
נתחיל.
נניח שהמסך שלנו נראה כך:
יש לנו מקטע שמציג את שם הסרט והלחצן "הדלק/כבה זרקור"
יש לנו מקטע שהסרט מתנגן.
יש לנו מקטע של תוכן ותמונות. (תמונה מעניינת בחרתי - לא ?)
אנחנו רוצים שבזמן לחיצה על "הדלק/כבה זרקור" - הזרקור ידלק במידה והוא מכובה - והפוך.
נוסיף את האלמנט הבא: (היכן שהוא בעמוד)
<div class="zarkorOff" id="forZarkor">
</div>
התפקיד של ה - div יהיה לכסות את כל המסך בזמן לחיצה, כמובן שבזמן טעינת העמוד הוא משוייך ל - class בשם zarkorOff
.zarkorOff
{
display: none;
width: 1px;
height: 1px;
top: -100px;
}
ברגע שנלחץ על "הדלק זרקור" נרצה לשנות את ה - div ל - class הבא
.zarkorOn
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 2500px;
background-color: rgb(69,69,69);
z-index: 8000;
display: inline;
filter: alpha(opacity=60);
background-color: rgba(69,69,69, 0.6);
}
נגדיר לו מיקום אבסולוטי (למי שלא מכיר את ההבדלים בין המאפיינים של position חשוב
לקרוא את זה)
נצמיד אותו לצד ימין ולמעלה של המסך בעזרת top ו - left
נרחיב אותו לכל העמוד וניתן לו גובה שבטוח יכסה את העמוד שלנו
נגדיר צבע רקע מתאים בעזרת rgb
נגדיר z-index מספיק גדול שיעלה על כל האלמנטים האחרים.
ונגדיר שקיפות (עבור IE8 בעזרת filter ועבור דפדפנים אחרים בעזרת rgba (שיעבוד גם ב - IE9
כמו שכבר כתבתי))
הבעייה היא שכאשר נלחץ על הלינק זה יכסה את כל המסך - כולל את הלינק בעצמו ולא נוכל ללחוץ שוב כדי לכבות אותו.
ולכן נגדיר גם את ה - class הבא
.PassZarkor
{
z-index: 9000;
position: relative;
background-color: Aqua;
}
וניתן אותו לאלמנט שעוטף את הוידיאו ואת הלינק.
שימו לב שה - z-index גדול מההגדרה של ה - class שהוגדר עבור ה - div
חשוב להגדיר את ה - position כ - relative היות שברירת המחדל היא static ואז הוא מתעלם מהגדרות של z-index
הנה הסקריפט
var on = false;
function change() {
if (on) {
document.getElementById('forZarkor').className = 'zarkorOff';
var objects = document.getElementsByTagName("object");
for (var i = 0; i < objects.length; i++) {
objects[i].style.display = 'block';
}
}
else {
document.getElementById('forZarkor').className = 'zarkorOn';
var objects = document.getElementsByTagName("object");
for (var i = 0; i < objects.length; i++) {
objects[i].style.display = 'none';
}
}
on = !on;
}
כל מה שצריך לעשות זה - לשנות את ה - class של ה - div.
הסיבה לקוד שמסתיר את כל התגים מסוג object - היא מכיוון שבדרך כלל יש לנו גם אובייקטי flash (פירסומות) על המסך, ולא משנה איזה z-index תגדירו הם תמיד יעלו על האלמנטים שלנו, ולכן אנחנו מסתירים את כל האלמנטים מסוג object.
לאחר לחיצה על הלינק - נקבל את המסך הבא