une image qui s'aggggrandit!!!
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 :
******************************************************
<style type="text/css">
#magnifier {display:inline; position:relative; width:240px; height:320px; z-index:100; float:left; margin:0 20px 10px 0; background:url(http://62.233.33.215/0/26/87/71/details/soleil1.gif) no-repeat;}
#cover1 {position:absolute; top:0; left:0; width:24px; height:30px; background:transparent;}
#cover2 {position:absolute; top:0; left:48px; width:240px; height:30px; background:transparent;}
#magnifier img {position:absolute; width:240px; height:293px; top:30px; left:-240px;}
#magnifier ul {padding:0; border:0; margin:0; list-style-type:none;}
#magnifier li {display:block; width:24px; height:24px; position:absolute; left:24px; top:0; background:transparent;}
#magnifier li.one {left:0;}
#magnifier li:hover {width:24px; height:24px;left:0; }
#magnifier li.ten:hover {width:24px; height:24px; left:24px;}
#magnifier li.one:hover img {width:250px; height:306px;left:-240px}
#magnifier li.two:hover img {width:260px; height:316px;left:-216px}
#magnifier li.three:hover img {width:280px; height:342px;left:-192px;}
#magnifier li.four:hover img {width:300px; height:351px; left:-168px;}
#magnifier li.five:hover img {width:325px; height:397px;left:-144px;}
#magnifier li.six:hover img {width:350px; height:428px;left:-120px;}
#magnifier li.seven:hover img {width:375px; height:458px; left:-96px;}
#magnifier li.eight:hover img {width:400px; height:488px;left:-72px;}
#magnifier li.nine:hover img {width:425px; height:519px; left:-48px;}
#magnifier li.ten:hover img {width:450px; height:550px; left:-48px;}
#magnifier li.eleven:hover img {width:240px; height:293px;left:-24px;}
#magnifier table {border:0; padding:0; margin:0; border-collapse:collapse;}
</style>
<!--[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.
************************************************************
<div id="magnifier">
<ul>
<li class="one"><a href="#nogo" class="aone"><!--[if IE 7]><!--></a><!--<![endif]-->
<table> <tbody> <tr> <td> <ul>
<li class="two"><a href="#nogo" class="atwo"><!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tbody> <tr> <td> <ul>
<li class="three"><a href="#nogo" class="athree"><!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tbody> <tr> <td> <ul>
<li class="four"><a href="#nogo" class="afour"><!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tbody> <tr>
<td> <ul>
<li class="five"><a href="#nogo" class="afive"><!--[if IE 7]><!--></a><!--<![endif]-->
<table> <tbody>
<tr> <td>
<ul> <li class="six"><a href="#nogo" class="asix"><!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tbody>
<tr>
<td>
<ul>
<li class="seven"><a href="#nogo" class="aseven"><!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tbody>
<tr>
<td>
<ul>
<li class="eight"><a href="#nogo" class="aeight"><!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tbody>
<tr>
<td>
<ul>
<li class="nine"><a href="#nogo9" class="anine"><!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tbody>
<tr>
<td>
<ul>
<li class="ten"><a href="#nogo" class="aten"><!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tbody> <tr>
<td>
<ul> <li class="eleven"><a href="#nogo" class="aeleven"><!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tbody>
<tr><td>
<img src="http://62.233.40.83/0/26/87/71/details/sic.jpg" alt="bapteme" title="bapteme" /> </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> </td>
</tr> </tbody> </table>
<!--[if lte IE 6]></a><![endif]--></li>
</ul>
<div id="cover1"> </div>
<div id="cover2"> </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!