Regardez cet exemple (avec un navigateur supportant :target ; Mozilla Firefox, Webkit ou Opera feront l'affaire). En cliquant sur les liens, vous naviguez entre les différentes images, tout ceci en un minimum de code et sans JavaScript ni PHP.
La première étape est la création d'une liste d'images et leurs noms, ceux-ci étant des liens. Par exemple :
<li id="one">
<p><a href="#one">Image 1</a></p>
<img src="../images/one.jpg">
</li>
Chaque élément de la liste a besoin d'un id, cela permettra l'utilisation d'une ancre, le lien href pointe vers l'id du li qui le contient. Cela permet à :target de fonctionner, c'est magique ! Toutes les images sont positionnées les unes par dessus les autres. En utilisant le sélecteur, nous changeons uniquement la valeur de la propriété z-index, et l'image cible se positionne au-dessus des autres images :
img { position: absolute; }
li:target img { z-index: 100; }
Facile ! Bien sûr, ceci est un exemple très basique, avec plus d'ingéniosité cela pourrait devenir un outil très utile.
Mise à jour : je viens de me rendre compte que Daniel Glazman a proposé un exemple assez similaire juste avant moi, voir en CSS-only tabs.
TARGET sous IE
Répondre avec citation
Partager