onmouseover/ out personnalisation

**programmatrice** · 23/04/2012, 09h47

bonjour a tous,
bon j'ai essayé ce code mais l'image disparait totalement, je voudrais lorsque je mets le curseur sur l'image reste la meme sauf que une autre images de taille petite s'afficher sur la premiere a coté en haut à droite! et comment personaliser l taille de la deuxieme image

Code :

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

echo '<tr><td><div><h3><img src="../userImage/' . $Valeur['img_Pr'] . '" height=100 width=150 onmouseover="this.src=\'../images/croix.jpg\'" onmouseout="this.src=\'../userImage/' . $Valeur['img_Pr'] .'\'" title="' . $Valeur['nom_Fr'] . '"></h3><h4>Produit:' . $Valeur['nom_Fr'] . ' </h4><h5>' . $Valeur['date'] .'</h5></div> </td><td> '.$desc.'<br>'.$desc2.'<br><br><br><br><br><br><br><br></td></tr>

Merci

**wenijah** · 23/04/2012, 10h33

Hello, voilà qui fonctionne...

Entre les balises <HEAD> et </HEAD>

Code css :

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

1
2
3
4
5
6
7
<style type="text/css">  
        .croix {  
		position: absolute;
		margin-left: -20px;
		margin-top: 5px;
        }  
</style>

Ta table :

Code html :

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
<tr>
	<td>
    	<div>
        	<h3 id="phot1"> <!-- ton id doit être unique -->
            	<img class="image" src="../userImage/<?php echo $Valeur['img_Pr'] ?>" height=100 width=150 
                onmouseover="javascript:hover('phot1');" // l'id unique
                onmouseout="javascript:hout('phot1');" // l'id unique
                title="titre">
            </h3>
            <h4>Produit: <?php echo $Valeur['nom_Fr'] ?></h4>
            <h5><?php echo $Valeur['date'] ?></h5>
         </div>
     </td>
     <td> <?php echo $desc ?> <br> <?php echo $desc2 ?>
     <br><br><br><br><br><br><br><br>
     </td>
</tr>

Juste avant </BODY>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
function hover(data){
	var current = document.getElementById(data);
	var croix = document.createElement('img');
	croix.src="../images/croix.jpg";
	croix.className="croix";
	croix.id="croix";
	current.appendChild(croix);
}
function hout(data){
	var croix = document.getElementById('croix');
	document.getElementById(data).removeChild(croix);
}
</script>

A++

**programmatrice** · 23/04/2012, 11h05

OHH Merci Bienn wenijah! ça me fait lgtmps que je cherche la solution!
Mais ça reste qq prob et détails pour pouvoir terminer le traitement! j'explique
Maintenat j'ai une mes images dans une boucle, votre code est executable que pour la prmiere image affiché comment appliquer sur le reste?de un
de deux, le croix qui va etre afficher va en fait servir l'utilisateur de supprimer cette image(publication), lorsqu'il clique sur ce croix tout un traitement php va s'effectuer donc la solution je pense c'est d'afficher ce croix comme un lien avec un href vers supprimer.php?idpub=$id
Comment alors procéder?
Encore MErci bien!!!!

**wenijah** · 23/04/2012, 11h24

votre code est executable que pour la prmiere image affiché comment appliquer sur le reste?

Hello, en fait, c'est assez simple, tu as plusieurs solutions:

A) Si c'est une requête SQL, récupère l'ID de la photo stockée dans la base de donnée et crée ta nouvelle variable.

Code php :

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
<tr>
	<td>
    	<div>
        	<h3 id="photo-<?php echo $sql['id'] ?>"> <!-- ton id doit être unique -->
            	<img class="image" src="../userImage/<?php echo $Valeur['img_Pr'] ?>" height=100 width=150 
                onmouseover="javascript:hover('photo-<?php echo $sql['id'] ?>');" // l'id unique
                onmouseout="javascript:hout('photo-<?php echo $sql['id'] ?>');" // l'id unique
                title="titre">
            </h3>
            <h4>Produit: <?php echo $Valeur['nom_Fr'] ?></h4>
            <h5><?php echo $Valeur['date'] ?></h5>
         </div>
     </td>
     <td> <?php echo $desc ?> <br> <?php echo $desc2 ?>
     <br><br><br><br><br><br><br><br>
     </td>
</tr>

B) Si ce n'est pas une requête SQL (ou même si s'en est une...), tu peux créer un compteur que tu mets à jour après chaque image. Exemple:

Code php :

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
<?php $num_image = 0; ?> <!-- créer le numéro d'image pour la première photo -->
<tr>
	<td>
    	<div>
        	<h3 id="photo-<?php echo $num_image ?>"> <!-- ton id doit être unique -->
            	<img class="image" src="../userImage/<?php echo $Valeur['img_Pr'] ?>" height=100 width=150 
                onmouseover="javascript:hover('photo-<?php echo $num_image ?>');" // l'id unique
                onmouseout="javascript:hout('photo-<?php echo $num_image ?>');" // l'id unique
                title="titre">
            </h3>
            <h4>Produit: <?php echo $Valeur['nom_Fr'] ?></h4>
            <h5><?php echo $Valeur['date'] ?></h5>
         </div>
     </td>
     <td> <?php echo $desc ?> <br> <?php echo $desc2 ?>
     <br><br><br><br><br><br><br><br>
     </td>
