[HTML] Comment centrer deux images qui se chevauchent ?

[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.

[Almaguemnon]

Bonjour Freddy.

Je ne connais pas le HTML; donc je ne sais si la commande "Home+var" fonctionnera.


Al

[Luren]

Tu peux essayer en modifiant directement le style de ton paragraphe :

Code : Tout sélectionner

<p class="screen" style="text-align: center;">

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 ' '

[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.

[Mornagest]

Essaie alt plutôt que title pour décrire ton image.

[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." ... />

[Freddy_Gwendo]

Manifestement, le code onmouseover / onmouseout semble court-cicrcuiter alt. Pas grave, j'ai ajouté une petit légende.