Image cliquable qui "zoom" au survol

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image cliquable qui "zoom" au survol

Message par badibou Mar 12 Nov 2013 - 22:34

Bonjour, je voudrais que mon image cliquable "zoom" lors du survol de la souris comme expliquer dans ce TUTO que j'ai trouvé sur le Web.

J'ai utilisé ce code (x)html (Seconde technique):

Code:
<div class="zoom1">
 <p>
  <a href="#" title="pensées de Giverny"></a>
 </p>
</div>
J'ai mis le (x)html comme ceci  :
Code:
<div class="zoom1">
 <p>
  <a href="http://i69.servimg.com/u/f69/18/12/26/07/bistro10.gif" title="Bistro"></a>
 </p>
</div>
Et ce code CSS(Seconde technique Variante):

Code:
.zoom1 {
width: 200px;
height: 267px;
background: url(pensees.jpg) no-repeat;
margin: 0 auto;
}
.zoom1 p, .zoom1 a {
height: 267px;
display: block;
margin:0
}
.zoom1 a:hover {
background: url(pensees.jpg) no-repeat 0 -267px;
cursor:help;
}
J'ai ajouté les adresses de l'image dans le CSS comme ceci:

Code:
.zoom1 {
width: 350px;
height: 80px;
background: url('http://i69.servimg.com/u/f69/18/12/26/07/bistro10.gif') no-repeat;
margin: 0 auto;
}
.zoom1 p, .zoom1 a {
height: 267px;
display: block;
margin:0
}
.zoom1 a:hover {
background: url('http://i69.servimg.com/u/f69/18/12/26/07/chtest10.gif') no-repeat 0 -267px;
cursor:help;
}
Mais rien ne ce passe pourquoi ?

Merci de bien vouloir m'aider !!

Cordialement,


Dernière édition par badibou le Sam 16 Nov 2013 - 23:31, édité 5 fois
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image cliquable qui "zoom" au survol

Message par badibou Mer 13 Nov 2013 - 22:11

Up ! Bonjour !

Les images cliquable que je voudrais "zoomé" au survol sont celles de mes cellules sur l'index du forum ex:

Image cliquable qui "zoom" au survol Exempl11

Est-ce possible ?

Même si ce ne l'est pas, une réponse, même petite, serait apprécié... Yes 

Cordialement,


Dernière édition par badibou le Ven 15 Nov 2013 - 7:37, édité 1 fois
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image cliquable qui "zoom" au survol

Message par badibou Jeu 14 Nov 2013 - 22:26

Up ! Bonjour !

Hier j'ai fais quelque test avec un autre code comme celui montré plus haut et ce la à donner des résultats plus ou moins concluant dans le sens que TOUS les images(même les boutons) grossissaient...

il y aurait-il moyen d'avoir la Class html ainsi que l'attribut CSS de la cellule que j'ai mis plus haut SVP ?

Merci de bien vouloir m'aider...

Cordialement,
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image cliquable qui "zoom" au survol

Message par Invité Ven 15 Nov 2013 - 0:17

Allo,

je ne suis pas très bon avec les codes (c'est pour ça que je demande toujours de l'aide lol), mais c'est une très bonne initiative de demandé, car je m'intéresse aussi à ça. Pour moi, ce serait un petit zoom sur les images dans les messages du forum.

Merci
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image cliquable qui "zoom" au survol

Message par badibou Sam 16 Nov 2013 - 0:18

Up! Bonjour !

SVP ! si vous savez les attributs et la class soyez gentil et aider moi !

Cordialement,
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image cliquable qui "zoom" au survol

Message par Self Sam 16 Nov 2013 - 0:47

Bonsoir Smile.

Le mieux est d'utiliser tranform avec la valeur scale, ce qui peut donner un truc comme cela :

Code:
<img src="http://i69.servimg.com/u/f69/18/12/26/07/bistro10.gif" alt="image" class="bistro">
Avec un peut de CSS :

Code:
.bistro{
 transition-duration:1s;
}

