Changement d'image au passage de la souris

[Pakodar]

Rappel du premier message :

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.

[ge80]

- le code CSS est à mettre une seule fois

OUI

- on peut changer tout ce que l'on veut sur le code du sujet

en respectant la syntaxe : oui;

- on peut en faire plusieurs

tour à fait

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

La je ne comprend spas votre question.
Une image lien ?

[Pakodar]

on peut le faire?

[ge80]

Ce que vous avez entouré et le nom d'un sous - forum.
Il est possible de mettre un lien ou adresse de l'image.

[Pakodar]

non, c'est pas un sous - forum, c'est pour entrer l'adresse d'une image

[ge80]

Oui tout à fait :

Je voulais dire :
c'est la configuration d'un sous forum et le rectangle reçoit le lien de l'image.

[Pakodar]

ok ok
Bon, j'ai essayer de mettre une infobulle, mais j'aimerais pouvoir l'utiliser, car on peut cliquer sur une partie de l'image pour aller sur un lien...
comment puis-je faire en sorte que l'image soit cliquable?

2ème chose: pour que l'infobulle soit exactement de la même taille et exactement au-dessus de l'autre image, quel code dois-je mettre svp?

ensuite, j'ai quelques questions, juste pour mon information personnelle

a.bulle { <<<<<<< si on change le nom, ça ne fait rien, c'est juste pour savoir quelle infobulle on utilise, c'est ça?
position: relative; /* relative au conteneur */ <<<< c'est quoi? à quoi ça sert?
}
a.bulle span {
display: none; .....................<<<<< c'est quoi? à quoi ça sert?
}
a.bulle:hover {
background: none; /*contournement bug IE */ ...............<<<<<<c'est quoi? à quoi ça sert?
z-index: 999; ...............................<<<<<<c'est quoi? à quoi ça sert?
}

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

[Pakodar]

Bon, depuis le début, ce que je voulais, c'était une image remplacée par une autre image, qui se superposent bien. Est-ce possible d'avoir un code comme ça svp?

[Pakodar]

Up

[Pakodar]

bon, comment j'enlève le cadre qui entoure l'infobulle qui apparaît, c'est juste ça que je veux savoir..... si vous voulez pas me répondre, dîtes le moi, que je laisse tomber.....

[Invité]

Bonsoir,

Pour ôter le cadre autour de l'infobulle il faut modifier une partie de la feuille CSS comme ceci:

Code:

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

Pour les explications, je vous met ce que j'ai compris ... ce sont mes mots, la façon dont j'ai compris " sur le tas", donc tout n'est pas précis .

a.bulle {
position: relative;/*permet de positionner la bulle par rapport à l'image quand on ne survole pas*/
}
a.bulle span {
display: none;/*permet de ne pas afficher la bulle en continu*/
}
a.bulle:hover {
background: none; /*contournement bug IE internet explorer rajoute un fond sans cela */
z-index: 999;/*permet l'empilement ( une image sur une image)*/
}

a.bulle:hover span {
display: inline; /fait apparaitre la bulle au bon endroit*/
position: absolute; /*positionne la bulle*/
top: -10px;.............../*positionne la bulle par rapport au haut de la première image*/
left: 10px;/*positionne la bulle par rapport aubord gauche de la première image*/
background: #fff;/*couleur de fond de la bulle*/
text-align: center;
text-decoration: none;
color: green;
padding: 0.2em;/marge entre le bord de la bulle et le contenu*/
border-right: black 2px solid;/couleur épaisseur et style du cadre de la bulle*/
}

Et pour en revenir à votre question initiale, le champs que vous montrez permet de mettre une image à coté de la description d'une catégorie. Je ne pense pas qu'il soit possible de remplacer cette image au survol par une autre image.

Cordialement.

[Pakodar]

ok...... merci beaucoup de votre aide, la description "sur le tas" m'aura permis d'apprendre bien des choses et de régler le code comme je le voulais
Voilà, je pense que je peux boucler le sujet, et merci beaucoup à vous, ge80 et Isolde, et bonne continuation
:thanks: :thanks: :thanks: