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

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

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.

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.

  • 0

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

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

@Pakodar a écrit:- le code CSS est à mettre une seule fois
OUI
@Pakodar a écrit:- on peut changer tout ce que l'on veut sur le code du sujet
en respectant la syntaxe : oui;


@Pakodar a écrit:- on peut en faire plusieurs

tour à fait

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

ge80
+ Hyperactif +

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

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


on peut le faire?

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 le Sam 5 Fév 2011 - 19:02

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


ge80
+ Hyperactif +

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

Message par Pakodar le Sam 5 Fév 2011 - 19:07

non, c'est pas un sous - forum, c'est pour entrer l'adresse d'une image 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: Changement d'image au passage de la souris

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

Oui tout à fait :

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

ge80
+ Hyperactif +

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

Message par Pakodar le Dim 6 Fév 2011 - 10:01

ok ok Smile
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 Smile

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
*****

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 Pakodar le Mer 9 Fév 2011 - 8:26

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
*****

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 Pakodar le Ven 11 Fév 2011 - 12:57

Up

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 Pakodar le Dim 13 Fév 2011 - 19:24

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..... Very Happy

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 Invité le Dim 13 Fév 2011 - 21:19

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

Message par Pakodar le Lun 14 Fév 2011 - 11:48

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 Very Happy
Voilà, je pense que je peux boucler le sujet, et merci beaucoup à vous, ge80 et Isolde, et bonne continuation Very Happy
Thanks Thanks Thanks

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