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>
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é. –