onmouseover/ out personnalisation

Version imprimable

23/04/2012, 09h47
programmatrice

onmouseover/ out personnalisation

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:

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

Hello, voilà qui fonctionne...

Entre les balises <HEAD> et </HEAD>

Code:

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

Ta table :

Code:

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:

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++

23/04/2012, 11h05
programmatrice

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!!!!
:)

Citation:

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:

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:

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...

Citation:

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?

23/04/2012, 11h30
programmatrice

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

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:

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???

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:

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++

23/04/2012, 14h15
programmatrice

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 :-))
23/04/2012, 14h35
wenijah

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

Voilà:

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
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>

23/04/2012, 15h07
programmatrice

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 :(

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:

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:

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:

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

:ccool:

23/04/2012, 15h49
programmatrice

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!
...
23/04/2012, 16h01
wenijah

1 pièce(s) jointe(s)

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...

:ccool:
23/04/2012, 16h20
programmatrice

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???
23/04/2012, 16h44
wenijah
Alors c'est soit un problème de répertoire, soit un problème de nom de fichier. Essaies ça dans le while:
Code:

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
23/04/2012, 18h37
programmatrice

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