Faire apparaitre une image sous un texte quand mouseover

Version imprimable

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:

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>

08/06/2016, 11h48
Jacques Beauregard

Salut,

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

De plus :

Citation:

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?
08/06/2016, 12h04
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
08/06/2016, 18h28
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 ?
09/06/2016, 14h53
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

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:

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:

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.