Membres connectés récemment
[PHPBB2] Créer un effet de zoom sur une image au passage
2 participants
Page 1 sur 1 • Partagez
- InvitéInvité
- Version du forum :PHPBB2
- Templates modifiés :oui
- Navigateur :Opera
Bonjour,
je cherche s'il vous plait, en "encodage" à mettre quand on upload une image et au passage de la souris elle s'agrandi. Je ne voudrais pas passer par un CSS ou un JS , est ce que c'est possible ?
Merci d'avance
mes amitiés
Prenez soin de vous
Lydie
je cherche s'il vous plait, en "encodage" à mettre quand on upload une image et au passage de la souris elle s'agrandi. Je ne voudrais pas passer par un CSS ou un JS , est ce que c'est possible ?
Merci d'avance
mes amitiés
Prenez soin de vous
Lydie
Hi Lydie
Sans ajouter de code CSS je ne vois pas comment agir sur une image en particulier.
Tu peux tenter avec ce code à la CSS :
Ensuite dans tes messages tu renseigne ce code pour l'image :
Au passage de la souris sur l'image tu auras un effet zoom
Sans ajouter de code CSS je ne vois pas comment agir sur une image en particulier.
Tu peux tenter avec ce code à la CSS :
- Code:
.zoom{
transition-duration:1s;
}
.zoom:hover{
transform:scale(1.3);
-ms-transform:scale(1.3);
-webkit-transform:scale(1.3);
transition-duration:1s;
}
Ensuite dans tes messages tu renseigne ce code pour l'image :
- Code:
<img src="URL-de-l'image.png" alt="image" class="zoom">
Au passage de la souris sur l'image tu auras un effet zoom
- InvitéInvité
Milouze14 a écrit:Coucou Lydie,
je ne saisie pas ta demande, sur un message ?
Si c'est pour l'hébergeur Servimg avant d'insérer l'image, c'est purement impossible chère amie.
bonsoir mon Phil, quand tu passes la souris tu vois l'image plus grande je voulais juste un "truc" à rajouter aux balises [img] mais je vais essayer le CSS de Splash
Splash a écrit:Hi Lydie
Sans ajouter de code CSS je ne vois pas comment agir sur une image en particulier.
Tu peux tenter avec ce code à la CSS :
- Code:
.zoom{
transition-duration:1s;
}
.zoom:hover{
transform:scale(1.3);
-ms-transform:scale(1.3);
-webkit-transform:scale(1.3);
transition-duration:1s;
}
Ensuite dans tes messages tu renseigne ce code pour l'image :
- Code:
<img src="URL-de-l'image.png" alt="image" class="zoom">
Au passage de la souris sur l'image tu auras un effet zoom
bonsoir Splash, je vais essayer votre méthode
- InvitéInvité
Splash ça fonction bien , merci mais, les membres je les vois mal mettre cet encodage
à défaut d'autre, je vais garder votre travail et merci à vous
- Code:
<img src="URL-de-l'image.png" alt="image" class="zoom">
à défaut d'autre, je vais garder votre travail et merci à vous
Hello Fred,
il vaut attendre sa réponse car pour l'instant, on ne sait pas grand chose sur sa demande.
De plus il y a des erreurs dans le style donné:
Tu indiques une durée (doublon) sur le hover (ce qui n'a aucun effet car tout doit se trouver sur l'image en elle même).
Ensuite, tu indiques la durée sur les navigateurs récents, puis sur le hover
les autres sauf Opera!!
Le style correcte est le suivant:
Pour le code html de l'image, restons dans le html5:
il vaut attendre sa réponse car pour l'instant, on ne sait pas grand chose sur sa demande.
De plus il y a des erreurs dans le style donné:
Tu indiques une durée (doublon) sur le hover (ce qui n'a aucun effet car tout doit se trouver sur l'image en elle même).
Ensuite, tu indiques la durée sur les navigateurs récents, puis sur le hover
les autres sauf Opera!!
Le style correcte est le suivant:
- Code:
.zoom
{
-moz-transition-duration:1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s ;
transition-duration:1s;
}
.zoom:hover
{
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
-o-transform:scale(1.3);
-ms-transform:scale(1.3);
transform:scale(1.3);
}
Pour le code html de l'image, restons dans le html5:
- Code:
<img src="URL-de-l'image.png" alt="image" class="zoom"/>
Lydie, il suffit d'ajouter un bouton à l'éditeur, regarde ce tuto : https://www.milouze14.com/t32326-resoluphpbb2-bouton-dans-l-editeur-de-texte?highlight=ajouter+un+menu+à+l+éditeur
@petitefeuille,
tu peux utiliser ce script en complément de la c.s.s, cela t'évitera d’ajouter une class, le script s'en occupera (sauf pour les smileys créés dans le P.A).
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Déposer ceci:
Penser a cliquer sur le bouton
tu peux utiliser ce script en complément de la c.s.s, cela t'évitera d’ajouter une class, le script s'en occupera (sauf pour les smileys créés dans le P.A).
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Déposer ceci:
- Code:
$(function(){
$('.postbody').find('div:not(.signature_div)').find('img:not([longdesc])').addClass('zoom');
});
Penser a cliquer sur le bouton
- InvitéInvité
Splash a écrit:Lydie, il suffit d'ajouter un bouton à l'éditeur, regarde ce tuto : https://www.milouze14.com/t32326-resoluphpbb2-bouton-dans-l-editeur-de-texte?highlight=ajouter+un+menu+à+l+éditeur
re :) bé c'est pas trop ça ... ça serait un bouton qui insère le code pour mettre l'image ... après je demandais si c'était possible hein ?
- InvitéInvité
Milouze14 a écrit:@petitefeuille,
tu peux utiliser ce script en complément de la c.s.s, cela t'évitera d’ajouter une class, le script s'en occupera (sauf pour les smileys créés dans le P.A).
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Déposer ceci:
- Code:
$(function(){
$('.postbody').find('div:not(.signature_div)').find('img:not([longdesc])').addClass('zoom');
});
Penser a cliquer sur le bouton
Oh c'est parfait mon phil !! je t'adoreeeeeeeee
vous êtes tout deux gentils et je vous remercie de m'avoir comprise déjà et de m'aider !
je vous souhaite une excellente soirée dans le confinement ...
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum