Juxtaposition et apparition

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Juxtaposition et apparition

Message par Chertograd Jeu 15 Mar 2012 - 15:20

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

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Juxtaposition et apparition

Message par Matriochka Jeu 15 Mar 2012 - 16:13

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 :
Code:
.exempleimage:hover {position:relative;}
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Juxtaposition et apparition

Message par Chertograd Jeu 15 Mar 2012 - 16:15

Merci.

Ce code est-il à associer avec un autre ? Parce que je ne le comprends pas. ^^
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Juxtaposition et apparition

Message par Chertograd Sam 17 Mar 2012 - 11:37

Bonjour,

Je relance le sujet.
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Juxtaposition et apparition

Message par Chertograd Dim 18 Mar 2012 - 17:38

Bonsoir,

J'aurais besoin de davantage d'informations. Merci ! Very Happy
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Juxtaposition et apparition

Message par Invité Dim 18 Mar 2012 - 17:41

Coucou tu prend le code et tu le met à la suite de ton CSS...

Tu ne l'associe avec rien du tout Wink !
Anonymous

Invité
Invité


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

Résolu Re: Juxtaposition et apparition

Message par Chertograd Dim 18 Mar 2012 - 22:28

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

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Juxtaposition et apparition

Message par Invité Dim 18 Mar 2012 - 22:45

Pour commencer va mettre le code à la suite de ton CSS Wink

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

Et sinon tu marque résolu Razz
Anonymous

Invité
Invité


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

Résolu Re: Juxtaposition et apparition

Message par Invité Dim 18 Mar 2012 - 22:52

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 Wink !
Anonymous

Invité
Invité


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

Résolu Re: Juxtaposition et apparition

Message par Dr. Karlos Lun 19 Mar 2012 - 1:21

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:
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>
S'il s'agissait de la cinquième image, j'aurais eu juxtapo5 au lieu de juxtapo4. Wink


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 modifier le juxtapo4 par le numéro que vous avez attribué plus haut dans le code HTML en ajoutant une image.

► 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. Wink


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

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

Résolu Re: Juxtaposition et apparition

Message par Chertograd Mar 20 Mar 2012 - 19:07

Bonsoir,

Oulà... Je vais essayer, mais je ne garantis rien. Deux mains gauches et dix pouces. Merci Very Happy
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

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