[JS] Script per far seguire il mouse da un div

[termopili]

Ciao a tutti.

Eccovi una tipica domanda da novellino: io ho questo script scopiazzato dalla rete che mi fa seguire il mouse da un div a comparsa (e fin qui tutto ok funziona alla grande), la domanda da novellino è: come faccio ad applicare questo script ad altri div oltre che a quello inserito?

Ecco lo script:

var divName = 'show_info'; // div che si sposta (la posizione deve essere definita assoluta) 
var offX = 15; // X offset dal puntatore del mouse 
var offY = 15; // Y offset dal puntatore del mouse 
function mouseX(evt) 
{ 
if (!evt) evt = window.event; 
if (evt.pageX) return evt.pageX; 
else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft: document.body.scrollLeft); 
else return 0; 
} 
function mouseY(evt) 
{ 
if (!evt) evt = window.event; 
if (evt.pageY) return evt.pageY; 
else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
else return 0; } function follow(evt) 
{ 
if (document.getElementById) 
{ 
var obj = document.getElementById(divName).style; 
obj.visibility = 'visible'; obj.left = (parseInt(mouseX(evt))+offX) + 'px'; 
obj.top = (parseInt(mouseY(evt))+offY) + 'px'; 
} 
} 
document.onmousemove = follow;

Come vedete questo è applicato al div show_info. Io vorrei applicarlo anche ad un ulteriore div (magari altri 100) che devono avere nomi diversi.
Ho provato già a riscriverlo cambiando tutte i nomi delle variabili, ma accade che funziona bene per il secondo div, ma per il primo mi restituisce il div a comparsa statico in mezzo alla pagina.

Qualche idea?

Grazie tante, ciao e buona serata a tutti!!!

[carlomarx]

Non ho capito proprio tutto tutto. Ma vedi se questo ti può essere utile…: https://developer.mozilla.org/en-US/...gable_elements

[termopili]

Grazie, ma non è quel di cui avevo bisogno...ma grazie lo stesso!!!
Ciao

[RoTeam]

<div id='show_info_1'>test</div>
<div id='show_info_2'>ciao</div>
<div id='show_info_3'>heyla</div>
<script>
    //div id, coordinata x da sottrarre o aggiungere a quella del mouse, idem per la coordinata y
var divs = new Array(
   [document.getElementById('show_info_1'),-40,-30],
   [document.getElementById('show_info_2'),30,0],
   [document.getElementById('show_info_3'),-40,10]
);
document.onmousemove = (function(event){
    for(i=0;i<divs.length;i++){ 
        if(divs[i][0].style.position != 'absolute') divs[i][0].style.position = 'absolute';
        divs[i][0].style.left = document.all ? window.event.clientX + divs[i][1] : event.pageX + divs[i][1];
        divs[i][0].style.top = document.all ? window.event.clientY + divs[i][2] : event.pageY + divs[i][2];
    }
});
</script>

Gestisci i div tramite array con le coordinate di posizionamento intorno al mouse e usa l'evento onmousemove direttamente

[termopili]

Grazie RoTeam, facendo una prova veloce non ha funzionato, ma più tardi andrò ad applicarlo con maggior attenzione.

Buona giornata, ciao!

[RoTeam]

Originariamente inviato da termopili
Grazie RoTeam, facendo una prova veloce non ha funzionato, ma più tardi andrò ad applicarlo con maggior attenzione.

Buona giornata, ciao!

Basta che crei una pagina html e la apri con chrome,firefox o ie o un buon browser insomma