Agrandir " une " image au passage de la souris
+3
ge80
FANCH 56
no_way
7 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Agrandir " une " image au passage de la souris
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
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
Re: Agrandir " une " image au passage de la souris
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
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
Re: Agrandir " une " image au passage de la souris
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 :
j'espere que je me suis bien expliquer
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
Re: Agrandir " une " image au passage de la souris
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é !
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é !
Re: Agrandir " une " image au passage de la souris
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
Merci
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
Merci
Re: Agrandir " une " image au passage de la souris
Pour voir l'effet si c'est celui désiré
A mettre dans votre message d'accueil pour test ou dans un widget.
<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é
Une solution combinant CSS et tableau est ici -> par -> Xuĕ -> Assistactive
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é
Une solution combinant CSS et tableau est ici -> par -> Xuĕ -> Assistactive
Re: Agrandir " une " image au passage de la souris
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é
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
Re: Agrandir " une " image au passage de la souris
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
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
Re: Agrandir " une " image au passage de la souris
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............
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........
Merci
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............
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........
Merci
Re: Agrandir " une " image au passage de la souris
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
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>
Re: Agrandir " une " image au passage de la souris
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 ..................
Re: Agrandir " une " image au passage de la souris
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 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.
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 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.
Re: Agrandir " une " image au passage de la souris
Ok merci à vous
Bonne fin de soirée et puis vu l'heure,
très bonne nuit
Patricia
Re: Agrandir " une " image au passage de la souris
A tout à l'heure après le boulot
Re: Agrandir " une " image au passage de la souris
Bonjour,
Après quelques heures de sommeil,
je n'ai pas réussi à faire en sorte que cela fonctionne...
Après quelques heures de sommeil,
je n'ai pas réussi à faire en sorte que cela fonctionne...
Re: Agrandir " une " image au passage de la souris
no_way va vous proposer une autre solution mais je vais quand même tester la solution à xué.
Bonne journée
ge
Bonne journée
ge
Re: Agrandir " une " image au passage de la souris
Ola ge80
Bonjour
Le code CSS:
Le résulat: ici
Bonjour
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;}
- 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- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Agrandir " une " image au passage de la souris
Bonsoir
Cette fonction (Rol-over) ne fonctionne plus sur les FA
Cette fonction (Rol-over) ne fonctionne plus sur les FA
Re: Agrandir " une " image au passage de la souris
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
Le codage de votre message
L'image réduite et son ZOOM
Un exemple -v
Le résultat avant le survol -v
Résultat en survol par la souris -v
.
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;
}
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>
Le résultat avant le survol -v
Résultat en survol par la souris -v
.
Re: Agrandir " une " image au passage de la souris
Bonsoir
Merci à vous 2
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,
tous d'abord le code css
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.
et enfin la visualisation normal du post
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
Bonne soirée
Merci à vous 2
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,
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
Bonne soirée
Re: Agrandir " une " image au passage de la souris
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
Essayer de le mettre en commentaire pour tester.
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
Re: Agrandir " une " image au passage de la souris
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
- 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 ......
Re: Agrandir " une " image au passage de la souris
MDR
Je n'avais terminé l'édition du message avec la solution de test
Je n'avais terminé l'édition du message avec la solution de test
Re: Agrandir " une " image au passage de la souris
ge80 a écrit:MDR
Je n'avais terminé l'édition du message avec la solution de test
Dsl ..mais meme en mettant le morceau de css de coté,
rien pas de changement ...............
:no
Re: Agrandir " une " image au passage de la souris
Mince, une autre partie de votre codage doit être en cause.
Un autre script dans votre forum ?
Un autre script dans votre forum ?
Re: Agrandir " une " image au passage de la souris
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......
Re: Agrandir " une " image au passage de la souris
Regarder la liste des templates modifiés dans "général"
Re: Agrandir " une " image au passage de la souris
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
Petite question bête.
Avez vous bien autorisé le html dans votre profil.
1/ Profil
2/ Préférence
3/ Toujours autorisé le html
Re: Agrandir " une " image au passage de la souris
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
Re: Agrandir " une " image au passage de la souris
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é ?
Change t-telle légèrement d'opacité ?
Page 1 sur 2 • 1, 2
Sujets similaires
» Agrandir une image au passage de la souris
» image réactive : modification de l'image au passage de la souris
» Agrandir un texte ou image au passage du curseur.
» Changement d'image au passage de la souris
» Image en titre au passage de la souris.
» image réactive : modification de l'image au passage de la souris
» Agrandir un texte ou image au passage du curseur.
» Changement d'image au passage de la souris
» Image en titre au passage de la souris.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum