Agrandir " une " image au passage de la souris

+3
ge80
FANCH 56
no_way
7 participants

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

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 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,

Agrandir " une " image au passage de la souris 6ds2878Ge
ge80

ge80
Membre actif

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

http://www.tsi80.net/
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 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:

j'espere que je me suis bien expliquer Question reflexion
ptiroutier68

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

ge80
Membre actif

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

http://www.tsi80.net/
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 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

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

ge80
Membre actif

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

http://www.tsi80.net/
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 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

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

ge80
Membre actif

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

http://www.tsi80.net/
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 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

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

ge80
Membre actif

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

http://www.tsi80.net/
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 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

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

ge80
Membre actif

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

http://www.tsi80.net/
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 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

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 Ven 11 Mar 2011 - 0:46

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


victoire
ge80

ge80
Membre actif

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

http://www.tsi80.net/
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 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

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

ge80
Membre actif

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

http://www.tsi80.net/
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 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

no_way
Membre actif

Messages : 2214
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 Ven 11 Mar 2011 - 17:55

Bonsoir

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

FANCH 56
Membre actif

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

https://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 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
Agrandir " une " image au passage de la souris S42-267ea69
Le code est à copier à la fin -> Agrandir " une " image au passage de la souris S41-267ea61
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
Agrandir " une " image au passage de la souris S46-267ea8d

Le résultat avant le survol -v
Agrandir " une " image au passage de la souris S44-267ea75
Résultat en survol par la souris -v
Agrandir " une " image au passage de la souris S45-267ea85


.
ge80

ge80
Membre actif

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

http://www.tsi80.net/
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 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

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

ge80
Membre actif

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

http://www.tsi80.net/
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 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

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 Ven 11 Mar 2011 - 20:43

MDR

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

ge80
Membre actif

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

http://www.tsi80.net/
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 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 ...............

:no
ptiroutier68

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 Ven 11 Mar 2011 - 21:15

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


Un autre script dans votre forum ?
ge80

ge80
Membre actif

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

http://www.tsi80.net/
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 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

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 Ven 11 Mar 2011 - 22:09


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

ge80
Membre actif

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

http://www.tsi80.net/
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 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

tupac
Membre actif

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

http://codactif.monalliance.com/
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 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

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

ge80
Membre actif

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

http://www.tsi80.net/
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

- Sujets similaires

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