IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

onmouseover/ out personnalisation


Sujet :

JavaScript

  1. #1
    Membre très actif
    Inscrit en
    Février 2011
    Messages
    137
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 137
    Par défaut 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 : 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

  2. #2
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2007
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2007
    Messages : 92
    Par défaut
    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++

  3. #3
    Membre très actif
    Inscrit en
    Février 2011
    Messages
    137
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 137
    Par défaut
    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!!!!

  4. #4
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2007
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2007
    Messages : 92
    Par défaut
    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?

  5. #5
    Membre très actif
    Inscrit en
    Février 2011
    Messages
    137
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 137
    Par défaut
    Vous parlez de onClick ! au niveau de quioi!? image ou lien!
    nn je connais pas le setAttribute en js?

  6. #6
    Membre très actif
    Inscrit en
    Février 2011
    Messages
    137
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 137
    Par défaut
    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???

  7. #7
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2007
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2007
    Messages : 92
    Par défaut
    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++

  8. #8
    Membre très actif
    Inscrit en
    Février 2011
    Messages
    137
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 137
    Par défaut
    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 :-))

  9. #9
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2007
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2007
    Messages : 92
    Par défaut
    En fait, on va faire plus simple. Tu n'as pas besoin de javascript grace au CSS3. Je reviens posté, donnes moi 10 minutes

  10. #10
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2007
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2007
    Messages : 92
    Par défaut
    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>

  11. #11
    Membre très actif
    Inscrit en
    Février 2011
    Messages
    137
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 137
    Par défaut
    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

  12. #12
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2007
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2007
    Messages : 92
    Par défaut
    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>

  13. #13
    Membre très actif
    Inscrit en
    Février 2011
    Messages
    137
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 137
    Par défaut
    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!
    ...

  14. #14
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2007
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2007
    Messages : 92
    Par défaut
    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...

    Fichiers attachés Fichiers attachés

  15. #15
    Membre très actif
    Inscrit en
    Février 2011
    Messages
    137
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 137
    Par défaut
    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???

  16. #16
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2007
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2007
    Messages : 92
    Par défaut
    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

  17. #17
    Membre très actif
    Inscrit en
    Février 2011
    Messages
    137
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 137
    Par défaut
    non tous va bien chez mon repertoire d'ailleurs lorsque j'elimine les classes css et le code JS ça marche!

Discussions similaires

  1. OnmouseOver et Out
    Par Friksstyle dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 03/12/2010, 16h08
  2. Onmouseover/out sur div avec IE8
    Par Kahlyv dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 26/11/2009, 17h21
  3. Réponses: 4
    Dernier message: 20/09/2009, 11h12
  4. Stopper onmouseover/out ( via cancelBubble)
    Par le_chomeur dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 17/04/2008, 14h28
  5. [onmouseover/out] pb IE
    Par kij dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 09/09/2007, 14h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo