♪
La problématique▲
Notre exemple est assez simple. Il est constitué d'un en-tête, d'une vidéo, d'un lien "Eteindre la lumière" et d'un bloc latéral contenant des informations sur la vidéo. Dans le code ci-dessous, vous pouvez voir la div "command" qui contient l'interrupteur, la div "movie" qui contient la vidéo et la div "description" pour le bloc latéral.
<div id="container">
<div id="header">
<h1>Janko At Warp Speed</h1>
<h2>Retour à l'article</h2>
<div id="command">
<a class="lightSwitcher" href="#">Eteignez la lumière</a>
</div>
</div>
<div id="movie">
<object width="560" height="340">
<param name="movie" value="http://www.youtube.com/v/ihclINC-R-U&hl=fr_FR&fs=1&color1=0x3a3a3a&color2=0x999999" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/ihclINC-R-U&hl=fr_FR&fs=1&color1=0x3a3a3a&color2=0x999999"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340">
</embed>
</object>
</div>
<div id="description">
<p>Description de la vidéo</p>
</div>
</div>Le code CSS correspondant est assez simple :
body{
font-family: Arial, Sans-Serif;
font-size: 13px;
text-align: center;
margin: 0px;
}
#container{
width: 960px;
margin: 0px auto;
text-align: left;
overflow: hidden;
}
#movie{
border: solid 1px #dcdcdc;
float: left;
width: 560px;
text-align: left;
margin-right: 20px;
}
#description{
float: left;
width: 320px;
border: solid 1px #dcdcdc;
padding: 10px 20px;
}
.lightSwitcher{
background-image: url(light_bulb_off.png);
background-repeat: no-repeat;
background-position: left;
padding: 0 0 0 20px;
outline: none;
text-decoration: none;
}
.lightSwitcher:hover{
text-decoration: underline;
}Que la lumière... ne soit plus▲
Lorsque le lien "Éteignez la lumière" est cliqué, nous devons assombrir l'ensemble de la page. Tout sauf la vidéo. Cela peut être fait en utilisant une div ayant les mêmes dimensions que le document et un fond noir semi-transparent. Cette div doit être positionnée en absolute dans son plus proche élément parent positionné (voir Comment positionner un élément en absolute ?) qui est, dans notre exemple, la balise body, puis être étendue du coin supérieur gauche au coin inférieur droit.
Ajoutons donc une div, que l'on nommera "shadow" à la fin de notre code :
<div id="shadow"></div>et affectons-lui un style :
#shadow{
background-image :url(shade1x1.png);
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 100;
}Le point important est la propriété z-index. Pour pouvoir se placer au-dessus du reste du document, sa valeur doit être la plus élevée de tous les éléments de la page. Mais la vidéo est de type "embedded", elle restera donc visible. Il est facile de positionner la div en haut à gauche de la page et de lui donner une largeur de 100 %, mais pour déterminer la hauteur, c'est un peu plus complexe. Si nous fixons la hauteur à 100 %, cela ne couvrira toute la hauteur de la page que si le contenu dépasse la hauteur de la fenêtre, sinon, seul le contenu sera couvert.
Heureusement, jQuery fait cela tout seul
$(document).ready(function(){
$("#shadow").css("height", $(document).height()).hide();
});Et... action !▲
Le code précédent ajuste la hauteur de la div "shadow" à la hauteur du document puis la masque. En effet, nous ne voulons faire apparaître cette div que lorsque nous cliquons sur l'interrupteur. Nous ajoutons donc une gestion du clic sur celui-ci :
$(".lightSwitcher").click(function(){
$("#shadow").toggle();
});Si vous testez ce code, vous constaterez que cela fonctionne bien. L'interrupteur alterne l'affichage de la div "shadow" comme si on allumait ou éteignait la lumière. Le seul problème, c'est que l'interrupteur lui-même devient masqué, ce qui empêche de pouvoir recliquer dessus (et donc de rallumer la lumière).
La solution est simple : il suffit d'attribuer à l'interrupteur un z-index supérieur à la div "shadow". Pour pouvoir le faire, il faut d'abord positionner le lien (un z-index ne s'applique qu'aux éléments positionnés) en absolute. Nous devons donc aussi positionner la div "command" puisque le positionnement est calculé par rapport au plus proche conteneur lui-même positionné :
#command{
position: relative;
height: 25px;
display: block;
}
.lightSwitcher{
position: absolute;
z-index: 101;
background-image: url(light_bulb_off.png);
background-repeat: no-repeat;
background-position: left;
padding: 0 0 0 20px;
outline:none;
text-decoration: none;
}Désormais, tout fonctionne. Cependant, si vous regardez la page d'exemple, vous constaterez que le texte, sa couleur et l'icône changent lorsque l'interrupteur est actionné, afin de conserver une bonne visibilité de ces éléments lorsque la lumière est éteinte. Pour obtenir ce comportement, nous adaptons légèrement nos codes CSS et jQuery. Nous ajoutons une classe CSS pour apporter les changements et jQuery ajoutera ou supprimera cette classe.
.turnedOff{
color: #ffff00;
background-image: url(light_bulb.png);
}$(".lightSwitcher").click(function(){
$("#shadow").toggle();
if ($("#shadow").is(":hidden")){
$(this).html("Eteignez la lumière").removeClass("turnedOff");
}
else{
$(this).html("Rallumez la lumière").addClass("turnedOff");
}
});Nous avons donc maintenant un code entièrement fonctionnel :
body{
font-family: Arial, Sans-Serif;
font-size: 13px;
text-align: center;
margin: 0px;
position: relative;
}
#container{
width: 960px;
margin: 0px auto;
text-align: left;
overflow: hidden;
position: relative;
}
#movie{
border: solid 1px #dcdcdc;
float: left;
width: 560px;
text-align: left;
margin-right: 20px;
}
#description{
float: left;
width: 320px;
border: solid 1px #dcdcdc;
padding: 10px 20px;
}
#command{
position: relative;
height: 25px;
display: block;
margin: 25px 0 0 0;
}
.lightSwitcher{
position: absolute;
z-index: 101;
background-image: url(light_bulb_off.png);
background-repeat: no-repeat;
background-position: left;
padding: 0 0 0 20px;
outline: none;
text-decoration: none;
}
.lightSwitcher:hover{
text-decoration: underline;
}
#shadow{
background-image: url(shade1x1.png);
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 100;
}
.turnedOff{
color: #ffff00;
background-image: url(light_bulb.png);
}$(document).ready(function(){
$("#shadow").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#shadow").toggle();
if ($("#shadow").is(":hidden")){
$(this).html("Eteignez la lumière").removeClass("turnedOff");
}
else{
$(this).html("Rallumez la lumière").addClass("turnedOff");
}
});
});