Positionnement d'un objet sur une image en HTML + CSS

Je fais un jeu de différence en HTML, CSS + Javascript, mais l'un des problèmes auxquels je suis confronté est que sur une résolution différente, les cercles de marqueurs Hitboxes (fondamentalement juste une image qui lie à une fonction javascript qui s'estompe dans le cercle de marqueur) sont tous dans les mauvais endroits. J'utilise le positionnement absolu en CSS avec des pourcentages. L'image principale sur laquelle les marqueurs et les hitboxes sont superposés est 50% de largeur et de hauteur de la page.Positionnement d'un objet sur une image en HTML + CSS

Merci,

Niall.

Edit: Ajout d'information sur l'image principale

Source

2010-11-28 Niall

Mise à jour: Votre modification:

L'image principale que les marqueurs et hitboxes se superposent sur est une largeur de 50% et la hauteur de la page.

... change substantiellement la question. :-) Ma réponse ci-dessous sur l'utilisation des valeurs de pixels pour les superpositions reste valide; mais calculer leurs positions devient un cauchemar parce que vous ne pouvez pas savoir au moment de la conception quelle sera la largeur réelle de l'image. Cela signifie que vous devez déterminer la valeur réelle largeur/hauteur de l'image au moment de l'exécution (par exemple, via JavaScript), puis ajuster les valeurs de pixels que vous utilisez pour positionner absolument tout le reste pour en tenir compte.

Si vous pouvez l'éviter (par exemple, en offrant seulement quelques tailles standard), je vous recommande de l'éviter. Si vous ne le pouvez pas, je vous recommande d'utiliser une bibliothèque (comme jQuery, Prototype, YUI, Closure, ou any of several others) pour découvrir la largeur et la hauteur réelles de l'image.

réponse originale:

J'utilise le positionnement absolu en CSS avec des valeurs de pourcentage.

Ce serait le problème, alors. Si vous voulez placer avec précision quelque chose au-dessus d'une image, les pixels de l'image est fixe, vous aurez envie d'utiliser des valeurs de pixels plutôt que des pourcentages, comme celui-ci (live example):

CSS:

#main { 
    /* Ensure that #main is an offset container */ 
    position: relative; 
} 
#main img { 
    /* Position the image at 0,0 */ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 
#main div { 
    /* Position the div at 16,16 (middle of the 32x32 image */ 
    position: absolute; 
    left: 16px; 
    top: 16px; 
    background-color: white; 
    border: 1px solid black; 
    padding: 1px; 
}

HTML:

<body> 
    <p>Positioning example:</p> 
    <div id='main'> 
    <img src='http://www.gravatar.com/avatar/2f37f49d08a02f40fe0c86529969c47a?s=32&d=identicon&r=PG'> 
    <div>This starts half-way into and half-way down your gravatar</div> 
</body>

Source

2010-11-28 16:10:17

Désolé, ce que je veux dire est que j'ai l'image principale définie comme la hauteur de 50% et la largeur. Je vais éditer ma question maintenant. – Niall

Ok, désolé de ne pas être clair au début :) Je vais juste offrir 2 images de taille standard (une pour les écrans 4: 3 et un pour 16: 9 & 16:10) et calculer les positions en fonction de cela. Merci :) – Niall

@Niall: Pas de soucis, heureux que cela a aidé. –

Positionnement d'un objet sur une image en HTML + CSS

Répondre

Questions connexes