[CSS]position:absolute; et image centrée

Bonjour à tous,

Je suis en train de créer une carte de répartition de parc de machines en Europe, pour cela j'utilise le style :

Code:

---

1 2 3 4 5

<div id="Test" STYLE="position:absolute; top:292px; left:257px; cursor:hand"> <a href="javascript:;" onmouseover="return overlib('Test2');" onmouseout="return nd();" > <img id="DOTTest" src="./img/mini.gif" border="0"> </a> </div>

---

sur une carte de l'europe au format gif.

Les coordonnées (ici 292,257) sont les coordonnées de villes donc pas trop modifiables sans quoi je risque de ne pas être précis.

Sur chacun de ce point j'utilise une icone de machine, la taille de l'icone varie en fonction de l'importance du parc.

Or il me semble que la référence qui est utilisée pour placer l'icône et le coin supérieur gauche de cette icone comme ceci (le rond sur mon dessin)

o----
| |
-----

Or comme mes icônes varient en taille cela donne des résultats assez désastreux avec des machines à Paris (gros parc donc grosse icone) qui se retrouvent dans le centre.

Je voudrais donc que la référence soit au centre de mon icône comme ça :

-----
| o |
-----

Quelqu'un peut-il me confirmer ceci ? Si oui quelqu'un aurait il un solution "propre" à me proposer ? (par propre j'entends pas de modification des coordonnées :D )

Merci d'avance à tous ceux qui liront et encore plus merci à ceux qui répondront !

Bonne soirée

Peut être ainsi:

Code:

---

1 2 3 4 5 6

<div id="Test" STYLE="position:absolute; top:292px; left:257px; cursor:hand"> <a href="javascript:;" style="position:relative;top:-50%;left:-50%;" onmouseover="return overlib('Test2');" onmouseout="return nd();" > <img id="DOTTest" src="./img/mini.gif" border="0"> </a> </div>

---

Je te conseille d'enlever le cursor:hand dans ton div, ca risque de tromper tes utilisateurs...

Slt,

Tes cercles, sont-ils calculés en fonction du parc ou alors est-ce que ce sont des images de tailles différentes en fonction du parc.

Dans l'hypothèse où tu calculerais les cercles, en connais-tu les rayons ou les surfaces ?

Dans ce cas, on pourrait peut-être utiliser les maths tout en considérant qu'un cercle s'inscrit dans un carré, et que dans ce cas le rayon constitue une demie médiane, ce qui nous donnerait le centre du carré (dans lequel est inscrit le rond............au cas où tu aurais décroché en route !!! :aie: ) que l'on pourrait placer où l'on veut.

Si ce sont des images, tu pourrais par exemple, avec photoshop, recadrer pour créer un carré pile poil autour de ton rond, relever la taille du carré, et avec un javascript calculer de façon à placer l'image où tu le souhaite.

Je te donne des pistes que je n'ai pas essayées moi-même, mais il serait intéressant d'essayer peut-être!

++

Succès

La solution :

Code:

---

1 2 3 4 5

<div id="Test" STYLE="position:absolute; top:292px; left:257px; cursor:hand"> <a href="javascript:;" style="position:relative;top:-50%;left:-50%;" onmouseover="return overlib('Test2');" onmouseout="return nd();" > <img id="DOTTest" src="./img/mini.gif" border="0"> </a> </div>

---

fonctionne sous IE mais pas sous Firefox (bon en même temps la cible utilisateur n'a pas Firefox donc pas trop grave).

Autant pour moi pour la main, tu as raison c'est un copier coller malheureux ;)

Merci de vos réponses !