</tr>
<?php $num_image += 1; ?> <!-- metter à jour le numéro d'image en incrémentant +1 au numéro pour la photo 2
<tr>
	<td>
    	<div>
        	<h3 id="photo-<?php echo $num_image ?>"> <!-- ton id doit être unique -->
            	<img class="image" src="../userImage/<?php echo $Valeur['img_Pr'] ?>" height=100 width=150 
                onmouseover="javascript:hover('photo-<?php echo $num_image ?>');" // l'id unique
                onmouseout="javascript:hout('photo-<?php echo $num_image ?>');" // l'id unique
                title="titre">
            </h3>
            <h4>Produit: <?php echo $Valeur['nom_Fr'] ?></h4>
            <h5><?php echo $Valeur['date'] ?></h5>
         </div>
     </td>
     <td> <?php echo $desc ?> <br> <?php echo $desc2 ?>
     <br><br><br><br><br><br><br><br>
     </td>
</tr>
<?php $num_image += 1; ?> <!-- metter à jour le numéro d'image en incrémentant +1 au numéro pour la photo 3
 
etc...

le croix qui va etre afficher va en fait servir l'utilisateur de supprimer cette image(publication),
lorsqu'il clique sur ce croix tout un traitement php va s'effectuer donc la solution
je pense c'est d'afficher ce croix comme un lien avec un href vers supprimer.php?idpub=$id
Comment alors procéder?

Dans ce cas, tu peux simplement ajouter un onClick. Tu connais le setAttribute en javascript?

**programmatrice** · 23/04/2012, 11h30

Vous parlez de onClick ! au niveau de quioi!? image ou lien!
nn je connais pas le setAttribute en js?

**programmatrice** · 23/04/2012, 11h57

pour l'affichage des images je vais pas afficher chacune à part car c'est reccupéré a partir de la base de donnée donc j'avais un while

Code :

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

1
2
3
4
5
6
7
8
9
10
 while ($Valeur=$resultatpub->fetch())
        {$var = $Valeur['desc_Fr'];
$var2 = $Valeur['desc_En'];
$desc=bbcode($var);
$desc2=bbcode($var2);
			echo "<table>";
			$num_image=$Valeur['idpub'];
			echo '<tr><td><div><h3 id=$num_image>...
..
..}

Mais ça n'a pas marché toujours le crois s'affiche sur la premiere image affiché
et meme lorsque je mets le curseur sur une autre image le croix s'affiche dans la premiere???

**wenijah** · 23/04/2012, 13h45

Ok, je vois, alors voilà (j'ai pas testé mais ça devrait être bon ^^).

Pour le positionnement de la croix, je pars du principe que c'est un icone 16x16px. Si ce n'est pas le cas, il faut que tu fasses varier les margin-left et margin-top en fonction de la taille de ton image!

Inclus ta requête SQL dans cette page:

Code html :

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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans nom</title>
<style type="text/css">  
.croix {  
  position: absolute;
  margin-left: 134px;
  margin-top: -100px;
}  
</style>  
</head>
<body>
<table>
<?php
while($Valeur=$resultatpub->fetch()){
        $var = $Valeur['desc_Fr'];
        $var2 = $Valeur['desc_En'];
        $desc=bbcode($var);
        $desc2=bbcode($var2);
        ?>
    <tr>
	<td>
    	<div>
        	<h3 id="image_<?php echo $Valeur['idpub'] ?>">
            	<img class="image" src="../userImage/<?php echo $Valeur['img_Pr'] ?>" height=100 width=150 
                onmouseover="javascript:hover('image_<?php echo $Valeur['idpub'] ?>');" 
                onmouseout="javascript:hout('image_<?php echo $Valeur['idpub'] ?>');"
                title="titre">
            </h3>
            <h4>Produit: <?php echo $Valeur['nom_Fr'] ?></h4>
            <h5><?php echo $Valeur['date'] ?></h5>
         </div>
     </td>
     <td> <?php echo $desc ?> <br> <?php echo $desc2 ?>
     <br><br><br><br><br><br><br><br>
     </td>
</tr>
    <?php
}
?>
</table>
<script type="text/javascript">
function hover(data){
        var current = document.getElementById(data);
        var croix = document.createElement('img');
        croix.src="../images/croix.jpg";
        croix.className="croix";
        croix.id="croix";
        croix.setAttribute('onClick','remove('+data+')');
        current.appendChild(croix);
}
function hout(data){
        var croix = document.getElementById('croix');
        document.getElementById(data).removeChild(croix);
}
function remove(data){
        data = data.split('_');
        window.open('supprimer.php?idpub='+data[1]);
}
</script>
</body>
</html>

A++

**programmatrice** · 23/04/2012, 14h15

lorsque je clique sur le croix pour aller supprimer l'image ça marche pas et le temps que la souris est sur l'icone, cette derniere s'affiche comme si elle reçoit une éruption, pardon je ne trouve pas le mot mais elle s'affiche puis se cache dans une durée tre tre ptte alors le onClick ne fonctionne pas?
MErciiiiiiiii tojours pour votre aide :-))

