jQuery et l'affichage d'image

**infooo** · 14/04/2014, 14h12

Bonjour,

J'ai crée un tableau qui contient plusieurs colonnes ( la dernière colonne contient un graphe), je veux que les images ne s'affiche que lorsque je survol la souris, je suis débutante Merci d'avance pour votre aide.

**la.lune** · 15/04/2014, 03h02

Mais afficher quand tu survoles la souris sur quoi? sur l'image qui est même caché? ou quoi? On ne peut pas t'aider si tu n'arrives pas à expliquer ton problème avec des exemples de code. On connaît pas la structure de tes éléments.

En tout cas je vais t'aider de façon abstraite comme tu parles de façon abstraite, je ne sais pas si tu regroupes tes éléments par bloc, et tu attribut des id par bloc, bon je suppose qu'il y a une liaison entre les éléments et que l’élément que tu survoles son id="IM1" et l'images son id est "imageIM1", donc le reste est id="IM2" et l'image id="imageIM2" et ainsi de suite, mais en plus de ça chaque élément que tu dois survoler possède une class="survoler", c'est à dire les élements avec les id="IM1","IM2".... on a la classe "survoler"
alors tu peux faire comme ça:

Code javascript :

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

1
2
3
4
5
6
7
8
$(".survoler").hover(function()
{   //Si la souris survole
     $("#image"+this.id).show(); //ou bien $("#image"+this.id).fadiIn();
},
function(){ 
    //Si la souris quitte le survole
     $("#image"+this.id).hide();//ou bien $("#image"+this.id).fadeOut();
});

**infooo** · 16/04/2014, 11h14

Merci Bien pour Votre Réponse.

Voila mon code, (TJ j'ai le même problème)

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?php
 
//Connexion a la base de données
// Remplacer localhost, asterisk, username, password, par vos informations de connexion.
$hostname = "localhost";
$database = "basednn";
$username = "root";
$password = "";
$Conn = mysql_connect($hostname, $username, $password) or die('Pb de connxion mysql');
 
mysql_select_db($database, $Conn);
$query_Stats = "SELECT  `user` ,  sum(`pause_sec`) as pause_sec ,  sum(`wait_sec`) as wait_sec ,  sum(`talk_sec`) as talk_sec,  sum(`dispo_sec`) as dispo_sec,  `status` ,  `user_group` ,  sum(`dead_sec`) as dead_sec 
                FROM  `vicidial_agent_log`
                group by user ";
$Stats = mysql_query($query_Stats, $Conn) or die(mysql_error());
 
 
 
 
?>
 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
 
<body>
<form method="post" action="test1.php">
<table width="200" border="1">
  <tr>
    <td width="50">USER</td>
    <td width="150">pause_sec</td>
	<td width="50">wait_sec</td>
    <td width="150">talk_sec</td>
	<td width="50">dispo_sec</td>
    <td width="150">status</td>
	<td width="50">user_group</td>
    <td width="150">dead_sec</td>
	<td width="150">Graphe</td>
  </tr>
   <?php while ($row_type_user = mysql_fetch_assoc($Stats)) { ?>
  <tr>
    <td><input type="hidden" name="nom" value="<?php echo $row_type_user['user']; ?>"><?php echo $row_type_user['user']; ?></td>
    <td><?php echo $row_type_user['pause_sec']; ?></td>
	<td><?php echo $row_type_user['wait_sec']; ?></td>
    <td><?php echo $row_type_user['talk_sec']; ?></td>
	<td><?php echo $row_type_user['dispo_sec']; ?></td>
    <td><?php echo $row_type_user['status']; ?></td>
	<td><?php echo $row_type_user['user_group']; ?></td>
    <td><?php echo $row_type_user['dead_sec']; ?></td>
	<td><?php echo "<img id='Graphe' src='test1.php?nom=".$row_type_user['user']."' alt='Le graphe' />"; ?></td>
  </tr>
  <?php }  ?>
</table>
</form>
<script>
$(".survoler").hover(function()
{   //Si la souris survole
     $("#Graphe"+this.id).show(); //ou bien $("#image"+this.id).fadiIn();
},
function(){ 
    //Si la souris quitte le survole
     $("#Graphe"+this.id).hide();//ou bien $("#image"+this.id).fadeOut();
});
</script>
</body>
</html>

**la.lune** · 16/04/2014, 16h26

Il faut expliquer un peu

Je n'ai pas le temps de fouiller ton code pour comprendre ce que tu veux faire, il faut dire que je veux passer la souris sur tel et afficher tel

**NoSmoking** · 16/04/2014, 18h40

Bonjour,

Code :

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

$(".survoler").hover(function()

signifie que tu es sensé avoir des éléments ayant pour class survoler, hors on n'en voit pas dans ton code.

Au passage

Code html :

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

1
2
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>

pourquoi charger 2 fois la librairie jQuery ?

jQuery et l'affichage d'image

jQuery

Vue hybride

Discussions similaires

Partager

Partager