Ho un'immagine di sfondo alla quale voglio far corrispondere dei div in alcune sue posizioni fisse.
Solo che questa immagine può avere risoluzioni diverse.
Come si può automatizzare la corrispondenza tra div e parti dell'immagine?

Ad esempio ho provato a mettere un div che contiene l'immagine e emttere delle percentuali sulla posizione e le dimensioni del div:

codice:
div#container{
position:relative;
left:0px;
top:0px;
width:45%;
height:600px;
}
#s{
position:absolute;
left:43%;
top:3%;
width:40%;
height:28%;
}



<div id="container">
[img]PianoPrimo_Base_600.gif[/img]
<div id="s" class="rossoManuale" ></div>
</div>
Funziona bene fino a quando non si effettua uno zoom della pagina. In quel caso il div contenitore aumenta/diminuisce e di conseguenza le percentuali del div cambiano e sparisce la corrispondenza giusta tra div e parte dell'immagine.
Idem se carico la stessa immagine di dimensioni diverse.

Come posso realizzare la cosa?