Yo ! 

J'aimerais qu'au survol d'un signe.png : une photo s'affiche en arrière plan avec une phrase de présentation (le bonus serait que les autres signes  diminuent en opacité, mais je n'y suis pas encore). maquette : SANS SURVOL / AU SURVOL D'UN SIGNE.PNG :

J'ai trouvé ce code en JS :

    <div id="signes">
      <a class="echoppe" href="./echoppe.html" id="list"><img src="./signes/ECHOPPE.png"</a>
    </div>

   <div id="conteneur_image"></div>
      <script type="text/javascript" >
        var list = document.getElementById("list");
        var img = document.createElement("img");
        var conteneur =
        document.getElementById("conteneur_image");
        img.src = "./images/home/ECHOPPE.jpg";
        img.alt = "photo de l'Echoppe";
  			img.id = "myimg"
        list.onmouseover = function() {
        conteneur.appendChild(img);
        }
        list.onmouseout = function() {
        conteneur.removeChild(img);
        }
    </script>

avec ce CSS : 

.echoppe img
{
    height: 100px; /*hauteur*/
    width : auto;
    position: absolute;
      left: 650px;
      top: 400px;

    }

#myimg{
  width: 550px;
  height: auto;
  position: absolute;
    left: 500px;
    top: 150px;
}

.signes{
  width: 350px;
  height: auto;
  background-image: none;
}

.signes:hover{
  visibility: visible;
  background-image: url(./images/home/ECHOPPE.jpg);
}

Le hic : la photo tremble au survol ... et étant débutante en HTML/CSS, je ne sais pas où placer la phrase de présentation dans le code JS

J'espère que c'était clair, sinon dites moi pour plus de précisions ! 
Merci beaucoup pour votre précieuse aide....... 

see you ! 

Hello !

je t'avoue que je ne saisis pas bien l'intérêt du js ici.

Je ne suis pas complètement sûre d'avoir bien compris ce que tu souhaites faire, mais voici ce que j'ai fait (bon, avec des image random de google image, ça rend vachement moins joli  )

EXEMPLE

La seule différence, c'est que toute l'image .png passe en opacité réduite, sur ta maquette, cela suggère qu'un élément de l'image reste en opacité totale. Mais du coup, il faut que tu revois ta façon de faire pour séparer cet élément du reste.

Et attention : je t'ai fait ceci rapidement pour donner un exemple de ce que tu peux faire, mais en l'état, certains styles comme flex ou transition risquent de ne pas fonctionner tel quels dans tous les navigateurs ! 

-
Edité par Garfi 24 mai 2017 à 16:07:48

En plus le hover sur mobile n'existe pô !

Donc adapter le JS en fonction de la device.

Bonjour chez vous !

Bonjour,

Je suis du même avis que Garfi, ton script JS n'est pas légitime, tu peux faire çà beaucoup plus simplement en superposant les 2 images "ECHOPPE.png" et  "ECHOPPE.jpg". Ensuite, il suffit d'organiser ton CSS pour que "ECHOPPE.jpg" n'apparaisse que lorsque tu survol le lien "a.echope". Cette solution te permettra également de gérer l'opacité de "ECHOPPE.png".

En espérant avoir éclairé ta lanterne...

-
Edité par Soundboy39 25 mai 2017 à 9:56:39