**wenijah** · 23/04/2012, 14h35

En fait, on va faire plus simple. Tu n'as pas besoin de javascript grace au CSS3. Je reviens posté, donnes moi 10 minutes

**wenijah** · 23/04/2012, 14h48

Voilà:

Code html :

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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans nom</title>
<style type="text/css">
.display:hover .croix {
        display: block;
}
.display .croix {
        display: none;
        position: absolute;
        margin-left: 134px;
}
</style>
</head>
<body>
<table>
  <?php
while($Valeur=$resultatpub->fetch()){
        $var = $Valeur['desc_Fr'];
        $var2 = $Valeur['desc_En'];
        $desc=bbcode($var);
        $desc2=bbcode($var2);
        ?>
  <tr>
    <td>
    	<div>
        <h3 class="display"> <img class="croix" src="../images/croix.jpg" onClick="remove('<?php echo $Valeur['idpub'] ?>');"> <img class="image" src="../userImage/<?php echo $Valeur['img_Pr'] ?>" height=100 width=150 title="titre"> </h3>
        <h4>Produit: <?php echo $Valeur['nom_Fr'] ?></h4>
        <h5><?php echo $Valeur['date'] ?></h5>
		</div>
    </td>
    <td>
    	<?php echo $desc ?> <br>
    	<?php echo $desc2 ?> <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br></td>
  </tr>
  <?php
}
?>
</table>
<script type="text/javascript">
function remove(data){
        window.open('supprimer.php?idpub='+data); // supprime l'image
}
</script>
</body>
</html>

**programmatrice** · 23/04/2012, 15h07

noon ça n'a pas pas marché d'ailleurs mes images ne s'affichent plus!
pouveez vous resoudre le prob avec la premiere maniere
ça marche mais juste le onclique sur le croix ne marche pas?
Merci

**wenijah** · 23/04/2012, 15h35

Hello,

L'erreur est ailleurs. As-tu rajouté ta requête SQL avant le while?

Javascript n'est pas le langage d'interprétation le plus approprié au style de la page. Il faut passer par le CSS: plus simple et plus rapide.

Entre les balises <head> et </head>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
.display .croix {
	display: none;
	position: absolute;
	margin-left: 134px;
	cursor: pointer
}
.display:hover .croix {
	display: block
}
</style>

Dans le while

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
   <tr>
	<td>
    	<div>
        	<h3 class="display">
                <img class="croix" src="../images/croix.jpg" onClick="remove('<?php echo $Valeur['idpub'] ?>');">
            	<img class="image" src="../userImage/<?php echo $Valeur['img_Pr'] ?>" height=100 width=150 title="titre">
            </h3>
            <h4>Produit: <?php echo $Valeur['nom_Fr'] ?></h4>
            <h5><?php echo $Valeur['date'] ?></h5>
        </div>
    </td>
    <td> <?php echo $desc ?> <br> <?php echo $desc2 ?><br><br><br><br><br><br><br><br>
    </td>
	</tr>

En fin de page

Code :

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

1
2
3
4
5
<script type="text/javascript">
function remove(data){
	window.location.href=('supprimer.php?idpub='+data); // supprime l'image
}
</script>

**programmatrice** · 23/04/2012, 15h49

oui ma requete est tjrs effectué mais il semble que c'est au niveau du css ! j'ai encore essayé votre code et rien de nouveau!
deja au niveau du <h3> la classe display va etre appliquer aux deux images source et croix???est ce que ca marche!
...

**wenijah** · 23/04/2012, 16h01

Hello,

La classe display n'a aucun style. Ce qui est stylé, c'est la classe .display .croix, donc toute classe croix dans une classe display.

Décompresses l'archive jointe et ressaie...

**programmatrice** · 23/04/2012, 16h20

Merci!
C'est exactement ce que j'ai fait! j'ai tourné le pgm que vous mavez envoyé et cç a marché mais pour mon code il n'affiche meme les images???

**wenijah** · 23/04/2012, 16h44

Alors c'est soit un problème de répertoire, soit un problème de nom de fichier. Essaies ça dans le while:

Code php :

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

1
2
3
4
5
6
if(!file_exists("../userImage/".$Valeur['img_Pr'])){
echo "{
Error: 0001
Message: L'image n'existe pas.
}";
}

Et dis moi ce que tu vois

**programmatrice** · 23/04/2012, 18h37

non tous va bien chez mon repertoire d'ailleurs lorsque j'elimine les classes css et le code JS ça marche!

onmouseover/ out personnalisation

JavaScript

Discussions similaires

Partager

Partager