Juxtaposition et apparition
3 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 1 • Partagez
Juxtaposition et apparition
Bonjour,
J'ai le code pour changer une image au seul passage de la souris. Mais comment faire pour superposer des images et faire apparaître celle du dessous, par exemple, en passant la souris ?
Comme ce forum sur la page d'accueil sur "Have you seen this wizard ?"
Merci d'avance !
J'ai le code pour changer une image au seul passage de la souris. Mais comment faire pour superposer des images et faire apparaître celle du dessous, par exemple, en passant la souris ?
Comme ce forum sur la page d'accueil sur "Have you seen this wizard ?"
Merci d'avance !
Re: Juxtaposition et apparition
Bonjour,
C’est assez simple, ici, ils ont utilisé la position "relative", qui permet de faire apparaître un élément en priorité.
Un exemple plus parlant en code :
C’est assez simple, ici, ils ont utilisé la position "relative", qui permet de faire apparaître un élément en priorité.
Un exemple plus parlant en code :
- Code:
.exempleimage:hover {position:relative;}
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Juxtaposition et apparition
Merci.
Ce code est-il à associer avec un autre ? Parce que je ne le comprends pas. ^^
Ce code est-il à associer avec un autre ? Parce que je ne le comprends pas. ^^
Re: Juxtaposition et apparition
Bonjour,
Je relance le sujet.
Je relance le sujet.
Re: Juxtaposition et apparition
Bonsoir,
J'aurais besoin de davantage d'informations. Merci !
J'aurais besoin de davantage d'informations. Merci !
Re: Juxtaposition et apparition
Coucou tu prend le code et tu le met à la suite de ton CSS...
Tu ne l'associe avec rien du tout !
Tu ne l'associe avec rien du tout !
Invité- Invité
Re: Juxtaposition et apparition
Mais si je mets ça à la suite de mon CSS, ça va me le faire pour toutes les images, non ?
Je ne comprends pas comment avec ce code - je dois être atteinte, - les images peuvent se superposer et apparaître dès que la souris est passée dessus. Est-ce que je pourrais avec un exemple ?
Merci
Je ne comprends pas comment avec ce code - je dois être atteinte, - les images peuvent se superposer et apparaître dès que la souris est passée dessus. Est-ce que je pourrais avec un exemple ?
Merci
Re: Juxtaposition et apparition
Pour commencer va mettre le code à la suite de ton CSS
Après tu regarde et tu nous dit si cela le fait pour tout ...
Si cela le fait pour tout tu nous le dit on essaie de voir le problème après !
Et sinon tu marque
Après tu regarde et tu nous dit si cela le fait pour tout ...
Si cela le fait pour tout tu nous le dit on essaie de voir le problème après !
Et sinon tu marque
Invité- Invité
Re: Juxtaposition et apparition
Ha non okay .. Je viens de voir.. Le code de matriochka n'est pas super bon car c'est un seul exemple....
Je epux voir le code que tu à pour ce changement d'image au passage de la souris ?
Pour faire une superposition de deux image j'ai ce SUJET qui pourrais t'aider !
Je epux voir le code que tu à pour ce changement d'image au passage de la souris ?
Pour faire une superposition de deux image j'ai ce SUJET qui pourrais t'aider !
Invité- Invité
Re: Juxtaposition et apparition
Bonsoir,
Ce que vous demandez peut se réaliser à l'aide du CSS et du HTML.
Vous devez en premier lieu placer vos images dans un code HTMLcomme celui-ci:
Pour ajouter des images, vous n'avez qu'à insérer ce code avant le </div> dans le code HTML en changeant le numéro de juxtapo pour faire une suite logique:
Par la suite, la partie plus compliquée: le CSS. Insérez ce code dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS):
Comme vous le remarquez, chaque juxtapo à sa partie. Si vous décidiez d'ajouter des images, vous devriez procéder comme ceci:
► Ajoutez cette partie au code CSS:
► Vous devriez additionner 10 à margin-left par rapport au denier juxtapo dans votre code.
► Vous devriez modifier le z-index en ajoutant 1 à chaque. Donc dans ce cas-ci, le z-index du premier code deviendrait 4, celui du deuxième 3, etc. Par contre, le juxtapo que vous venez de créer resterait à z-index: 1.
► Vous devriez ajouter .juxtapo4:hover (si c'était votre quatrième image) avec une virgule à l'avant à cette partie du code:
Le z-index aurait bien sûr augmenté à 5 si c'était ma quatrième image.
Cordialement.
Ce que vous demandez peut se réaliser à l'aide du CSS et du HTML.
Vous devez en premier lieu placer vos images dans un code HTMLcomme celui-ci:
- Code:
<div id="juxtapo"><span class="juxtapo1"><img src="ADRESSE DE L'IMAGE"></img></span><span class="juxtapo2"><img src="ADRESSE DE L'IMAGE"></img></span><span class="juxtapo3"><img src=img src="ADRESSE DE L'IMAGE"></img></span></div>
Pour ajouter des images, vous n'avez qu'à insérer ce code avant le </div> dans le code HTML en changeant le numéro de juxtapo pour faire une suite logique:
- Code:
<span class="juxtapo4"><img src="ADRESSE DE L'IMAGE"></img></span>
Par la suite, la partie plus compliquée: le CSS. Insérez ce code dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS):
- Code:
.juxtapo1{
position: absolute;
z-index: 3;
margin-left: 0px;}
.juxtapo2
{
position: absolute;
z-index: 2;
margin-left: 10px;
}
.juxtapo3{
position: absolute;
z-index: 1;
margin-left: 20px;
}
.juxtapo2:hover, .juxtapo3:hover{
z-index: 4;
}
Comme vous le remarquez, chaque juxtapo à sa partie. Si vous décidiez d'ajouter des images, vous devriez procéder comme ceci:
► Ajoutez cette partie au code CSS:
- Code:
.juxtapo4{
position: absolute;
z-index: 1;
margin-left: 30px;
}
► Vous devriez additionner 10 à margin-left par rapport au denier juxtapo dans votre code.
► Vous devriez modifier le z-index en ajoutant 1 à chaque. Donc dans ce cas-ci, le z-index du premier code deviendrait 4, celui du deuxième 3, etc. Par contre, le juxtapo que vous venez de créer resterait à z-index: 1.
► Vous devriez ajouter .juxtapo4:hover (si c'était votre quatrième image) avec une virgule à l'avant à cette partie du code:
- Code:
.juxtapo2:hover, .juxtapo3:hover{
z-index: 4;
}
Le z-index aurait bien sûr augmenté à 5 si c'était ma quatrième image.
Cordialement.
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Juxtaposition et apparition
Bonsoir,
Oulà... Je vais essayer, mais je ne garantis rien. Deux mains gauches et dix pouces. Merci
Oulà... Je vais essayer, mais je ne garantis rien. Deux mains gauches et dix pouces. Merci
Sujets similaires
» Probleme de postage, avec juxtaposition de texte
» Apparition de Texte
» Apparition de publicité
» Apparition de publicité
» Apparition sur google
» Apparition de Texte
» Apparition de publicité
» Apparition de publicité
» Apparition sur google
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 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum