@Viddah
Un peu de css suffira à constituer une "boîte à images", comme celle-ci (60 images) :
http://sentrais.fr/images-1.htm
1_créer un class en css. Entre <head>_</head> :
<style type="text/css">
.boite {
z-index:4;
display:inline-block;
position:relative;
opacity:0.7;filter:alpha(opacity=70) }
.boite:hover {
opacity:1;filter:alpha(opacity=100);
cursor:crosshair }
.boite span {
display:none }
.boite:hover span {
z-index:5;
display:inline-block;
position:absolute;
top:0;
left:0 }
</style>
Ou définir l'agrandissement de la miniature en 'position:fixed' sur la page :
.boite:hover span {
z-index:5;
display:inline-block;
position:fixed;
top:50px;
left:50px }
L'intérêt du '.boite span {display:none}' est de forcer le chargement de tous les agrandissements à l'ouverture de la page. Les agrandissements seront conservés dans le cache du navigateur; puis ils seront affichés instantanément au survol du curseur ...
2_entre <body>_</body>
<div>
<a class="boite">
<img src="miniature1.png" alt="" />
<span><img src="agrandissement1.png" alt="" /><br />
TEXTE_1
</span>
</a>
<a class="boite">
<img src="miniature2.png" alt="" />
<span><img src="agrandissement2.png" alt="" /><br />
TEXTE_2
</span>
</a>
</div>
Modifié par zebulin (31 May 2010 - 12:11)
