Jquery action multiple au passage de la souris

Version imprimable

Bonjour a tous, voila j'ai une map en damier avec une class avatar et donc ce que je voudrais c'est que quand je clique sur .avatar et qu'ensuite je déplace ma souris sur la map les carreaux s'illuminent.
http://www.prelude-prod.fr/demo/pp3d...les/exemple-f/

C'est exactement comme dans cette exemple quand on déplace la souris des images apparaissent.

Et donc je cherche quelque conseil pour arriver a ce résultat.
Merci de votre aide

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
    $nombre = 1;
    echo '<table>';
    for($x =1;$x<9;$x++){
        echo'<tr>';
        for($y = 1;$y<9;$y++){
            if($nombre%2){
                $classe="caseBrun";
                
            }else{
                $classe="caseBlanc";
            }
    
            echo('<td><a onMouseOver="position('.$x.','.$y.')"><div id="'.$x.'|'.$y.'" class="'.$classe.'"></div></a></td>'); 
            $nombre++; 
              echo '<div class="avatar"></div>';
 
            
        }
        
      echo('</tr>');
        $nombre++;
   
    }
    echo('</table>');
     
     ?>

13/07/2012, 14h55
SpaceFrog

1) Merci de poster le html généré, pas le php
2) tu utilises jquery ?

Oui je veux utiliser jquery pour faire ça.
Voila le html mais ce qui m'importe c'est de trouver un moyen avec jquery pour réaliser l'exemple que j'ai donné si tu as une idée pour me lancer hésite pas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  <table>
      <tr>
          <td><a onMouseOver="position(1,1)"><div id="1|1" class="caseBrun"></div></a></td>
          <td><a onMouseOver="position(1,2)"><div id="1|2" class="caseBlanc"></div></a></td>
          <td><a onMouseOver="position(1,3)"><div id="1|3" class="caseBrun"></div></a></td>
      </tr>
      <tr>
          <td><a onMouseOver="position(2,1)"><div id="2|1" class="caseBrun"></div></a></td>
          <td><a onMouseOver="position(2,2)"><div id="2|2" class="caseBlanc"></div></a></td>
          <td><a onMouseOver="position(2,3)"><div id="2|3" class="caseBrun"></div></a></td><div class="avatar"></div>
      </tr>
      <tr>
          <td><a onMouseOver="position(3,1)"><div id="3|1" class="caseBrun"></div></a></td>>
          <td><a onMouseOver="position(3,2)"><div id="3|2" class="caseBlanc"></div></a></td>
          <td><a onMouseOver="position(3,3)"><div id="3|3" class="caseBrun"></div></a></td>
     </tr>
 
  </table>

un truc du genre :

Code:

1
2
3
4
5
 
$('td a').mouseenter(function(){
  params=$(this).find('div').attr('id').split('|');
  position(params[0],params[1]);           
})