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'an je fais un roll over, mais je n'arrive pas à la placer sous le texte ...
 
pouvez vous m'aidez ?  
 
voici mon code:
 
<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>

Hello,
 
tu n'as pas besoin de javascript pour faire ca. tu te compliques la vie Le CSS seul fonctionne.
 
 
 

ça ne marche pas l'image ne se cache pas elle reste visible et j'ai du texte du code qui apparait dans ma page ...

peu être que je le positionne mal dans ma page ..
 
 
<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();">L.O.V.E°.</a><br>
  <img id="image2" style="display: none;" 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">
       
       
       a{
        position= "relative";
      }  
      a img{
        display= "none";
        position= "absolute";
        left: 0;
        top:0;
        z-index: -1;
      }
      a span:hover+img{
        display: block;
      }
    </a><a href="Still-life"><span>test1</span><img id="image3" width="400" src="https://transit2.persona.co/1/0/5560/13562/JessicaCheix_028.gif"> </a>
         
         
         
         
         
      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>

Oula, tu fais tout sur la même page ?
Tu n'as pas de fichiers JS et CSS séparés ?

La réalité c'est que je n'y connais rien en code, je dois mettre mon portfolio en ligne, je pars d'une base d'éditeur (persona.co)
et j'essaye de modifier avec des bout de codes de je trouve sur internet ... donc c'est sur que ça dot pas être très net ..

l'image apparait bien au survol de la souris, mais j'aimerais juste qu'elle soit derrière le texte ... et je ne trouve pas de solution j 'ai essayé avec des balise z-index mais ça ne marche pas non plus ..

Avec quel code, le tien ou le mien ?
Essaie de mettre une position position:relative aux éléments. Et mets un z-index: -1 a l'image.

Ce sujet a été déplacé de la catégorie Graphisme vers la categorie Programmation par Skopos

ça ne marche pas, ou je dois les placer exactement?