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

onmouseover/ out personnalisation

JavaScript

Vue hybride

Discussions similaires

Partager

Partager