Agrandir " une " image au passage de la souris

Page 2 sur 2 Précédent  1, 2

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

Rappel du premier message :

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 ptiroutier68 le Sam 12 Mar 2011 - 14:47

@ge80 a écrit: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é ?

En fait, justement il ne se passe rien Mr. Green

Et ce qui est embêtant c'est que je n'ai plus la copie des différents changement fait aux niveaux des différents templates,
ce qui fait que je n'ose plus y toucher de peur de perdre les modif déjà effectués...


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 Sam 12 Mar 2011 - 15:09

Une solution simple.

Sauvegarder le template viewtopic_body {s'il est modifié] et remettre le template de base (puis tester).

S'il n'y a aucun changement alors vous remettez le template modifié.
(puis publier).


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 - 15:17

Justement j'allais lui proposer cette solution.

Sinon essayez avec un autre code,celui-ci par exemple.

CSS
Spoiler:
Code:
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
}

.ienlarger a:hover{
 position:relative;
}
.ienlarger span img {
border: 1px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #000000;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:block;
top: 50px;
left: 90px;
z-index: 999;
}
.resize_thumb {
width: 150px;
height : auto;
}

Celui-la dans votre message
Code:
  <div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

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 - 18:09

Bonsoir,

Merci a vous 2...... Embarassed pour votre aide

Là, il y a déjà une superbe amélioration..........
Mais.........bah (c po possible c vraiment la scoumoune) oui voyez par vous même :

Spoiler:


en dehors du fait que cela me déplace la signature, il y aurait 2 ou 3 petits trucs à voir

Spoiler:


geek


Je crois avoir résolu le souci du deplacement du bloc signature ...

en fait, je mets le code pour les images dans un tableau d'une ligne et d'une colonne bounce


Dernière édition par ptiroutier68 le Sam 12 Mar 2011 - 18:12, édité 1 fois (Raison : derniere edition suite à eventuelle solution trouvé)

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 tupac le Sam 12 Mar 2011 - 18:51

Est-ce que tout fonctionne maintenant?

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 ge80 le Sam 12 Mar 2011 - 18:52

Cool

Pour mon information avez-vous touché aux templates ?

La différence entre les trois solutions est l'ajout d'une balise "inutile à priori" Wink
J'aimerai avoir cette information pour comprendre le défaut spécifique pour votre forum de la solution à Xué.

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 Sam 12 Mar 2011 - 18:53

@tupac a écrit:Est-ce que tout fonctionne maintenant?

Re..

A 1ere vue, cela fonctionné en intégrant le code image dans un tableau et si je ne mets pas celui ci, toute la partie signature se décale. Donc je suppose que le tableau est nécessaire...une grande avancé yes meccchhhhhi Mr. Green

Par contre, y a t il un moyen de modifier le css au niveau de la 2eme image, c'est a dire faire en sorte que la taille de l'image soit aléatoire ou plutot que celle ci s'affiche avec sa taille originale et non en mode restreint ..

Vous comprendrez que maintenant que j'ai une possibilité de faire cela, je vais l'utiliser plus souvent et toutes les images ou photos n'auront pas la même taille d'affichage ..

Cette question aussi puisque lorsque j'ai fait l'essai avec l'affiche, l'aperçu de l'image est réduite par rapport à sa taille réel et de plus cela déforme le conteneur ( le cadre noir) et indique " clique ici pour agrandir " en plein milieu de l'aperçu....

En attendant de vous lire, encore une fois merci à vous 2 pour votre temps passé à essayer de m'aider. Embarassed


Dernière édition par ptiroutier68 le Sam 12 Mar 2011 - 18:57, édité 1 fois

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 ptiroutier68 le Sam 12 Mar 2011 - 18:56

@ge80 a écrit:Cool

Pour mon information avez-vous touché aux templates ?

La différence entre les trois solutions est l'ajout d'une balise "inutile à priori" Wink
J'aimerai avoir cette information pour comprendre le défaut spécifique pour votre forum de la solution à Xué.

Désolée je répondais en même temps par rapport aux petits soucis restant..

Oui tout a fait le template que vous me demandiez de vérifier à été modifié,
par contre vous dire ce qui à été fait je ne saurais vous l'indiquer,
seule solution serait peut être de vous le faire parvenir en mp.

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 - 18:58

Merci mais un autre problème se pose :

Si votre partie signature se décale ceci indique l'absence d'une balise fermante ou une copie partielle du code.

Ceci pourrait expliquer une partie des problèmes en cours 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 Sam 12 Mar 2011 - 19:26

@ge80 a écrit:Merci mais un autre problème se pose :

Si votre partie signature se décale ceci indique l'absence d'une balise fermante ou une copie partielle du code.

Ceci pourrait expliquer une partie des problèmes en cours Wink

J'ai copié/collé le code que m'a notifié "tupac" d'abord tout simplement en le mettant
dans la fenêtre d'édition, puis comme cela décalais la partie complète de la signature,
j'ai pensé aux essais de hier soir avec le tableau et avec celui ci cela fonctionne.

Sauf au niveau de l'encadrement noir qui lui est déformé si l'on puis dire ainsi,
car ma 2eme image est plus grande que celle de l'essai. Maintenant faudrait
trouver le moyen de faire en sorte que l'info bulle soit malléable, se modifie ou modifiable en fonction de la taille..

Siffleur

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 ptiroutier68 le Dim 13 Mar 2011 - 19:47

Bonsoir Smile

Ge80 et Tupac, je suis désolée mais j'aurais encore besoin de vous,
afin de résoudre le problème d'apparence,
concernant la bulle (si je puis dire ainsi) contenant l'image agrandit..

Comme je le précisais dans le pôst précédent le contour est déformé et
de plus le texte indiquant qu'il faut cliquer pour agrandir se trouve en plein
milieu de l'image, en gros tout est en vrac..

Spoiler:


Merci à vous de votre aide.

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 tupac le Dim 13 Mar 2011 - 19:52

Bonjour

Pouvez-nous donner votre code css et le code que vous mettez dans votre message svp.

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 Pakodar le Dim 13 Mar 2011 - 20:14

Bonjour,
Je vous propose un truc plus simple, en HTML:
Code:
<img src="ADRESSE DE L'IMAGE (petite)" border="0"onMouseOver="this.src='ADRESSE DE L'IMAGE (grande)'" onMouseOut="this.src='ADRESSE DE L'IMAGE (petite)'">

Ici, la grande image remplace la petite, sans cadre, sans rien. (Merci à Isolde pour m'avoir montré comment faire! Very Happy)
J'espère que c'était ce que vous cherchiez Smile

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar 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 Dim 13 Mar 2011 - 20:31

@tupac a écrit:Bonjour

Pouvez-nous donner votre code css et le code que vous mettez dans votre message svp.

alors là je n'y comprends vraiment rien, je suis retourné sur le post puis édition,
et je ne sais pourquoi mais l'image est normalement agrandit,
le cadre noir n'est pas déformé et je ne vois plus le texte: clique pour agrandir l'image

voici le script que je mets dans la fenêtre d'édition:
A ce propos, au niveau de l'url que je viens de colorisé en rouge foncé,
pour montrer que je parle de celle-ci,
je suppose que je peux la remplacer ....

Spoiler:
Code:
 [table border="1"][tr][td]  <div class="ienlarger"><a href="[color=darkred]http://www.dynamicdrive.com/[/color]"><img src="http://i62.servimg.com/u/f62/11/82/98/47/vignet11.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://i62.servimg.com/u/f62/11/82/98/47/vignet10.jpg" alt="large" />
 
    Affiche " Rassemblement - Les Motards Du Viaduc ".</span></a></div>[/td][/tr][/table]

Arf, il y a quand même un hic, j'ai parlé trop vite !!! vu que cela fonctionnait je suis allé placé le script dans le post
définitif et là lors de la prévisualisation, rebelote à nouveau déformé !!


voici le css :
Spoiler:

Code:
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
}

.ienlarger a:hover{
 position:relative;
}
.ienlarger span img {
border: 1px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #000000;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:block;
top: 50px;
left: 90px;
z-index: 999;
}
.resize_thumb {
width: 150px;
height : auto;
}

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 ptiroutier68 le Dim 13 Mar 2011 - 20:53

@Pakodar a écrit:Bonjour,
Je vous propose un truc plus simple, en HTML:
Code:
<img src="ADRESSE DE L'IMAGE (petite)" border="0"onMouseOver="this.src='ADRESSE DE L'IMAGE (grande)'" onMouseOut="this.src='ADRESSE DE L'IMAGE (petite)'">

Ici, la grande image remplace la petite, sans cadre, sans rien. (Merci à Isolde pour m'avoir montré comment faire! Very Happy)
J'espère que c'était ce que vous cherchiez Smile

Bonsoir Pakodar,

Merci pour votre réponse, malheureusement cela ne fonctionne pas, c'est un des 1er script qui à été essayé.
mais en vain......... Merci à vous et à Isolde pour le partage, mais comme dit dans mon cas cela ne fonctionne pas.

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 tupac le Dim 13 Mar 2011 - 20:59

Bon j'ai donc testé votre code et je ne rencontre aucun problème il fonctionne a la merveille.
J'ai rajouté quelque chose dans votre code pour pouvoir régler la hauteur et la largeur de l'image qui apparait un petit plus bien pratique.

J'ai une question,a quel endroit vous placiez votre phrase "agrandir cette image" parce c'est elle qui fait défaut chez vous.

Pour mon teste j'ai placé la phrase en début de code.
Spoiler:
Code:
Agrandir cette image
 [table border="1"][tr][td]  <div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://i62.servimg.com/u/f62/11/82/98/47/vignet11.jpg" alt="thumb" class="resize_thumb" /><span>
 <img src="http://i62.servimg.com/u/f62/11/82/98/47/vignet10.jpg" height="500" width="430" alt="large" />
 
Affiche " Rassemblement - Les Motards Du Viaduc ".</span></a></div>[/td][/tr][/table]


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 Dim 13 Mar 2011 - 21:36

@tupac a écrit:
J'ai rajouté quelque chose dans votre code pour pouvoir régler la hauteur et la largeur de l'image qui apparait un petit plus bien pratique.
J'ai une question,a quel endroit vous placiez votre phrase "agrandir cette image" parce c'est elle qui fait défaut chez vous.

Je viens d'insérer le code dans son post définitif...à 1ere vu maintenant ça fonctionne comme pour le 1er essai dans un
autre post non visible pour les membres. Ce que je ne comprends pas c'est qu'en dehors du morceau de code pour la taille
de l'image une fois agrandit, rien n' a été modifié...pourquoi avant il ne fonctionnait pas ? scratch

Par contre ce n'est pas moi qui mettait " agrandir l'image ", ceci à apparut il y a quelques temps et depuis
dés qu'il y a une image ça mets cette phrase..ne serait ce pas un ajout de FDF ....surement une fonction
ajouté récemment et j'ai du loupé, l'info.. I don't want that

Puis je me permettre une dernière petite question ?

Peut on éventuellement ajouter au code concernant la petite image (soit la vignette) ,aussi un moyen de modifier la taille ?
c'est a dire, si maintenant la taille n'est pas satisfaisante pour X raison, pouvoir rattraper le coup en insérant la taille voulu
directement via le code...et si la taille est bonne à ce moment la laisser les "" vides...est ce faisable ? reflexion

Merci

PS: je pose la question car la vignette au depart est plus petite et là, je ne sais pour quelle raison elle apparait un peu
plus grande et Floue...


Dernière édition par ptiroutier68 le Dim 13 Mar 2011 - 21:43, édité 1 fois (Raison : rajout du post scriptum)

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 tupac le Dim 13 Mar 2011 - 23:03

Voila vous pouvez maintenant régler les dimensions de la petite image et de la grande.
Part contre je me suis permit de retirer la table que vous aviez rajouté,en fait elle ne sert a rien en tout cas chez moi.
Vous pouvez aussi mettre URL d'un site de votre choix a l'emplacement indiqué et pour se problème de flou sur la petite image c'est parce que vous avez du l'agrandir,au départ je pense qu'elle devait être plus petite.

Spoiler:
Code:
 <div class="ienlarger"><a href=" ici l'url d'un site de votre choix "><img src="http://i62.servimg.com/u/f62/11/82/98/47/vignet11.jpg" height="220" width="150" alt="petite" class="resize_thumb" /><span>
 <img src="http://i62.servimg.com/u/f62/11/82/98/47/vignet10.jpg" height="500" width="430" alt="grande" />
 Affiche " Rassemblement - Les Motards Du Viaduc ".</span></div>

Ah oui j'allais oublié comme vous pouvez maintenant régler les dimensions de votre petite image a partir du code HTML vous devez retiter du code CSS cette partie qui se trouve tout en bas du code.
Code:
.resize_thumb {
width: 150px;
height : auto;
}
N'hésitez pas si vous avez encore des questions.

Bonne fin de soirée

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 Mer 16 Mar 2011 - 10:43

oups , désolée quelques petits soucis..
je reviendrais sur le post vous donner des infos,
en fin de journée, suite à ces dernières modification.

@ plus tard, 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 tupac le Mer 16 Mar 2011 - 11:19

No problème.

Bonne journée.

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 le ch'ti le Mer 16 Mar 2011 - 11:21

merci du tuyau sa marche nikel, vraiment cool

le ch'ti
***

Masculin
Messages : 111
Inscrit(e) le : 07/11/2009

http://www.sporting-toulon.com
le ch'ti 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 Lun 21 Mar 2011 - 11:47

@tupac a écrit:Voila vous pouvez maintenant régler les dimensions de la petite image et de la grande.
Part contre je me suis permit de retirer la table que vous aviez rajouté,en fait elle ne sert a rien en tout cas chez moi.
Vous pouvez aussi mettre URL d'un site de votre choix a l'emplacement indiqué et pour se problème de flou sur la petite image c'est parce que vous avez du l'agrandir,au départ je pense qu'elle devait être plus petite.

Spoiler:
Code:
 <div class="ienlarger"><a href=" ici l'url d'un site de votre choix "><img src="http://i62.servimg.com/u/f62/11/82/98/47/vignet11.jpg" height="220" width="150" alt="petite" class="resize_thumb" /><span>
 <img src="http://i62.servimg.com/u/f62/11/82/98/47/vignet10.jpg" height="500" width="430" alt="grande" />
 Affiche " Rassemblement - Les Motards Du Viaduc ".</span></div>

Ah oui j'allais oublié comme vous pouvez maintenant régler les dimensions de votre petite image a partir du code HTML vous devez retiter du code CSS cette partie qui se trouve tout en bas du code.
Code:
.resize_thumb {
width: 150px;
height : auto;
}
N'hésitez pas si vous avez encore des questions.

Bonne fin de soirée


Bonjour Tupac,

Désolée pour le retard mais comme je le disais j'ai quelques soucis, de plus je n'arrive pas à trouver les solutions,
avec les templates pour le bon fonctionnement avec Facebook...je suis en train de m'arracher les cheveux.

Bref!!

Alors concernant notre sujet, maintenant cela fonctionne mais je suis obligé de mettre le code dans un tableau,
sinon cela ne fonctionnerait pas.

Je préfère rajouter le tableau quitte à ne pas mettre d'épaisseur au niveau du contour et ça le fait très bien.

Encore milles merci de vos aides à tous.

Bonne journée, pour ma part le souci est résolu.

Patricia cheers

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.

Page 2 sur 2 Précédent  1, 2

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