Page 1 sur 1
[HTML] Comment centrer deux images qui se chevauchent ?
Posté : sam. 04 août 2018, 21:59
par Freddy_Gwendo
J'ai un petit souci avec un code HTML :
Code : Tout sélectionner
<p class="screen" title="Faites glisser le curseur de la souris sur l'image pour révéler le contenu original." style="background-image:url(files/400h0.jpg)"><img src="files/400h4.jpg"></p>
Le but du jeu, c'est de déplacer le curseur de la souris sur l'image pour en afficher une autre.
Le code fonctionne parfaitement, mais je n'arrive pas à trouver l'instruction pour centrer les deux images.
Une idée ?
Note : les deux images font la même dimension.
Home
Posté : dim. 05 août 2018, 05:29
par Almaguemnon
Bonjour Freddy.
Je ne connais pas le HTML; donc je ne sais si la commande "Home+var" fonctionnera.
Al
Posté : dim. 05 août 2018, 09:11
par Luren
Tu peux essayer en modifiant directement le style de ton paragraphe :
mais vu que tu as utilisé un background comme première image ça rique de coincer, puisque par définition un fond s'applique sur tout le fond (mais mes connaissances en HTML ne sont pas vraiment à jour !)
En gardant ton paragraphe avec un
text-align : center, le plus simple est de passer par la commande
onmouseover / onmouseout dans la balise <img>, où la référence du fond se retrouve 2 fois (ref. de l'image et ref. onmouseout), et celle de l'image survolée dans la ref. onmouseover.)
Ce qui donne :
<img src="[ref. image de fond]" onmouseover="this.src='[ref. image survolée]'" onmouseout="this.src='[ref. image de fond]'" />
Tu noteras la présence et la différence entre les références indiquées des guillemets " " et des apostrophes ' '
Posté : dim. 05 août 2018, 16:09
par Freddy_Gwendo
J'ai testé et ça fonctionne. Il faut juste inverser le nom des deux images.
Effectivement, la première option (centrer l'image) bloquait toute la manip sur l'image de fond.
En revanche, je perds le message d'information ("
Faites glisser le curseur de la souris sur l'image pour révéler le contenu original."). Je vais soumettre les deux versions (images centrées ou pas) et publierai celle qui sera choisie par les admin.
Encore merci. Tu m'enlèves une énorme épine du pied.
Posté : dim. 05 août 2018, 19:07
par Mornagest
Essaie alt plutôt que title pour décrire ton image.
Posté : dim. 05 août 2018, 19:08
par Luren
Pour le message d'information, il faut renseigner l'attribut alt (de préférence à l'attribut title réservé aux liens) de la balise img :
<img ... ... alt="Faites glisser le curseur de la souris sur l'image pour révéler le contenu original." ... />
Posté : dim. 05 août 2018, 19:17
par Freddy_Gwendo
Manifestement, le code onmouseover / onmouseout semble court-cicrcuiter alt. Pas grave, j'ai ajouté une petit légende.