Discussion :

[goldenclover00]

Bonjour, voici mon problème,

J'ai une page d'accueil avec un paragraphe dans ce paragraphe j'ai des mots qui sont des liens cliquables,
j'aimerais que lorsque je passe ma souris sur ces mots spécifiques (mouseover) qu'une image apparaisse en arrière plan derrière le mot du paragraphe.

Pour l'instant l'image apparait qu'en je fais un roll over, mais je n'arrive pas à la placer sous le texte ...

pouvez vous m'aidez ?

voici mon code:

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
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
<br>
<br>
<br>
<br>
<br>
 
 
 
 
 
 
“JESSICA CHEIX. <b><a href="Artistic-image-director" rel="history"> 
 
<script type="text/javascript">
        function show1(){
                document.getElementById('image1').style.display = 'block';
                }
 
                function hide1(){
                document.getElementById('image1').style.display = 'none';
                }
        </script>
 
 
		</a><a href="Artistic-image-director" onmouseover="show1();" onmouseout="hide1();" rel="history">ARTISTIC IMAGE DIRECTOR°</a>&nbsp;<img id="image1" style="display: none;" width="400" src="https://payload.persona.co/1/0/5560/13562/0bcc19265fd4b7ea9cdb78c76905f6c8.jpg">
 
 
        </b>SPECIALIZED in HIGH-END COMMUNICATION, WORKING for LUXURY and BEAUTY INDUSTRY CURRENTLY in PARIS BASED AGENCY&nbsp;<b><a href="http://www.agencylove.com" target="_blank"><script type="text/javascript">
        function show2(){
                document.getElementById('image2').style.display = 'block';
                }
 
                function hide2(){
                document.getElementById('image2').style.display = 'none';
                }
        </script>
 
 
		</a><a href="http://www.agencylove.com" onmouseover="show2();" onmouseout="hide2();" position="absolute" ;="" z-index="1">L.O.V.E°.</a><br>
		<img id="image2" style="display: none;" position="absolute" ;="" z-index="2" width="400" src="https://payload.persona.co/1/0/5560/13562/agence-love.gif">
 
 
 
 
        </b><br>
ALSO a PASSIONNATE&nbsp;<b><a href="Still-life" rel="history">
 
 
       <script type="text/javascript">
        function show3(){
                document.getElementById('image3').style.display = 'block';
                }
 
                function hide3(){
                document.getElementById('image3').style.display = 'none';
                }
        </script>
 
 
		</a><a href="Still-life" onmouseover="show3();" onmouseout="hide3();" rel="history">STILL-LIFE°</a>
		<img id="image3" style="display: none;" width="400" src="https://transit2.persona.co/1/0/5560/13562/JessicaCheix_028.gif">
 
 
 
 
 
      and <b><a href="Model" rel="history">
       <script type="text/javascript">
        function show4(){
                document.getElementById('image4').style.display = 'block';
                }
 
                function hide4(){
                document.getElementById('image4').style.display = 'none';
                }
        </script>
 
 
		</a><a href="Model" onmouseover="show4();" onmouseout="hide4();" rel="history">MODEL PHOTOGRAPHER°</a>
		<img id="image4" style="display: none;" width="400" src="https://transit2.persona.co/1/0/5560/13562/JessicaCheix_02.gif">
 
 
 
 
 
 
        T</b>RAVELING BETWEEN PARIS / NEW-YORK.”&nbsp;<small><b></b></small><br>
 
<br><br><div style="text-align: right;"><small>JESSICACHEIX@HOTMAIL.FR&nbsp;<br> + 33 (0)6 37 90 14 57&nbsp;</small><a class="icon-link"></a></div><br></b>

[Jacques Beauregard]

Salut,

Peux-tu mettre ton code HTML dans une balise Code ? (bouton # dans l'éditeur) C'est illisible..

De plus :

j'aimerais que lorsque je passe ma souris sur ces mots spécifiques (mouseover) qu'une image apparaisse en arrière plan derrière le mot du paragraphe.

Pour l'instant l'image apparait qu'en je fais un roll over, mais je n'arrive pas à la placer sous le texte ...

Tu veux placer l'image sous le texte ou en arrière plan du texte?

[goldenclover00]

je veux placer les images sous le texte, que l'image correspondant au mot "still life" soit positionner sous ce mot derrière tout le paragraphe

[NoSmoking]

Bonjour et bienvenue sur DVP.

Si j'ai bien compris, pourquoi ne pas faire cela en CSS, sur un :hover, en changeant le background-image par exemple ?

[goldenclover00]

parce que je veux des images différentes pour chaque mots, et je ne veux pas qu'elles prennent tout l'arrière plan.. est ce possible avec cette technique la ?

Je ne sais pas ou je dois positionner ses codes dans mon code

[NoSmoking]

En attendant que attr() puisse s'appliquer au background-image, tu peux faire apparaitre un élément masqué au survol de ton élément, c'est un classique en CSS.

Soit le html suivant, indenté pour voir l'imbrication des éléments

Code html :

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

1
2
3
4
5
6
7
8
9
<p>
  Le forum
  <span class="over">Developpez.com
    <span>
      <img src="http://www.developpez.net/template/images/logo.png">
    </span>
  </span>
  est extraordinaire ;)
</p>

si l'on applique le CSS qui suit

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
p {
  line-height:1.25em;
}
span.over{
  position:relative;       /* pour servir de référent */
  display:inline-block;    /* pour appliquer overflow */
  overflow:hidden;
  vertical-align: bottom;  /* à ajuster suivant besoin */
  cursor:pointer;
  z-index:10;
}
span.over span{
  position:absolute;
  opacity:0;               /* pas vu pas pris */
  top:0;                   /* on place en haut à gauche */
  left:0;
  z-index:-1;              /* en arrière plan */
  transition: opacity 0.5s;
}
span.over:hover span{
  opacity:1;               /* affichage sur le hover */
}

cela devrait convenir à ce que tu cherches.