Changement d'image au passage de la souris

2 participants

Page 1 sur 2 1, 2  Suivant

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

Résolu Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 10:58

Bonjour,
J'aimerais savoir comment on change d'image au passage de la souris. Vous me direz, il y a déjà un tutoriel, je m'explique: dans la barre "Adresse de l'image" d'un forum, je mets une image, et j'aimerais qu'au passage de la souris, elle laisse la place à une autre image. Comment fait-on s'il-vous-plaît?
Merci d'avance.
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 11:08

Bonjour

On peut le faire avec les infobulles.
Beaucoup d'exemple sur ce forum avec CSS et codage.

recherche
Avez-vous regardé ces exemples ?

Cordialement,

Changement d'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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 11:23

ah, je ne savais pas que ça existé les "infosbulles" Smile
Merci, je vais regarder ça Smile
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 11:35

Et demandez de l'aide si vous n'arrivez pas à faire fonctionner VOTRE code.

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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 13:29

Il va falloir m'expliquer des trucs.... je vais faire simple:
Comment fait-on un changement d'image au passage de la souris? Smile Non, je déconne, il faut être sérieux...
Bon:
à quoi sert ce type de code, que j'ai aperçu, comment cela marche-t-il? Pourriez-vous, s'il-vous-plaît, m'aider à identifier les euh... codes, parties qui le composent?
Code:
a.imginfo span {
  display: none;
}

a.imginfo:hover {
  background: none;
  z-index: 500;
  cursor: help;
}

a.imginfo:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 30px;
  left: 20px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 3px solid #b6b6b6;
}

- Enfin, pour ce code qui suit, "lien sur lequel l'infobulle apparaît", cela peut être une image?
Code:
<a class="imginfo">Lien sur lequel l'infobulle apparaît
<span>Le texte qui apparaît dans l'infobulle</span>
</a>
Merci d'avance.
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 13:38

Le code CSS est pour le fonctionnement de votre bulle.

imginfo est le nom de la classe.

a info span est l'appel pour cacher le texte de survol
< a class="imginfo"> Lien......

a info:hover est l'appel lors du survol et la mise en forme

a info:hover span est la partie qui gère le texte à afficher lors du survol


le code suivant est à mettre dans un sujet.

Code:
<a class="imginfo">Lien sur lequel l'infobulle apparaît
<span>Le texte qui apparaît dans l'infobulle</span>
</a>
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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 13:44

ge80 a écrit:
imginfo est le nom de la classe.
ce qui veut dire?
après, j'essaierais de créer l'infobulle, mais avant où faut-il que je mette ceci:
Code:
a.imginfo span {
  display: none;
}

a.imginfo:hover {
  background: none;
  z-index: 500;
  cursor: help;
}

a.imginfo:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 30px;
  left: 20px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 3px solid #b6b6b6;
}

et ceci:
[/code]a class="imginfo">Lien sur lequel l'infobulle apparaît
<span>Le texte qui apparaît dans l'infobulle</span>
</a>[/code]
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 13:55

le code CSS est ici
Changement d'image au passage de la souris  Fs-23d96f3

et dans le code class="imginfo" est l'appel de votre style pour cette classe.
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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 13:57

ok, je vais voir, si j'ai des problèmes, je re-poste en attendant merci :thanks:
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 14:05

n'oubliai pas un sujet avec ceci à l'intérieur

<a class="imginfo">Lien sur lequel l'infobulle apparaît
<span>Le texte qui apparaît dans l'infobulle</span>
</a>

Code:
<a class="imginfo">Lien sur lequel l'infobulle apparaît
<span>Le texte qui apparaît dans l'infobulle</span>
</a>

il faudra aussi que l'html soit activé sur 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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 16:33

Bon, là, j'ai du mal study scratch
.........................................
-Faut-il que je mette quelque chose dans la page de "Voir le CSS de base de votre forum"?

- <a class="imginfo">Lien sur lequel l'infobulle apparaît
<span>Le texte qui apparaît dans l'infobulle</span>
</a>
c'est à mettre dans un sujet ou le CSS? ou les 2?

- pourriez-vous me mettre... euh... je fait un exemple:

Code:
a.imginfo span {lien de telle image l'image....
  display: none;
}

a.imginfo:hover { lien de l'image au passage de la souris...
  background: none;
  z-index: 500;
  cursor: help;
}

a.imginfo:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 30px;
  left: 20px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 3px solid #b6b6b6;
}
me compléter ce truc avec ce qu'il faut mettre, ce que je peux changer etc., que ce soit plus simple svp. Smile

<a class="imginfo">https://forum.forumactif.com/t296844-changement-d-image-au-passage-de-la-souris
<span>Informations et conseils?</span>
</a>

le problème, c'est que le HTML est désactivé sur ce forum, et ça ne marche pas....
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 16:39

Le codage dans un sujet
Code:
<a class="imginfo">un texte et non un lien
<span>Informations et conseils?</span>
</a>

L'autorisation de l'html -> HTML

Dans la CSS

Code:
    a.imginfo span {lien de telle image l'image....
      display: none;
    }

    a.imginfo:hover { lien de l'image au passage de la souris...
      background: none;
      z-index: 500;
      cursor: help;
    }

    a.imginfo:hover span {
      display: inline;
      position: absolute;
      white-space: nowrap;
      top: 30px;
      left: 20px;
      background: white;
      color: 7d7d7d;
      padding: 3px;
      border: 3px solid #b6b6b6;
    }
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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 17:21

ge80 a écrit:

L'autorisation de l'html -> HTML
oui, je sais très bien ça, mais c'est sur le forum des forumactif que je ne peut pas, je n'ai aucune possibilité de l'activé, même dans les options, en bas (et pourtant dans le profil, préférence, c'est activé)



donc, si j'ai bien compris, on met
<a class="imginfo">un texte et non un lien
<span>Informations et conseils?</span>
</a>
dans un sujet, dans n'importe quoi, et l'infobulle est contenue dans la CSS c'est ça? ou je me suis (encore) planté?
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 17:23

sur ce forum d'entraide : il est IMpossible d'activer l'html Wink

et pour la suite : oui c'est cela.

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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 17:28

OOUIII!!!!! ENFIN!!!! :lol!: victoire Pc Merci beaucoup!! Smile je fermerais ce sujet quand j'aurais réussi mon infobulle

:thanks: :thanks: :thanks:

sur ce forum d'entraide : il est IMpossible d'activer l'html
ok merci, je le saurais maintentant Smile

Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 17:31

Maintenant il faut s'attaquer à une image affichée

Remplacer le texte
Informations et conseils?

par une image
<img src="https://2img.net/u/2913/10/00/00/avatars/117783-3.jpg"/>


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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 17:45

attendez attendez, pas si vite svp! Smile
bon, j'aimerais savoir à quoi correspond quoi pour le code dans la CSS.... quel(les) partie(s) du code dois-je mettre pour que ça me fasse une infobulle uniquement avec 2 images......... c'est compliqué l'informatique Smile

j'ai essayer de remplacer par une image et tout et tout, ça m'a juste fait un bug, ça m'a remonté le bas de mon forum lorsque je passe la souris sur l'image (qui est déjà affichée) et quand je passe la souris sur le texte qui doit afficher l'image, l'image disparaît. J'ai créer le truc à l'envers? Smile Embarassed
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 17:46

Essayer ce code dans un message.
Pour l'instant il ne faut plus toucher à la css.

Code:
<a class="imginfo">un texte et non un lien
<span>Informations et conseils?<img src="http://r24.imgfast.net/users/2913/10/00/00/avatars/117783-3.jpg"/></span>
</a>
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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 17:49

l'image disparaît toujours lorsque je passe la souris sur "un texte et non un lien", lorsque je passe la souris sur l'image ou "informations et conseils, ça me remonte la bas de mon forum et le rabaisse juste après
c'est un bug?
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 17:57

COOL c'est exactement cela.

Passons à un code un peu plus performant

Dans votre CSS pour remplacer la classe imginfo par la classe Bulle
Code:

a.bulle {
  position: relative; /* relative au conteneur */
}
a.bulle span {
  display: none;
}
a.bulle:hover {
  background: none; /*contournement bug IE */
  z-index: 999;
}

a.bulle:hover span {
  display: inline;
  position: absolute;
  top: -10px;
  left: 10px;
  background: #fff;
  text-align: center;
  text-decoration: none;
  color: green;
  padding: 0.2em;
  border-right: black 2px solid;
  border-top: black 2px solid;
  border-left: black 2px solid;
  border-bottom: black 2px solid;
}


et dans un message
Code:
<a class="bulle">l'image à voir<span>Informations et conseils?<img src="http://r24.imgfast.net/users/2913/10/00/00/avatars/117783-3.jpg"/></span></a>
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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 18:00

normal qu'y ai rien qui s'affiche? Confused Pc
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 18:04

NON

vous avez bien mis le css
et valider.

Puis le petit code dans un message ?
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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 18:06

oui, il fallait que je rajoute des trucs dans la CSS à part ce que vous m'aviez donner?
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 18:10

tout à fait et enlever le code précédent 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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 18:12

erreur de de destinataire du message Wink


Dernière édition par ge80 le Sam 5 Fév 2011 - 18:24, é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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 18:20

ok ok, mais il va falloir que vous m'expliquiez plus en détail ce code, je n'avais pas très bien compris ce que vous disiez plus haut, lorsque vous m'expliquiez les différentes fonctions (faîte simple svp Smile)
Code:

a.bulle {------------Que faut-il que je mette? à quoi sert cette partie?
  position: relative; /* relative au conteneur */
}
a.bulle span {-------------Que faut-il que je mette? à quoi sert cette partie?
  display: none;
}
a.bulle:hover {-------------Que faut-il que je mette? à quoi sert cette partie?
  background: none; /*contournement bug IE */
  z-index: 999;
}

a."bulle":hover span {-----------------Que faut-il que je mette? à quoi sert cette partie?
  display: inline;
  position: absolute;
  top: -10px;
  left: 10px;
  background: #fff;
  text-align: center;
  text-decoration: none;
  color: green;
  padding: 0.2em;
  border-right: black 2px solid;
  border-top: black 2px solid;
  border-left: black 2px solid;
  border-bottom: black 2px solid;
}
le code que vous venez de me donner, je le mets où, dans un message? j'ai essayé, ça n'a rien fait....
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 18:28

Le message plus haut était une erreur de destinataire ;: désolé Wink


SVP; ne pas modifier le code sinon nous n'y arriverons jamais.


Les explications son t peu tiles pour l'instant car la partie CSS sera à changer en fonction de vos désirs.
D'abord il faut faire fonctionner le prototype !

Dans la css : il faut respecter la syntaxe et le fait d'ajouter du texte annule le fonctionnement


1°) Dans la CSS et vous enlevez ce que vous avez modifié
Code:
a.bulle {
  position: relative; /* relative au conteneur */
}
a.bulle span {
  display: none;
}
a.bulle:hover {
  background: none; /*contournement bug IE */
  z-index: 999;
}

a.bulle:hover span {
  display: inline;
  position: absolute;
  top: -10px;
  left: 10px;
  background: #fff;
  text-align: center;
  text-decoration: none;
  color: green;
  padding: 0.2em;
  border-right: black 2px solid;
  border-top: black 2px solid;
  border-left: black 2px solid;
  border-bottom: black 2px solid;
}


2°) le code dans un sujet ert san sle modifier pour l'instant Wink
Code:

<a class="bulle">l'image à voir<span>Informations et conseils?<img src="http://r24.imgfast.net/users/2913/10/00/00/avatars/117783-3.jpg"/></span></a>
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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 18:33

ok ok, c'est bon, ça marche Smile
désolé si je suis un peu boulet Smile
que dois-je faire maintenant?
Pakodar

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: Changement d'image au passage de la souris

Message par ge80 Sam 5 Fév 2011 - 18:37

Il n'y a pas de boulet en informatique mais des personnes qui apprennent Wink


Maintenant nous allons faire une image qui montre une autre image.
Code:
<a class="bulle"><img src="http://2img.net/i/fa/i/smiles/icon_arrow.gif"/><span>Informations et conseils?<img src="http://r24.imgfast.net/users/2913/10/00/00/avatars/117783-3.jpg"/></span></a>

A coller dans un Message.
On ne touche plus à la CSS.
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: Changement d'image au passage de la souris

Message par Pakodar Sam 5 Fév 2011 - 18:42

c'est bon, ça marche
Bon, dîtes moi si j'ai bien tout compris:
- le code CSS est à mettre une seule fois
- on peut changer tout ce que l'on veut sur le code du sujet
- on peut en faire plusieurs

est-ce qu'on peut mettre le code du sujet dans une adresse de l'image d'un forum par exemple?
Pakodar

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.

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