Connexion

Récupérer mon mot de passe

Derniers sujets
» *RESOLU*[PHPBB2] Installation Messenger - Template modifié
par Milouze14 Sam 30 Mai 2020 - 20:16

» [PHPBB2] Cacher les infos du profil sous l'avatar, en hover
par Milouze14 Jeu 28 Mai 2020 - 18:54

» [AWESOMEBB] Supprimer le soulignement des liens
par Milouze14 Mer 27 Mai 2020 - 18:28

» *RESOLU*[PHPBB2] Champs du profil en fonction de la couleur de groupe.
par Milouze14 Mar 26 Mai 2020 - 17:54

» [PUNBB] Codage qeel
par Milouze14 Mar 26 Mai 2020 - 17:44

» [TOUTES VERSIONS] Changer les boutons Nouveau MP et Répondre au MP par du texte
par croklivre Lun 25 Mai 2020 - 18:25

» [TOUTES VERSIONS] Faire clignoter les images des nouveaux messages
par croklivre Lun 25 Mai 2020 - 18:17

» [PUNBB] Couleurs des Catégories et des cellules qui ne changent pas de couleurs
par Milouze14 Lun 25 Mai 2020 - 14:47

» [BESTOF] [AWESOMEBB] Modifier le en ligne hors ligne
par Milouze14 Dim 24 Mai 2020 - 5:38

» [AWESOMEBB] Taille de la zone.
par Milouze14 Dim 24 Mai 2020 - 5:38

» [PUNBB] Agencement du profil
par Milouze14 Sam 23 Mai 2020 - 19:06

» *RESOLU*[MODERNBB] Chatbox - Enlever les deux points après le pseudo
par Milouze14 Sam 23 Mai 2020 - 17:26

» *RESOLU*[PHPBB3] Anomalies certains éléments
par Milouze14 Sam 23 Mai 2020 - 16:05

» [AWESOMEBB]Refonte du profil dans un sujet.
par Milouze14 Sam 23 Mai 2020 - 3:31

» [PHPBB2] Alignement du champ masculin/féminin
par Milouze14 Jeu 21 Mai 2020 - 20:24

» *RESOLU*[PHPBB3] Supprimer des champs de contact
par Milouze14 Jeu 21 Mai 2020 - 16:59

» [AWESOMEBB] Supprimer cette ligne
par Milouze14 Mer 20 Mai 2020 - 20:02

» [AWESOMEBB] Supprimer cette zone
par Milouze14 Mer 20 Mai 2020 - 20:01

» *RESOLU*[PHPBB3] Title en double sur un bouton éditeur
par Milouze14 Mer 20 Mai 2020 - 17:16

» [AWESOMEBB] Modifier l'icône du bouton d'accueil
par YOUGATAGA Mer 20 Mai 2020 - 13:56

*RESOLU*[PHPBB2] Créer un effet de zoom sur une image au passage

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

petitefeuille
petitefeuille
Milouzien

Messagepetitefeuille le Sam 11 Avr 2020 - 10:05

  • 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


Dernière édition par petitefeuille le Sam 11 Avr 2020 - 19:52, édité 1 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Sam 11 Avr 2020 - 18:24

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.


Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Splash
Splash
Milouzien

MessageSplash le Sam 11 Avr 2020 - 19:03

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
petitefeuille
petitefeuille
Milouzien

Messagepetitefeuille le Sam 11 Avr 2020 - 19:16

@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 👍😁
petitefeuille
petitefeuille
Milouzien

Messagepetitefeuille le Sam 11 Avr 2020 - 19:23

Splash ça fonction bien , merci 😘 mais, les membres je les vois mal mettre cet encodage 😟

Code:
 <img src="URL-de-l'image.png" alt="image" class="zoom">

à défaut d'autre, je vais garder votre travail et merci à vous Merci
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Sam 11 Avr 2020 - 19:25

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:

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"/>


Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Splash
Splash
Milouzien

MessageSplash le Sam 11 Avr 2020 - 19:26

Splash
Splash
Milouzien

MessageSplash le Sam 11 Avr 2020 - 19:31

Hi Phil,
Ce code CSS serait même suffisant pour un zoom au survol :
Code:
.zoom {transition-duration : 1s;}
.zoom:hover {transform : scale(1.3);}
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Sam 11 Avr 2020 - 19:33

@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 Valid



Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Sam 11 Avr 2020 - 19:34



@Splash a écrit:
Hi Phil,
Ce code CSS serait même suffisant pour un zoom au survol :
Code:
.zoom {transition-duration : 1s;}
.zoom:hover {transform : scale(1.3);}


Oui, mais pour tous les navigateurs récents Merci


Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
petitefeuille
petitefeuille
Milouzien

Messagepetitefeuille le Sam 11 Avr 2020 - 19:37


re :) bé c'est pas trop ça ... oups1 ça serait un bouton qui insère le code pour mettre l'image ... après je demandais si c'était possible hein ? 😉
petitefeuille
petitefeuille
Milouzien

Messagepetitefeuille le Sam 11 Avr 2020 - 19:43

@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 Valid



Oh c'est parfait mon phil !!  je t'adoreeeeeeeee  Mercimill


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 ...  fr4 fr4
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Dim 12 Avr 2020 - 7:28

De rien Lydie,


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil





Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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