Changement d'image au passage de la souris
2 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
Changement d'image au passage de la souris
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.
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.
Re: Changement d'image au passage de la souris
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,
Ge
On peut le faire avec les infobulles.
Beaucoup d'exemple sur ce forum avec CSS et codage.
recherche
Avez-vous regardé ces exemples ?
Cordialement,
Ge
Re: Changement d'image au passage de la souris
ah, je ne savais pas que ça existé les "infosbulles"
Merci, je vais regarder ça
Merci, je vais regarder ça
Re: Changement d'image au passage de la souris
Et demandez de l'aide si vous n'arrivez pas à faire fonctionner VOTRE code.
Re: Changement d'image au passage de la souris
Il va falloir m'expliquer des trucs.... je vais faire simple:
Comment fait-on un changement d'image au passage de la souris? 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?
- Enfin, pour ce code qui suit, "lien sur lequel l'infobulle apparaît", cela peut être une image?
Comment fait-on un changement d'image au passage de la souris? 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>
Re: Changement d'image au passage de la souris
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.
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>
Re: Changement d'image au passage de la souris
ce qui veut dire?ge80 a écrit:
imginfo est le nom de la classe.
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]
Re: Changement d'image au passage de la souris
le code CSS est ici
et dans le code class="imginfo" est l'appel de votre style pour cette classe.
et dans le code class="imginfo" est l'appel de votre style pour cette classe.
Re: Changement d'image au passage de la souris
ok, je vais voir, si j'ai des problèmes, je re-poste en attendant merci :thanks:
Re: Changement d'image au passage de la souris
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>
il faudra aussi que l'html soit activé sur votre forum
<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
Re: Changement d'image au passage de la souris
Bon, là, j'ai du mal
.........................................
-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:
<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....
.........................................
-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;
}
<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....
Re: Changement d'image au passage de la souris
Le codage dans un sujet
L'autorisation de l'html -> HTML
Dans la CSS
- 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;
}
Re: Changement d'image au passage de la souris
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é?
Re: Changement d'image au passage de la souris
sur ce forum d'entraide : il est IMpossible d'activer l'html
et pour la suite : oui c'est cela.
et pour la suite : oui c'est cela.
Re: Changement d'image au passage de la souris
OOUIII!!!!! ENFIN!!!! :lol!: Merci beaucoup!! je fermerais ce sujet quand j'aurais réussi mon infobulle
:thanks: :thanks: :thanks:
:thanks: :thanks: :thanks:
ok merci, je le saurais maintentantsur ce forum d'entraide : il est IMpossible d'activer l'html
Re: Changement d'image au passage de la souris
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"/>
Remplacer le texte
Informations et conseils?
par une image
<img src="https://2img.net/u/2913/10/00/00/avatars/117783-3.jpg"/>
Re: Changement d'image au passage de la souris
attendez attendez, pas si vite svp!
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
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?
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
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?
Re: Changement d'image au passage de la souris
Essayer ce code dans un message.
Pour l'instant il ne faut plus toucher à la css.
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>
Re: Changement d'image au passage de la souris
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?
c'est un bug?
Re: Changement d'image au passage de la souris
COOL c'est exactement cela.
Passons à un code un peu plus performant
Dans votre CSS pour remplacer la classe imginfo par la classe Bulle
et dans un message
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>
Re: Changement d'image au passage de la souris
normal qu'y ai rien qui s'affiche?
Re: Changement d'image au passage de la souris
NON
vous avez bien mis le css
et valider.
Puis le petit code dans un message ?
vous avez bien mis le css
et valider.
Puis le petit code dans un message ?
Re: Changement d'image au passage de la souris
oui, il fallait que je rajoute des trucs dans la CSS à part ce que vous m'aviez donner?
Re: Changement d'image au passage de la souris
tout à fait et enlever le code précédent
Re: Changement d'image au passage de la souris
erreur de de destinataire du message
Dernière édition par ge80 le Sam 5 Fév 2011 - 18:24, édité 1 fois
Re: Changement d'image au passage de la souris
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 )
- 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;
}
Re: Changement d'image au passage de la souris
Le message plus haut était une erreur de destinataire ;: désolé
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é
2°) le code dans un sujet ert san sle modifier pour l'instant
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
- 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>
Re: Changement d'image au passage de la souris
ok ok, c'est bon, ça marche
désolé si je suis un peu boulet
que dois-je faire maintenant?
désolé si je suis un peu boulet
que dois-je faire maintenant?
Re: Changement d'image au passage de la souris
Il n'y a pas de boulet en informatique mais des personnes qui apprennent
Maintenant nous allons faire une image qui montre une autre image.
A coller dans un Message.
On ne touche plus à la CSS.
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.
Re: Changement d'image au passage de la souris
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?
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?
Page 1 sur 2 • 1, 2
Sujets similaires
» Changement d'image au passage de la souris
» Changement au passage de la souris sur une image ?
» Changement d'image au passage de la souris sur la barre de navigation
» .profile-icon changement au passage de la souris
» Au passage de la souris
» Changement au passage de la souris sur une image ?
» Changement d'image au passage de la souris sur la barre de navigation
» .profile-icon changement au passage de la souris
» 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