.bistro:hover{
 transform:scale(1.3);
 -ms-transform:scale(1.3);
 -webkit-transform:scale(1.3);
 transition-duration:1s;
}
Simple n'est-ce pas ?

Cordialement Smile.
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image cliquable qui "zoom" au survol

Message par badibou Sam 16 Nov 2013 - 2:00

Bonsoir et merci je vais essayé ça.. question... est-ce que je peux prendre le nom de chaque forum en le commençant par un . et le mettre dans le CSS ?

EX:
Code:
.bistro{
         transition-duration:1s;
        }
        
       .bistro:hover{
         transform:scale(1.3);
         -ms-transform:scale(1.3);
         -webkit-transform:scale(1.3);
         transition-duration:1s;
        }

        .sports{
         transition-duration:1s;
        }
        
       .sports:hover{
         transform:scale(1.3);
         -ms-transform:scale(1.3);
         -webkit-transform:scale(1.3);
         transition-duration:1s;
        }
Etc ?

Cordialement,


Dernière édition par badibou le Sam 16 Nov 2013 - 2:14, édité 1 fois
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image cliquable qui "zoom" au survol

Message par badibou Sam 16 Nov 2013 - 2:11

Bonjour,

Cela fonctionne bien en prévisualisation mais sur ma page rien ne ce passe... voici mon image cliquable..

Code:
<span>Le Bistro</span><img style="display:none" src="http://i69.servimg.com/u/f69/18/12/26/07/bistro10.gif" />
Bizarre...
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image cliquable qui "zoom" au survol

Message par Self Sam 16 Nov 2013 - 2:59

Bonsoir Smile .

Mise à part si vous désirez des comportements différent pour chaque image garder la même class pour tous Wink .
Et pourquoi mettre un display:none dans le code de votre image ?
Aussi je vous conseille de garder l'attribut alt="" il permet d'afficher quelque chose si votre image ne charge pas.
Dernière chose si vous ne garder pas la class class="bistro" dans le code de l'image cela ne fonctionnera pas.

Cordialement Smile .
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image cliquable qui "zoom" au survol

Message par badibou Sam 16 Nov 2013 - 8:01

Bonjour,

Le display;none dans le code "clic image" sert a ne pas dédoublé l'image dans la marge du haut... je crois..

Comme je le disais plus haut votre solution est super en prévisualisation mais l'image n'apparait pas dans mes cellules sur ma page du forum...

Dernière chose si vous ne garder pas la class class="bistro" dans le code de l'image cela ne fonctionnera pas.


J'ai plusieurs images à faire... je garde bistro tout de même ?

Merci de votre temps !

Cordialement,
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image cliquable qui "zoom" au survol

Message par Self Sam 16 Nov 2013 - 18:08

Bonjour Smile .

Il suffit de prendre le code html que je vous est donné et de simplement changer l'adresse de l'image.
Ainsi ça peut donner:
Code:

1er forum:
<img src="http://i69.servimg.com/u/f69/18/12/26/07/bistro10.gif" alt="image" class="bistro">

2ème forum:
<img src="http://www.aht.li/2099504/ava001.png" alt="image" class="bistro">

3ème forume:
<img src="http://www.aht.li/2122620/rouge.png" alt="image" class="bistro">
comme ici .

le CSS reste lui inchangé Wink .

Cordialement ^^.
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image cliquable qui "zoom" au survol

Message par badibou Sam 16 Nov 2013 - 23:03

Super ! Merci infiniment SeLfde4Th7 Yes

bon, pour ceux qui voudrons faire ceci voici ce que j'ai mis:

Code:
<span>titre</span><img style="display:none" src="http://votreimage.png" alt="image" class="bistro">
Coller ceci pour chaque image dans PA/Général/catégorie&Forum/ edit  /nom du forum

Et le CSS:

Code:
bistro{
         transition-duration:1s;
        }
        
       .bistro:hover{
         transform:scale(1.1);
         -ms-transform:scale(1.1);
         -webkit-transform:scale(1.1);
         transition-duration:1s;
        }
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum