Sommare un offset in pixel a tutti i link della pagina

[marco_c]

Ciao, cerco di spiegarvi dettagliatamente quello che sto cercando di fare:

ho una pagina che contiene un'immagine grande, all'interno dell'immagine ho dei link fatti a forma di box, che mi definiscono le varie aree cliccabili (i box) all'interno dell'immagine. Questa è la classe di questi box.

.box
{
    POSITION: absolute;
    DISPLAY: block;
    BACKGROUND-COLOR: yellow;
}
.box:hover
{
    BACKGROUND-COLOR: red;
} 

Questi link sono molti e sono dinamici, cioè estratti da un DB da PHP.
Quindi supponiamo che PHP estragga 2 record e generi 2 box, e genera quindi l'HTML, come segue:

[img]immagine.jpg[/img]
[url="pagina1.php"][/url]
[url="pagina2.php"][/url] 

Come vedete, dovendo generare dei box dinamici, ho usato l'attributo style direttamente nel box, potendo così differenziare le coordinate di un box da quelle di un altro.

Ora, le 4 coordinate che vedete, quelle che genera il PHP, sono relative al punto x=0,y=0 dell'angolo superiore sinistro dell'immagine grande. Mentre così come sono ora il browser le interpreterebbe come coordinate a partire dallo (0,0) dello schermo. Quindi a queste coordinate devo sommare la posizione dello (0,0) dell'immagine grande.

Nel tag BODY ho quindi messo che sull'onload venga calcolata la seguente funzione Javascript

var curleft;
var curtop;
function FindPosition(obj) 
{
    curleft = curtop = 0;
    if (obj.offsetParent) 
    {
        curleft = obj.offsetLeft;
        curtop = obj.offsetTop;
        while (obj = obj.offsetParent) 
        {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        }
    }
} 

che mi setta le variabili globali curleft e curtop rispettivamente con la coordinata x e y del punto 0,0 dell'immagine grande.

Quello che mi rimane da fare è sommare ai vari style dei box i 2 valori curleft e curtop, al fine di posizionare i box correttamente all'interno dell'immagine. L'operazione deve essere effettuata lato client, perchè lato server non ho ancora il punto 0,0 dell'immagine. Ho provato a usare eventi onmouseover e onmouseout direttamente sui box, ma questo dà il noto effetto di "flippamento" dei box, ovverto continuano a lampeggiare veloccissimi.

Mi sapreste indicare un modo statico per sommare gli style dei box? Qualcosa che nella mia mente si figura come ..

[br1]

Sinceramente mi pare un tantinello macchinoso... sarei piu' propenso a ricercare una soluzione con l'uso del posizionamento relativo... ovvero tutto gestito con css e calcoli lato server...

Ti sposto su CSS, eventualmente non risolvessi chiedi al moderatore di ri-spostarti qui