Changement d'image au passage de la souris

2 participants

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

Pakodar
*****

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

Voir le profil de l'utilisateur 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 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

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

Voir le profil de l'utilisateur 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:55

Changement d'image au passage de la souris  - Page 2 Sans_t13
on peut le faire?
Pakodar

Pakodar
*****

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

Voir le profil de l'utilisateur 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 - 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

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

Voir le profil de l'utilisateur 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 - 19:07

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

Pakodar
*****

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

Voir le profil de l'utilisateur 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 - 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

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

Voir le profil de l'utilisateur 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 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

Pakodar
*****

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

Voir le profil de l'utilisateur 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 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

Pakodar
*****

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

Voir le profil de l'utilisateur 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 Ven 11 Fév 2011 - 12:57

Up
Pakodar

Pakodar
*****

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

Voir le profil de l'utilisateur 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 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

Pakodar
*****

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

Voir le profil de l'utilisateur 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é 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.
Anonymous

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

Pakodar
*****

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

Voir le profil de l'utilisateur 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

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum