une image qui s'aggggrandit!!!

Publié le 23 juin 2006 par Inigo

Lorsqu'on livre sur internet un texte long, une illustration réduite peut être agréable si elle ne coupe pas la lecture, et encore plus jolie si on en voit les détails. Cette page a été faite avec la feuille de style css écrite par Stu Nichols, sur base d'une image horizontale. J'ai simplement changé quelques paramètres pour adapter son script à mon image, verticale. Cela marche très bien sous FF, un peu plus hésitant sous IE. Mais c'est amusant dans les deux cas. Pour les fana de css...

EXPLICATIONS

Première chose à faire : charger la petite image sur laquelle on passera la souris. Chez moi elle s'appelle soleil1.gif. Elle fait 24x240 px. la zone qui agit est un carré de 24x24 px, à 24 px du bord gauche. Si vous faites votre propre image, il faut donc attirer l'attention du visiteur sur cette zone.

Deuxième chose: l'image proprement dite. La mienne s'appelle sic.jpg et elle fait 450x550 px.

Une fois les deux images préparées (se souvenir du chemin d'accès...), il suffit de copier le texte suivant et le coller en haut de la box du mode SOURCE de sa page :

******************************************************

<!--[if lte IE 6]>
<style type="text/css">
#magnifier li {position:static;}
#magnifier img {left:-264px;}
#magnifier li {height:20px;}
#magnifier a {display:block; width:24px; height:24px; left:24px; top:0; position:absolute; background:transparent;}
#magnifier a:hover {border:0;width:24px; height:24px; left:0;}
#magnifier a.aten:hover {border:0;width:24px; height:20px; left:24px;}
#magnifier a.aone:hover img {width:250px; height:306px;left:-240px}
#magnifier a.atwo:hover img {width:260px; height:316px;left:-216px}
#magnifier a.athree:hover img {width:280px; height:342px;left:-192px;}
#magnifier a.afour:hover img {width:300px; height:351px; left:-168px;}
#magnifier a.afive:hover img {width:325px; height:397px;left:-144px;}
#magnifier a.asix:hover img {width:350px; height:428px;left:-120px;}
#magnifier a.aseven:hover img {width:375px; height:458px; left:-96px;}
#magnifier a.aeight:hover img {width:400px; height:488px;left:-72px;}
#magnifier a.anine:hover img {width:425px; height:519px; left:-48px;}
#magnifier a.aten:hover img {width:450px; height:550px; left:-48px;}
#magnifier a.aeleven:hover img {width:240px; height:293px;left:-24px;}
</style>

<![endif]-->

**********************************************************

En haut du code, vous notez l'adresse de ma petite image soleil1.gif. Vous la remplacez par le chemin de votre propre petite image faite pour jouer le rôle d'un bouton zoomeur (ou vous gardez la mienne, ce n'est pas grave...)

explication : Il s'agit du style qui permettra de jouer sur l'apparence de mouvement de la grande image. Vous notez que Stu s'est fendu de deux codes, l'un pour FFox, l'autre pout IExplorer. Pas mal!

Pour intégrer l'aggrandissement de mon image sic.jpg (dont l'adresse sera mise plus tard), j'ai simplement fait le calcul pour que le rapport largeur hauteur soit le même qu'au départ de mon image, et j'ai fait attention à ce que l'image reste dans les limites de la colonne d'article (450px).

Vous pouvez prendre une autre largeur, une autre hauteur, et choisir des valeurs différentes dans la gradation de un à dix que propose Stu. Mais GARDEZ TOUJOURS la même proportion largeur/hauteur!
Voilà pour le style.

En vous mettant en mode normal, vous pouvez écrire votre article. Lorsque vous voulez mettre l'image, intégrez le texte suivant. Attention il est long et bizarre, etc'est de nouveau dans la boite du mode SOURCE que vous le collez.

************************************************************

 </tr>

 </tbody>
 </table>
 <!--[if lte IE 6]></a><![endif]--></li>
 </ul>
 </td>
 </tr>
 </tbody>
 </table>
 <!--[if lte IE 6]></a><![endif]--></li>

</ul>
 </td>
 </tr>
 </tbody>
 </table>
 <!--[if lte IE 6]></a><![endif]--></li>
 </ul> </td> </tr>

 </tbody>
 </table>
 <!--[if lte IE 6]></a><![endif]--></li>
 </ul> </td> </tr>
 </tbody>
 </table>
 <!--[if lte IE 6]></a><![endif]--></li>

 </ul> </td>
 </tr> </tbody>
 </table>
 <!--[if lte IE 6]></a><![endif]--></li>
 </ul> </td>
 </tr> </tbody>
 </table>
 <!--[if lte IE 6]></a><![endif]--></li>
 </ul>
 </td> </tr>
 </tbody> </table>
 <!--[if lte IE 6]></a><![endif]--></li>

 </ul>
 </td> </tr> </tbody>
 </table>
 <!--[if lte IE 6]></a><![endif]--></li>
 </ul>
 </td> </tr>

 </tbody> </table> <!--[if lte IE 6]></a><![endif]--></li>
 </ul> </td>
 </tr> </tbody> </table>
 <!--[if lte IE 6]></a><![endif]--></li>

</ul>
<div id="cover1">&nbsp;</div>
<div id="cover2">&nbsp;</div>
</div>
**************************************************************
Il suffit de remplacer mon image par la votre
(vous l'avez repérée, j'espère, au milieu du code). 
Et vous pouvez reprendre votre article en mode normal.
C'est fini!