Agrandir " une " image au passage de la souris

Page 1 sur 2 1, 2  Suivant

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

Résolu Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Jeu 10 Mar 2011 - 16:12

Bonjour,

Je souhaiterais savoir s'il est possible de faire en sorte que suivant les images que je décide d'ajouter dans un post,
je puisse choisir telles ou telles images de façon que lorsque l'on passe la souris dessus celle ci s'agrandit automatiquement?
un genre de zoom réactif au passage de la souris...

Merci de vos aides.


Patricia

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Jeu 10 Mar 2011 - 17:07

Bonjour,

Il existe plusieurs solutions dont l'infobulle.

Je ne comprends pas trop votre idée de choix ( d'ajouter dans un post ) et le rapport au zoom !


Cordialement,

Ge

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Jeu 10 Mar 2011 - 18:51

Bonjour Ge80,

Pour exemple je vais créer un post pour un rassemblement moto, avec la description du programme. Puis en fin du post,
je rajoute l' affiche de ce rassemblement. En général, il suffit d'aller sur servimg et de récupérer le code de la miniature,
mais je souhaiterais changer et proposer d'insérer mon image on va dire en miniature et que lorsque l'on survole celle-ci,
elle s'agrandit sans clic...

pour exemple :

Spoiler:
et lorsque je passe sur la souris en lieu et place de la précédente j'aimerais "tiens d'ailleurs pourquoi y a t il écrit "agrandir cette image" ??

j'espere que je me suis bien expliquer Question reflexion

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Jeu 10 Mar 2011 - 18:55

Tout à fait.
Plusieurs solutions sont possibles

La plus simple est par codage HTML.

Voulez vous du texte en plus, des informations à afficher en plus de l'image ?
Dit autrement : Un zoom simple et rein d'autres ou quelque chose de plus sophistiqué !

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Jeu 10 Mar 2011 - 19:42

Re bonjour,

Non dans l'immédiat je cherche surtout à trouver le moyen d'afficher le zoom de l'image , si de plus je pourrais utiliser cette possibilité, par la suite pour d'autres image ou photo, cela serait le must Wink

Merci

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Jeu 10 Mar 2011 - 21:36

Pour voir l'effet si c'est celui désiré

A mettre dans votre message d'accueil pour test ou dans un widget.
Code:

<img src="http://i23.servimg.com/u/f23/09/03/38/33/th/pont0010.jpg" onmouseover="this.src='http://i23.servimg.com/u/f23/09/03/38/33/pont0010.jpg';" onmouseout="this.src='http://i23.servimg.com/u/f23/09/03/38/33/th/pont0010.jpg';">

<img src="url petite image" onmouseover="this.src='url image zoomée';" onmouseout="this.src='url petite image';">

si vous changer les images alors attention aux -> " (touche -> 3) et -> ' (touche -> 4) dans le code !

Ne fonctionne pas dans un message.

Dans un message : il faut utiliser la feuille de style CSS ou une page html externe ou un script externe.

(si vous êtes pressé Wink
Une solution combinant CSS et tableau est ici -> par -> Xuĕ -> Assistactive

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Jeu 10 Mar 2011 - 22:39

@ge80 a écrit:

Dans un message : il faut utiliser la feuille de style CSS ou une page html externe ou un script externe.

(si vous êtes pressé Wink
Une solution combinant CSS et tableau est ici -> par -> Xuĕ -> Assistactive

Re bonsoir,

Lorsque vous dites une page html ou un script externe, pourriez vous m'en dire un peu plus ?
Comment envisager et utiliser l'une ou l'autre de ces possibilités ?

Merci,

Patricia

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Jeu 10 Mar 2011 - 22:59

Avez-vous regardé le lien ci dessus ?
Une solution combinant CSS et tableau est ici -> par -> Xuĕ -> Assistactive

Cette solution simple combine la feuille de style et un peu de html dans le message.

Le script étant dé-validé dans les "messages / sujets" alors il faut implanter un script soit par ajout dans les templates ou par l'utilisation d'une page html ajoutée au forum.

Solution plus lourde que celle ci dessus Wink

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Jeu 10 Mar 2011 - 23:33

Re,


j'ai beau avoir mis le code css dans la feuille css après la page de gestion des couleurs dans le P.A et créer un tableau puis inserer le code image dans celui ci, rien à faire le tableau apparait mais l'image ne change pas de taille lorsque je passe dessus avec la souris............ Rolling Eyes

Question bete.....mais utile, on est bien d'accord en utilisant le tableau je peux mettre cela dans un message ???
Car si ce n'est pas le cas, cela ne me servira pas........ Crying or Very sad

Merci

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Jeu 10 Mar 2011 - 23:49

Je n'ai pas testé la solution à Xué mais je pense qu'elle est excellente.

Re-Vérifier.

Avez-vous autorisé l'html dans les messages.
Le tableau vient-il ou simplement le code ?

Avez-vous le lien de deux images (Sur le tuto de xué : une en look et l'autre en hidden) ?

code image 1 serait à remplacer par tout cela

Code:
<div class="lock">
  <img src="image un" />
  <div class="lock-hidden">
      <img src="image un bis" />
  </div>
</div>

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Ven 11 Mar 2011 - 0:07

scratch

Oui j'ai bien vérifier tout cela, même après avoir enlevé,
le pseudo des personnes lol.. mais rien à faire cela me mets bien le tableau et une des images soit la plus petite mais au survol rien !!

Je crois que c'est foutu ..................

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Ven 11 Mar 2011 - 0:10

foutu : Non pas du tout.


nous verrons demain une autre solution si celle ci ne fonctionne pas.

Je ne l'ai pas testée donc j'ignore les problèmes qu'elle pose.
C'est l'heure de I don't want that mais demain je testerai cette solution et vous en donnerez une autre si besoin.
C'est un problème simple donc pas de découragement hâtif.


ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Ven 11 Mar 2011 - 0:37

Mr. Green

Ok merci à vous

Bonne fin de soirée et puis vu l'heure,
très bonne nuit

Patricia

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Ven 11 Mar 2011 - 0:46

A tout à l'heure après le boulot Wink


victoire

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Ven 11 Mar 2011 - 9:15

Bonjour,

Après quelques heures de sommeil,
je n'ai pas réussi à faire en sorte que cela fonctionne...

What's happen ?!?

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Ven 11 Mar 2011 - 15:40

no_way va vous proposer une autre solution mais je vais quand même tester la solution à xué.

Bonne journée
ge

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par no_way le Ven 11 Mar 2011 - 16:13

Ola ge80 Wink
Bonjour Smile
Le code CSS:
Code:

/*INFOBULLE*/
a.infobulle{position:absolute;}
a.infobulle div{display:none;font-size:small;line-height:1em;vertical-align:bottom;padding:5px;text-align:center;}
a.infobulle:hover div{display:block;padding:0.1em;position:absolute;left:0%;top:0%;white-space:nowrap;z-index: 999;}
A modifier selon ses besoins bien entendu, le code HTML:
Code:

<a class="infobulle"><img src="URL image de base" /><div><img src="URL image zoomée" /></div></a>

Le résulat: ici

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

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

Résolu Re: Agrandir " une " image au passage de la souris

Message par FANCH 56 le Ven 11 Mar 2011 - 17:55

Bonsoir

Cette fonction (Rol-over) ne fonctionne plus sur les FA

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Ven 11 Mar 2011 - 18:32

Bonsoir

Un petit bilan.

La solution que j'ai proposée ne fonctionne (comme je l'ai dit) que dans le message d'accueil, une page html ou un widget)

La solution a Xué, que je viens de tester, fonctionne sans aucun souci et elle est équivalent à la solution classique par infobulle.
C'est simplement les noms et classes qui changent.

Vous avez donc fait des erreurs ou des oublis lors de vos essais.

Je vais mettre les images (et méthodes) illustrant la solution à Xué qui correspond plus à votre question.


code à mettre dans la feuille de style.
ICI-v

Le code est à copier à la fin ->
Ce code -v
Code:

.lock  {
  position: relative;
  cursor: pointer;
}
.lock .lock-hidden {
  /* positionnement du bloc qui apparait */
  display: none;
  position: absolute;
  top: 10px;
  left: 5px;
 
  /* style du bloc qui apparait */
  border: 2px solid blue;
  border-radius: 5px;
  background-color: red;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  text-align: center;
}
.lock:hover .lock-hidden {
  display: block;
}
Il faut valider

Le codage de votre message
L'image réduite et son ZOOM
Un exemple -v
Code:

<div class="lock">
  <img src="http://i23.servimg.com/u/f23/09/03/38/33/th/pont0010.jpg" />
  <div class="lock-hidden">
      Essai de GE-80

      <img src="http://i23.servimg.com/u/f23/09/03/38/33/pont0010.jpg" />

      Un pont qui est bien beau.
  </div>
</div>
ce qui donne -v


Le résultat avant le survol -v

Résultat en survol par la souris -v



.

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Ven 11 Mar 2011 - 20:32

Bonsoir

Merci à vous 2 Embarassed

Je ne sais pas si je dois dire/crier/hurler M**** ou si tout simplement on peu parler de Scoumoune !!

Cela ne fonctionne pas chez moi, confused

tous d'abord le code css
Spoiler:

puis le code insérer dans la fenêtre d'édition avec mes 2 images (petite + grande)
de plus je n'ai changer que les url des images ( votre texte je l'ai laissé pour être sure de ne rien modifier d'autre.
Spoiler:


et enfin la visualisation normal du post
Spoiler:

Il doit y avoir quelque chose qui bloque l'ouverture du css ou du codage dans la fenêtre d'édition !!
ou alors j'ai omis quelque chose dans la retranscription , mais alors c'est que je suis bien fatigué pour ne pas le voir Neutral

Bonne soirée

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Ven 11 Mar 2011 - 20:34

Une explication possible est un conflit avec un autre script.

N'avez-vous pas un autre script qui utilise le survol souris ?

Par exemple le changement d'opacité.

Edit : j'ai peut être trouvé votre problème
Code:
.row1, .row2, .row3, .row3Right {
filter:alpha(opacity=90);
-moz-opacity:0.9;
 -khtml-opacity: 0.9;
opacity: 0.9;
}

Essayer de le mettre en commentaire pour tester.
Code:

/*
.row1, .row2, .row3, .row3Right {
filter:alpha(opacity=90);
-moz-opacity:0.9;
 -khtml-opacity: 0.9;
opacity: 0.9;
}
*/



Dernière édition par ge80 le Ven 11 Mar 2011 - 20:42, édité 1 fois

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Ven 11 Mar 2011 - 20:41

@ge80 a écrit:Une explication possible est un conflit avec un autre script.

N'avez-vous pas un autre script qui utilise le survol souris ?

Par exemple le changement d'opacité.

Edit : j'ai trouvé votre problème Yahoo
Code:
.row1, .row2, .row3, .row3Right {
filter:alpha(opacity=90);
-moz-opacity:0.9;
 -khtml-opacity: 0.9;
opacity: 0.9;
}


Re bonsoir ,

Oui effectivement j'ai bien ce morceau de css
sur la même feuille ...... silent


ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Ven 11 Mar 2011 - 20:43

MDR

Je n'avais terminé l'édition du message avec la solution de test Wink

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Ven 11 Mar 2011 - 21:10

@ge80 a écrit:MDR

Je n'avais terminé l'édition du message avec la solution de test Wink

Dsl ..mais meme en mettant le morceau de css de coté,
rien pas de changement ...............

Non !

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Ven 11 Mar 2011 - 21:15

Mince, une autre partie de votre codage doit être en cause.


Un autre script dans votre forum ?

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Ven 11 Mar 2011 - 21:48

@ge80 a écrit:Mince, une autre partie de votre codage doit être en cause.


Un autre script dans votre forum ?

Oui certainement, mais le souci est que cela fait à peu près 2ans, que je n'ai plus touché aux templates,etc..
que je ne sais même plus quels sont exactement les modifications apportés.......arf......

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Ven 11 Mar 2011 - 22:09


Regarder la liste des templates modifiés dans "général"

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par tupac le Sam 12 Mar 2011 - 11:43

Bonjour

Petite question bête.
Avez vous bien autorisé le html dans votre profil.

1/ Profil
2/ Préférence
3/ Toujours autorisé le html

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Agrandir " une " image au passage de la souris

Message par ptiroutier68 le Sam 12 Mar 2011 - 13:50

@ge80 a écrit:
Regarder la liste des templates modifiés dans "général"

Bonjour Ge..........
Oui il y a des modifications, mais comme je le disais je ne sais plus lesquels ont été faites..........

@tupac a écrit:Bonjour

Petite question bête.
Avez vous bien autorisé le html dans votre profil.

1/ Profil
2/ Préférence
3/ Toujours autorisé le html

Bonjour Tupac,

Oui pas de soucis cela a bien été vérifier........

Merci

ptiroutier68
****

Féminin
Messages : 376
Inscrit(e) le : 01/09/2007

http://www.moto-au-feminin.com
ptiroutier68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Agrandir " une " image au passage de la souris

Message par ge80 le Sam 12 Mar 2011 - 14:00

En faisant les tests que se passe-t-il lorsque vous survolez l'image avec votre souris ?
Change t-telle légèrement d'opacité ?

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

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


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