Affichage des résultats 1 à 7 sur 7

Discussion: [HTML] Comment centrer deux images qui se chevauchent ?

  1. #1
    Date d'inscription
    April 2011
    Localisation
    Égaré dans un vortex entre Féérune et le Royaume de Diamant Éternel
    Messages
    4 590

    [HTML] Comment centrer deux images qui se chevauchent ?

    J'ai un petit souci avec un code HTML :

    Code:
    <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...

  2. #2
    Date d'inscription
    September 2017
    Localisation
    Bretagne
    Messages
    622

    Home

    Bonjour Freddy.

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


    Al
    Parti sans laisser d'adresse...

  3. #3
    Avatar de Luren
    Luren est déconnecté Barbare des terres gelées
    Date d'inscription
    June 2010
    Messages
    548
    Tu peux essayer en modifiant directement le style de ton paragraphe :
    Code:
    <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 ' '
    Dernière modification par Luren ; 05/08/2018 à 09h13.

    un projet de mod pour Icewind Dale 2

  4. #4
    Date d'inscription
    April 2011
    Localisation
    Égaré dans un vortex entre Féérune et le Royaume de Diamant Éternel
    Messages
    4 590
    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.
    Dernière modification par Freddy_Gwendo ; 05/08/2018 à 16h19.
    CARPE DIEM...
    Co-modérateur de La Forge et de La Chambre des Scribes
    Moddeur qui s'arrache les cheveux...

  5. #5
    Avatar de Mornagest
    Mornagest est déconnecté Chantre du mauvais goût
    Date d'inscription
    October 2003
    Localisation
    Juste derrière vous, prêt à hurler BOUH !
    Messages
    16 017
    Essaie alt plutôt que title pour décrire ton image.
    Administrateur général, également en charge des sections The Witcher, Torment, Icewind Dale et Morrowind. 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)

  6. #6
    Avatar de Luren
    Luren est déconnecté Barbare des terres gelées
    Date d'inscription
    June 2010
    Messages
    548
    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." ... />

    un projet de mod pour Icewind Dale 2

  7. #7
    Date d'inscription
    April 2011
    Localisation
    Égaré dans un vortex entre Féérune et le Royaume de Diamant Éternel
    Messages
    4 590
    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...

Discussions similaires

  1. [AIDE] Traduire une page HTML
    Par Freddy_Gwendo dans le forum Informatik'
    Réponses: 8
    Dernier message: 17/06/2014, 23h22
  2. [VVC] Comment superposer deux animations ?
    Par Freddy_Gwendo dans le forum Animations
    Réponses: 2
    Dernier message: 25/11/2013, 22h34
  3. [SCRIPT] Comment cumuler les pouvoirs de deux objets ?
    Par Cocrane dans le forum Scripts
    Réponses: 3
    Dernier message: 13/11/2013, 00h02
  4. [TW1][TECH] Comment retrouver les deux aventures ajoutées par l'extension ?
    Par Mornagest dans le forum The Witcher
    Réponses: 4
    Dernier message: 30/10/2010, 14h38

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250