Image survolée et image décalée

**laurent84200** · 10/08/2018, 11h04

Bonjour,

Je voudrais mettre en place lorsque je survole une image, l'apparition d'une nouvelle image à un autre endroit de ma page.
J'aimerai le faire en css pour une meilleure fluidité, pourriez-vous m'aide svp ?
Je vous remercie.

**laurent84200** · 10/08/2018, 11h07

Je suis allé un peu vite et j'ai oublié de vous donner mon code départ (mon image que je vais survoler) :

Css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.pict1{
width:92px;
height:92px;
background-image: url(../images/picto_acces2.jpg)  ;
position: absolute;
}
 
.pict1:hover {
width:92px;
height:92px;
background-image: url(../images/picto_acces.jpg)  ;
}

hTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<IMG src="../images/silh_voiture.jpg"/>
<a href="#"><div class="pict1"></div></a>

Invité · 10/08/2018, 13h59

Bonjour,

Envoyé par laurent84200

...apparition d'une nouvelle image à un autre endroit de ma page...

De nos jours, JavaScript est incontournable.
Et plus simple, dans ce cas.

Ca reste néanmoins possible en CSS, en affichant/masquant un <div>, par exemple.
mais il faut que tu précises : où doit s'afficher la nouvelle image ?

A un endroit précis de la page ?
dans une popup ?

Montre un exemple (copie d'écran, infographie,...)

**laurent84200** · 10/08/2018, 17h14

Merci pour ta réponse, voici une capture d'écran.

Nom : Capture-d'écran-2018-08-10-16.10.jpg
Affichages : 147
Taille : 46,9 Ko

Invité · 10/08/2018, 17h19

Montre le code HTML + CSS associés.

Dans "CSS", il y a le "C" qui veut dire "Cascade"...
On descend une cascade...

Sinon, je confirme : JavaScript est (à priori) approprié.

**laurent84200** · 10/08/2018, 17h31

Le code est dans le 1er post, je l'ai mis uniquement pour le 1er picto.

Invité · 10/08/2018, 17h35

Explique.
Sois plus clair et précis.

Comme j'ai dit : une solution JavaScript existe.

une solution CSS existe aussi : mais elle dépend du HTML employé (cascade, héritage,...).

**laurent84200** · 10/08/2018, 17h51

Envoyé par jreaux62

Explique.
une solution CSS existe aussi : mais elle dépend du HTML employé (cascade, héritage,...).

Ben c'est à dire que je ne comprends pas trop... dsl.

Oui, j'aimerai partir avec du css mais le code html (cascade, héritage...) ???

En fait lorsque je survolerai le picto, il devra changer de couleur (cela fonctionne avec hover) mais en plus ce survol devra "faire apparaitre" une nouvelle image dans la zone précédemment indiquée.

Est-ce plus clair ?

**laurent84200** · 03/09/2018, 18h14

Bonjour,

Retour de vacances et je n'ai pas avancé.
Une âme charitable aurait une idée ?
Merci

Invité · 03/09/2018, 18h54

Nous aussi, on était en "vacances".....
(désolé, mais PAS UNE seconde on a pensé à toi..... )

Retour de vacances = ré-activer ton cerveau.

à TOI de nous dire tes "progrès" (code testé ?..).

**laurent84200** · 03/09/2018, 21h41

Ce n'est pas sympa de ne pas avoir pensé à moi...

En fait, je te redemandais des infos suite à ton post "HTML employé (cascade, héritage,...)".

Je ne suis pas webdesigner sinon je ne poserai pas de question comme celle-ci !!!

Je ne comprends pas ce que tu veux dire mais si tu ne le comprends pas ce n'est pas grave, je passe mon chemin...

Invité · 04/09/2018, 12h44

Bonjour,

1- Ce n'est pas pour rien qu'on te demande de montrer ton code.
Ce qui nous intéresse, c'est la structure : l'imbrication des <div>, la position relative des icônes par rapport à l'endroit où sera affichée la grande image.

Toi, tu n'as montré que le code d'UNE icône. Ça nous fait une belle jambe !

2- En cherchant un peu, on trouve :

**laurent84200** · 07/09/2018, 17h02

Bonjour,

Merci pour tes exemples.
Je préférerai partir sur du css car le javascript je n'y connais absolument rien.

Voici l'intégralité de mon code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="gauche6" class="arrondi"><H2><center>Nos partenaires :</BR> VOS fournisseurs</center></H2>
 
<strong>Des équipementiers Premium </br>et des fabricants reconnus</strong></br>
Livraison directe</br>
Pas de facturation centralisée.</br></br>
 
 
<h2>Un référencement cohérent</h2></br>
Un référencement ciblé et adapté couvrant</br> <strong><font size="5">90% des achats</font></strong> </br>en pièces détachées automobile d'un </br>grossiste indépendant.</br></br>
 
<h2 align="left">Un press-book clair et détaillé</h2>
</br>Accès direct par internet</br>
Mise à jour et actualisation en continu sur </br>
 
<h2>adr.fr</h2>
avec accès sécurisé
</div>
 
<IMG src="../images/visiteurs/silh_voiture.jpg"/>
<a href="#"><div class="pict1"></div></a>
<a href="#"><div class="pict2"></div></a>
<a href="#"><div class="pict3"></div></a>
<a href="#"><div class="pict4"></div></a>
<a href="#"><div class="pict5"></div></a>
<a href="#"><div class="pict6"></div></a>
<a href="#"><div class="pict7"></div></a>
 
<div id="droite6">
 
 
</div>

Voici l'intégralité du css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/*page 6 */
#gauche6{
float:left;
font-size:12px;
padding-left:10px;
padding-right:10px;
width:235px;
margin-top:20px;
background: rgb(195,195,195);
background: -moz-linear-gradient(top,  rgba(195,195,195,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top,  rgba(195,195,195,1) 0%,rgba(255,255,255,1) 100%); 
background: linear-gradient(to bottom,  rgba(195,195,195,1) 0%,rgba(255,255,255,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3c3c3', endColorstr='#ffffff',GradientType=0 );
 
}
 
.pict1{
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_acces2.jpg)  ;
margin-top:-448px;
margin-left:343px;
position: absolute;
}
 
.pict1:hover {
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_acces.jpg)  ;
 
 
 
 
}
 
.pict2{
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_carros2.jpg)  ;
margin-top:-448px;
margin-left:491px;
position: absolute;
}
.pict2:hover {
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_carros.jpg)  ;
}
 
.pict3{
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_elect2.jpg)  ;
margin-top:-448px;
margin-left:642px;
position: absolute;
}
.pict3:hover {
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_elect.jpg)  ;
}
 
.pict4{
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_lubri2.jpg)  ;
margin-top:-122px;
margin-left:284px;
position: absolute;
}
.pict4:hover {
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_lubri.jpg)  ;
}
 
.pict5{
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_outil2.jpg)  ;
margin-top:-122px;
margin-left:434px;
position: absolute;
}
.pict5:hover {
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_outil.jpg)  ;
}
 
.pict6{
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_pneu2.jpg)  ;
margin-top:-122px;
margin-left:584px;
position: absolute;
}
.pict6:hover {
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_pneu.jpg)  ;
}
 
.pict7{
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_ptech2.jpg)  ;
margin-top:-122px;
margin-left:734px;
position: absolute;
}
.pict7:hover {
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_ptech.jpg)  ;
}
 
 
 
#droite6{
float: right;
font-size:14px;
width:620px;
margin-top:20px;
}
 
#gauche6 h2 {
display: inline;
}
 
#gauche6 h2 {
font-size:16px;
}

L'affichage de la nouvelle image devra se faire dans "id droite6" lors du survol des picts.

Invité · 07/09/2018, 17h33

Bonjour,

On n'est pas là pour bosser à ta place.

Je t'ai fourni des liens.
A toi d'adapter.

Bonne nouvelle : vu ton HTML, il semble que ce soit possible en full CSS.

N.B. où est le code des images à afficher ?

**laurent84200** · 10/09/2018, 10h32

Bonjour,

Mais je comptais bosser, t'inquiète !!!
Une petite précision avant que je ne me lance.
Étant donné que mon image initiale réagit déjà au survol, est-il possible que par ce mème survol, une autre image apparaisse dans une une autre div ?
Pour le code de mon image manquante, je le mettrai dans mes prochains posts.

**laurent84200** · 10/09/2018, 17h13

Voici ce que j'ai trouvé en faisant des recherches sur le net.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.pict1{
width:92px;
height:92px;
background-image: url(../images/visiteurs/picto_acces2.jpg)  ;
margin-top:-448px;
margin-left:343px;
position: absolute;
}
.pict1:hover {
background-image: url(../images/visiteurs/picto_acces.jpg)  ;
}
.pict1:hover ~ .pict1a{
width:400px;
height:302px;
float:right;
margin-top:20px;
background-image: url(../images/logos_ptech.png)  ;
}

Comme ceci cela fonctionne.
Par contre, je ne peux mettre de lien sur mon image initiale sinon le survol ne marche pas.
Pourquoi ?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="p1.html"><div class="pict1"></div></a>
<div class="pict1a"></div>

Invité · 10/09/2018, 18h35

Bonjour,

c'est bien, tu as avancé

1- on utilisera plutôt des id puisque ces images sont uniques.
Cependant, comme on a plusieurs pictos, on peut, en plus, leur mettre une classe commune (pour les propriétés communes)

2-

Envoyé par laurent84200

...Par contre, je ne peux mettre de lien sur mon image initiale sinon le survol ne marche pas.
Pourquoi ?...

Bonne question.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.pict1:hover ~ .pict1a{

le ~ est un sélecteur de voisin général (ou adjacent).
C'est-à-dire qui ont le même parent direct.

Or, en ajoutant un lien (balise <a>), ils n'ont plus le même parent direct.

La bonne méthode est donc :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="bloc-englobant">
   <a id="pict1" href="p1.html"><div class="pict"></div></a>
   <a id="pict2" href="p2.html"><div class="pict"></div></a>
   <a id="pict3" href="p3.html"><div class="pict"></div></a>
 
   <div id="imgbig"></div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* pictos */
.pict {
   position: absolute;
   width:92px;
   height:92px;
}
#pict1 > div {
   margin-top:-448px;
   margin-left:343px;
   background-image: url(../images/visiteurs/picto_acces2.jpg)  ;
}
#pict1:hover > div {
   background-image: url(../images/visiteurs/picto_acces.jpg)  ;
}
 
/* grandes images */
#imgbig {
   width:400px;
   height:302px;
   float:right;
   margin-top:20px;
   visibility:hidden; /* on masque, en gardant le placement */
}
 
#pict1:hover ~ #imgbig {
   background-image: url(../images/logos_ptech.png)  ;
   visibility:visible; /* on masque */
}
#pict2:hover ~ #imgbig {
   background-image: url(../images/xxxxxxxxxx.png)  ;
   visibility:visible; /* on masque */
}

Remarque importante :
Si tu es obligé de mettre des margin-top et margin-left avec des si hautes valeurs, c'est certainement que tu as mal référencé le "bloc englobant de référence".
Pour devenir une référence pour les éléments positionnés (position:absolute

, le "bloc englobant" doit être lui aussi positionné :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part