Survolez les vignettes transparentes pour les afficher dans le grand cadre.
    Mon article d'hier était le dernier de la série mais, (et heureusement), une aimable et fidèle visiteuse me demande des précisions sur un type de montage que j'ai réalisé dernièrement (je crois que c'est celui-ci !) et que j'ai effacé de mon blog car je ne suis pas très conservateur, l'important à mes yeux, étant de savoir faire et refaire éventuellement mais pas de faire une encyclopédie: je n'ai pas les capacités de Michal ou Jean-Phi !

Comme il me semble plus intéressant de comprendre la construction d'un code plutôt que de le recopier sans savoir l'adapter à ses goûts, permettez-moi un commentaire sur le code de cet article que voici sèchement:
<p>
    <img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/nouvelle-caledonie-plage-luengoni-thumb-940x705-18458.jpg" id="surv" name="surv" />
  </p>
<p style="margin: -420px 0px 0px 10px; padding: 3px 0px 0px 0px; width: 575px; border: 2px solid white; opacity: 0.5;">
    <img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/nouvelle-caledonie-plage-luengoni-thumb-940x705-18458.jpg" onmouseover="surv.src='http://media1.voyages.woopic.com//medias/images/reportages/600x450/nouvelle-caledonie-plage-luengoni-thumb-940x705-18458.jpg'" style="width: 80px; border: 3px solid white; opacity: 0.5; margin: 0px 10px 0px 30px;" /> <img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/luxembourg-vieille-ville-thumb-940x705-18444.jpg" onmouseover="surv.src='http://media1.voyages.woopic.com//medias/images/reportages/600x450/luxembourg-vieille-ville-thumb-940x705-18444.jpg'" style="width: 80px; border: 3px solid white; opacity: 0.5; margin: 0px 10px 0px 10px;" /> <img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/belgique-tournai-cathedrale-thumb-940x705-18445.jpg" onmouseover="surv.src='http://media1.voyages.woopic.com//medias/images/reportages/600x450/belgique-tournai-cathedrale-thumb-940x705-18445.jpg'" style="width: 80px; border: 3px solid white; opacity: 0.5; margin: 0px 10px 0px 10px;" /> <img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/suisse-romande-mont-pelerin-thumb-940x705-18446.jpg" onmouseover="surv.src='http://media1.voyages.woopic.com//medias/images/reportages/600x450/suisse-romande-mont-pelerin-thumb-940x705-18446.jpg'" style="width: 80px; border: 3px solid white; opacity: 0.5; margin: 0px 10px 0px 10px;" /> <img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/liban-beyrouth-mosquee-amin-thumb-940x705-18447.jpg" onmouseover="surv.src='http://media1.voyages.woopic.com//medias/images/reportages/600x450/liban-beyrouth-mosquee-amin-thumb-940x705-18447.jpg'" style="width: 80px; border: 3px solid white; opacity: 0.5; margin: 0px 10px 0px 10px;" />
  </p>

Epluchons-le !
<p>
    <img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/nouvelle-caledonie-plage-luengoni-thumb-940x705-18458.jpg" id="surv" name="surv" />
  </p>
 <p style="margin: -420px 0px 0px 10px; padding: 3px 0px 0px 0px; width: 575px; border: 2px solid white; opacity: 0.5;">
    <img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/nouvelle-caledonie-plage-luengoni-thumb-940x705-18458.jpg" onmouseover="surv.src='http://media1.voyages.woopic.com//medias/images/reportages/600x450/nouvelle-caledonie-plage-luengoni-thumb-940x705-18458.jpg'" style="width: 80px; border: 3px solid white; opacity: 0.5; margin: 0px 10px 0px 30px;" />
<img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/luxembourg-vieille-ville-thumb-940x705-18444.jpg" onmouseover="surv.src='http://media1.voyages.woopic.com//medias/images/reportages/600x450/luxembourg-vieille-ville-thumb-940x705-18444.jpg'" style="width: 80px; border: 3px solid white; opacity: 0.5; margin: 0px 10px 0px 10px;" />
<img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/belgique-tournai-cathedrale-thumb-940x705-18445.jpg" onmouseover="surv.src='http://media1.voyages.woopic.com//medias/images/reportages/600x450/belgique-tournai-cathedrale-thumb-940x705-18445.jpg'" style="width: 80px; border: 3px solid white; opacity: 0.5; margin: 0px 10px 0px 10px;" />
<img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/suisse-romande-mont-pelerin-thumb-940x705-18446.jpg" onmouseover="surv.src='http://media1.voyages.woopic.com//medias/images/reportages/600x450/suisse-romande-mont-pelerin-thumb-940x705-18446.jpg'" style="width: 80px; border: 3px solid white; opacity: 0.5; margin: 0px 10px 0px 10px;" />
<img src="http://media1.voyages.woopic.com//medias/images/reportages/600x450/liban-beyrouth-mosquee-amin-thumb-940x705-18447.jpg" onmouseover="surv.src='http://media1.voyages.woopic.com//medias/images/reportages/600x450/liban-beyrouth-mosquee-amin-thumb-940x705-18447.jpg'" style="width: 80px; border: 3px solid white; opacity: 0.5; margin: 0px 10px 0px 10px;" />
  </p>

Le premier paragraphe contient l'adresse de la première image de fond et est "identifiée" afin qu'elle puisse être changée au survol des vignettes.
Le paragraphe des vignettes, encadré en blanc à opacité: 0.5 pour être discret sur le fond.
Les vignettes: chacune à un code très similaire. On y trouve dans l'ordre:
-l'adresse de l'image.
-Le changement de l'image identifiée (surv) au survol de la vignette.
-Sa largeur de vignette.
-Sa bordure blanche.
-Son opacité moitié (0.5).
-Son positionnement dans le paragraphe et par rapport aux autres vignettes.