Image cliquable qui "zoom" au survol
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Image cliquable qui "zoom" au survol
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):
Merci de bien vouloir m'aider !!
Cordialement,
J'ai utilisé ce code (x)html (Seconde technique):
- Code:
<div class="zoom1">
<p>
<a href="#" title="pensées de Giverny"></a>
</p>
</div>
- Code:
<div class="zoom1">
<p>
<a href="http://i69.servimg.com/u/f69/18/12/26/07/bistro10.gif" title="Bistro"></a>
</p>
</div>
- 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;
}
- 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;
}
Merci de bien vouloir m'aider !!
Cordialement,
Dernière édition par badibou le Sam 16 Nov 2013 - 23:31, édité 5 fois
Re: Image cliquable qui "zoom" au survol
Dernière édition par badibou le Ven 15 Nov 2013 - 7:37, édité 1 fois
Re: Image cliquable qui "zoom" au survol
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,
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,
Re: Image cliquable qui "zoom" au survol
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
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
Invité- Invité
Re: Image cliquable qui "zoom" au survol
Up! Bonjour !
SVP ! si vous savez les attributs et la class soyez gentil et aider moi !
Cordialement,
SVP ! si vous savez les attributs et la class soyez gentil et aider moi !
Cordialement,
Re: Image cliquable qui "zoom" au survol
Bonsoir .
Le mieux est d'utiliser tranform avec la valeur scale, ce qui peut donner un truc comme cela :
Cordialement .
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">
- Code:
.bistro{
transition-duration:1s;
}
.bistro:hover{
transform:scale(1.3);
-ms-transform:scale(1.3);
-webkit-transform:scale(1.3);
transition-duration:1s;
}
Cordialement .
Re: Image cliquable qui "zoom" au survol
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:
Cordialement,
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;
}
Cordialement,
Dernière édition par badibou le Sam 16 Nov 2013 - 2:14, édité 1 fois
Re: Image cliquable qui "zoom" au survol
Bonjour,
Cela fonctionne bien en prévisualisation mais sur ma page rien ne ce passe... voici mon image cliquable..
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" />
Re: Image cliquable qui "zoom" au survol
Bonsoir .
Mise à part si vous désirez des comportements différent pour chaque image garder la même class pour tous .
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 .
Mise à part si vous désirez des comportements différent pour chaque image garder la même class pour tous .
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 .
Re: Image cliquable qui "zoom" au survol
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,
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,
Re: Image cliquable qui "zoom" au survol
Bonjour .
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:
le CSS reste lui inchangé .
Cordialement ^^.
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">
le CSS reste lui inchangé .
Cordialement ^^.
Re: Image cliquable qui "zoom" au survol
Super ! Merci infiniment SeLfde4Th7
bon, pour ceux qui voudrons faire ceci voici ce que j'ai mis:
Et le CSS:
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">
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;
}
Sujets similaires
» Remplacer le lien cliquable d'une catégorie par une image, elle-même cliquable.
» Loupe sur image et Lien sur image cliquable : PB
» AwesomeBB : Zoom au clic sur image
» image MAP cliquable
» Problème d'image de fond lors de zoom
» Loupe sur image et Lien sur image cliquable : PB
» AwesomeBB : Zoom au clic sur image
» image MAP cliquable
» Problème d'image de fond lors de zoom
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum