Styler les images agrandissables

Je vos propose dans ce tutoriel une quinzaine de codes qui vont vous permettre d'ajouter une petite coquetterie graphique à vos images agrandissables : une loupe apparaîtra au survol de la souris pour signifier à vos visiteurs que cette image s'agrandit. La loupe sera automatiquement ajoutée aux images suivantes de Jimdo :

  • les images agrandissables insérées via l'élément Image
  • les images agrandissables insérées via l'élément Texte avec image
  • les vignettes agrandissables insérées via l'élément Galerie d'images

Seules les images agrandissables seront affectées. Si l'image comporte un lien vers une page ou un site, la loupe n'apparaîtra pas (puisque cette image n'est pas agrandissable, mais liée... logique ;))

Démonstration du résultat

Comme d'habitude, Internet Explorer utilise un format propriétaire (images avec l'extension .cur). La loupe n'apparaît donc pas sous ce navigateur. En revanche, les codes fonctionnent très bien avec tous les autres navigateurs.

Promenez votre curseur sur les images pour voir apparaître le curseur personnalisé indiquant que l'image est agrandissable :

Images insérées via l'élément "Galerie d'images"

Image insérée via l'élément "Image"

Image insérée via l'élément "Texte avec image"

Ut haut ad est eosque nefariis crebris ad vocibus expediendum ad audaces orsi ut eosque eosque ad qui quae expediendum quidam autem baiolorum vocibus egere ad audaces baiolorum quae heiulans crebris quae audaces egere urbis ut usque crebris vivus ad homines audaces autem egere expediendum ut sunt orsi Luscus ad. Ut haut ad est eosque nefariis crebris ad vocibus expediendum ad audaces orsi ut eosque eosque ad qui quae expediendum quidam autem baiolorum vocibus egere ad audaces baiolorum quae heiulans crebris quae audaces egere urbis ut usque crebris vivus ad homines audaces autem egere expediendum ut sunt orsi Luscus ad.

Flèche vers le haut

Mode d'emploi des codes

En mode admin, rendez-vous dans la barre d'administration de votre site, cliquez sur Paramètres > Modifier le head et copiez-collez le code choisi dans le cadre de saisie qui apparaît :

Pour valider vos changements, n'oubliez pas de cliquer sur le bouton 

Flèche vers le haut

16 modèles de loupes

Je vous propose ci-dessous 16 modèles de loupes, avec le code à copier-coller qui va bien. Cependant, vous pouvez aussi utiliser votre propre image.

Modèle n°1

Curseur en image n°1 pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-zoom-1.png'), pointer;
}

/*]]>*/
</style>

Modèle n°2

Curseur n°2 en image pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-zoom-2.png'), pointer;
}

/*]]>*/
</style>

Modèle n°3

Curseur n°3 en image pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-zoom-3.png'), pointer;
}

/*]]>*/
</style>

Modèle n°4

Curseur n°4 en image pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-zoom-4.png'), pointer;
}

/*]]>*/
</style>

Modèle n°5

Curseur n°5 en image pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-zoom-5.png'), pointer;
}

/*]]>*/
</style>

Modèle n°6

Curseur n°6 en image pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-zoom-7.png'), pointer;
}

/*]]>*/
</style>

Modèle n°7

Curseur n°7 en image pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-zoom-9.png'), pointer;
}

/*]]>*/
</style>

Modèle n°8

Image n°8 pour les curseurs de Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-6.png'), pointer;
}

/*]]>*/
</style>

Modèle n°9

Image n°9 pour les curseurs de Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-8.png'), pointer;
}

/*]]>*/
</style>

Modèle n°10

Modèle de curseur n°10 pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-11.png'), pointer;
}

/*]]>*/
</style>

Modèle n°11

Modèle de curseur n°11 pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-12.png'), pointer;
}

/*]]>*/
</style>

Modèle n°12

Modèle de curseur n°12 pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-13.png'), pointer;
}

/*]]>*/
</style>

Modèle n°13

Modèle de curseur n°13 pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-15.png'), pointer;
}

/*]]>*/
</style>

Modèle n°14

Modèle de curseur n°14 pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-16.png'), pointer;
}

/*]]>*/
</style>

Modèle n°15

Modèle de curseur n°15 pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-17.png'), pointer;
}

/*]]>*/
</style>

Modèle n°16

Modèle de curseur n°16 pour Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-18.png'), pointer;
}

/*]]>*/
</style>
Flèche vers le haut

Utiliser votre propre image

Si vous souhaitez utiliser votre propre image de loupe, voici comment procéder :

1. Charger votre image en ligne

Une fois que vous avez trouvé votre image (faites en sorte à ce qu'elle soit transparente au format PNG) par exemple sur Google Images, uploadez votre image :

  • soit dans votre espace privé sur Jimdo (Design > Design personnel > Fichiers)
  • soit sur un hébergeur d'images gratuit type Imageshack
  • soit sur un hébergeur de fichiers (Dropbox, Archive-Host... )

Une fois l'image en ligne, récupérez son adresse URL.

2. Ecrire votre code CSS

Recopiez ce code en remplaçant l'URL (xxx en orange) par celle de votre image :

<style type="text/css">
/*<![CDATA[*/

/* Loupe sur les images agrandissables */

.cc-m-image-resizewrapper a[href="javascript:;"] img, .ccgalerie a[href="#"] img {
cursor: url('xxx'), pointer;
}

/*]]>*/
</style>

Insérez le code obtenu dans Jimdo comme expliqué dans le mode d'emploi de ce tutoriel.

J'attends vos commentaires

Écrire commentaire

Commentaires : 6
  • #1

    Happlay (mardi, 12 mars 2013 19:23)

    Merci Isa, mais ça ne fonctionne pas chez moi...
    J'ai pris ce code :
    <style type="text/css">
    /*<![CDATA[*/

    /* Loupe sur les images agrandissables */

    .cc-m-image-resizewrapper a img, .ccgalerie a img {
    cursor: url('http://sd-1.archive-host.com/membres/images/3347790973941088/cursor-6.png'), pointer;
    }

    /*]]>*/
    </style>

  • #2

    favoris (mardi, 12 mars 2013 19:35)

    Hello Happlay !

    Je viens de faire une MAJ du tutoriel : utilise le nouveau code que j'ai donné. Et attention : cela ne fonctionne que sur les images agrandissables, pas sur les images qui ont un lien pointant sur une autre page (j'ai volontairement fait la distinction entre les deux cas : loupe quand on agrandit, main quand il y a un lien vers autre part). Par ailleurs, pas de curseur visible avec IE.

    Tiens-moi au courant !

    Isa

  • #3

    Happlay (mercredi, 13 mars 2013 16:35)

    Ca fonctionne sur safari, chrome, firefox, mais ne fonctionne pas sur Opéra et IE !
    Merci beaucoup Isa !

  • #4

    Isabelle (mercredi, 13 mars 2013 16:48)

    Eh oui, c'est le problème : IE est un vieux dinosaure qu'il faut éviter d'utiliser... Beaucoup des modifs faites utilisent les CSS3 que tous les navigateurs sauf IE interprètent. Je l'ai signalé au début du tutoriel : avec IE, il faut utiliser un format spécial qui fait planter Firefox, donc...

    En revanche, ça fonctionne sur Opera chez moi (je suis sous Mac).

  • #5

    yidika (mardi, 14 mai 2013 16:28)

    Merci beaucoup ! votre site est une mine d'or !

  • #6

    carteducieltest (samedi, 14 septembre 2013 17:41)

    Oupsssssss encore moi ..........finalement les flèches haut/bas fonctionnent en mettant ton code plus le code à Gérard. J'espère que ça va continuer ainsi.
    Françoise Gourde

Ruban