Discussion :

[rams33]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>');
     
     ?>

[SpaceFrog]

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

[rams33]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[SpaceFrog]

un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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