une image qui s'aggggrandit!!!

Publié le 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...


                      • bapteme
 
 

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 :

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

<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">&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!

Publié dans projet

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

Martin 18/07/2006 20:21

C'est intéressant, mais est-ce qu'il y a une méthode sans les tables?

Inigo 23/07/2006 13:59

Le but de la méthode est de donner une impression de mouvement d'une image qui s'aggrandit progressivement.Donc c'est la meilleure méthode.Sinon, autant faire un clic popup qui fait apparaître l'image en grand dans une fenêtre. Et ça, c'est du simple html.