[HTML] Comment centrer deux images qui se chevauchent ?

Un problème sur votre ordinateur, votre système d'exploitation ou sur Internet ? Des conseils à demander ou à proposer concernant les derniers logiciels disponibles ? Des astuces ou des guides à proposer sur comment nettoyer / optimiser son ordinateur ? Ce forum est le lieu idéal pour parler de nos machines et des programmes autres que les jeux. Débats, sondages, astuces... sans oublier l'annuaire regroupant des liens de sites par thèmes.
Répondre
Avatar du membre
Freddy_Gwendo
Adepte de Grondemarteau
Orbe ancien
Messages : 5877
Enregistré le : sam. 23 avr. 2011, 00:26
Localisation : Égaré dans un vortex entre Féérune et le Royaume de Diamant Éternel
Statut : Hors ligne

[HTML] Comment centrer deux images qui se chevauchent ?

Message 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.
CARPE DIEM...Co-modérateur de La Forge et de La Chambre des Scribes
Moddeur qui s'arrache les cheveux...
Avatar du membre
Almaguemnon
Banni
Ver charognard
Messages : 686
Enregistré le : ven. 22 sept. 2017, 06:28
Localisation : Bretagne
Statut : Hors ligne

Message par Almaguemnon »

Bonjour Freddy.

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


Al
Photos du mod sur mon profil. Elles changeront avec la version 4.1.
Les screenshots d'intérieurs , eux, restent valables.

Al
Avatar du membre
Luren
Adepte de Grondemarteau
Ver charognard
Messages : 627
Enregistré le : dim. 20 juin 2010, 08:51
Localisation : Sûrement quelque part mais je n'arrive pas à bien voir où.
Statut : Hors ligne

Message par 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 ' '
Image un projet de mod pour Icewind Dale 2
Avatar du membre
Freddy_Gwendo
Adepte de Grondemarteau
Orbe ancien
Messages : 5877
Enregistré le : sam. 23 avr. 2011, 00:26
Localisation : Égaré dans un vortex entre Féérune et le Royaume de Diamant Éternel
Statut : Hors ligne

Message 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. :gign:

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. :thank_you: :clapping:
CARPE DIEM...Co-modérateur de La Forge et de La Chambre des Scribes
Moddeur qui s'arrache les cheveux...
Avatar du membre
Mornagest
Grand Gourou
Élu de Mystra
Messages : 18200
Enregistré le : ven. 17 oct. 2003, 10:48
Localisation : Juste derrière vous, prêt à hurler BOUH !
Statut : Hors ligne

Message par Mornagest »

Essaie alt plutôt que title pour décrire ton image.
Administrateur général. Je modère dans cette couleur.

Rejoignez Melandis, la Cité du Chaos
La biographie de Mornagest ainsi que ses quêtes et sa couleur RP #6C84FF ; la biographie de Henk et sa couleur RP #3BBB34

"Ne vous imaginez pas être différente de ce qu'il eût pu sembler à autrui que vous fussiez ou eussiez pu être en restant identique à ce que vous fûtes sans jamais paraître autre que vous n'étiez avant d'être devenue ce que vous êtes."
(Lewis Caroll)
Avatar du membre
Luren
Adepte de Grondemarteau
Ver charognard
Messages : 627
Enregistré le : dim. 20 juin 2010, 08:51
Localisation : Sûrement quelque part mais je n'arrive pas à bien voir où.
Statut : Hors ligne

Message 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." ... />
Image un projet de mod pour Icewind Dale 2
Avatar du membre
Freddy_Gwendo
Adepte de Grondemarteau
Orbe ancien
Messages : 5877
Enregistré le : sam. 23 avr. 2011, 00:26
Localisation : Égaré dans un vortex entre Féérune et le Royaume de Diamant Éternel
Statut : Hors ligne

Message par Freddy_Gwendo »

Manifestement, le code onmouseover / onmouseout semble court-cicrcuiter alt. Pas grave, j'ai ajouté une petit légende.
CARPE DIEM...Co-modérateur de La Forge et de La Chambre des Scribes
Moddeur qui s'arrache les cheveux...
Répondre

Retourner vers « Informatik' »

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 0 invité