agir sur une class au survol d'une div.

Par vlad05, il y a 13 ans

Javascript

bonjour,
je dispose d'une page avec 4 galeries de peintures j'ai une fonction qui affiche les peintures au survol de miniatures et qui affiche des infos sur les toiles survolés ( nom taille et technique de peinture utilisé) mon pb est que j'affiche la class de chaque galerie alors que je ne voudrai que la class de la galerie survolée. il doit surement y'avoir moyen avec un this qqchose mais je ne trouve pas la solution.
si qqun peut m'aider... voici le code de la page.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="tinoo.css" />
        <title>Gallerie Mathilde Rossignol</title>
        <script src="js/jquery.js"></script>
        <script language="javascript">
            $(document).ready(function(){
                $(".galerie_img img").hide();
                $(".descript").hide();
                $("#galerie img").mousemove(function(){ 

                if (
                        $("#"+this.dataset.image).is(":hidden"))
                        {
                            $(".galerie_img img").stop().fadeOut();
                            $("#"+this.dataset.image).stop().fadeIn();
                            $(".descript").show();
                            $(".nom").text(this.dataset.nom);
                            $(".dim").text(this.dataset.dim);
                            $(".tech").text(this.dataset.tech);
                        }       
                });
                $('.galerie_nav').mouseout(function() {
                $(".galerie_img img").hide();
                $(".descript").hide();
                });         
            });
        </script>
    </head>

    <body>
        <div id="bloc_page">
                <header>
                <?php include("entete.php");?>
                </header>
                <div id="galerie">
                    <div id="galer4">   
                        <h3 class="titre_gal">2013</h3>
                        <div class="galerie_nav">
                            <img data-image="img1" data-nom="bulbatik" data-tech="Huile sur ToiLe" data-dim="100X100" src="images/2013/mini_bulbatik.jpg"/>
                            <img data-image="img2" data-nom="eclat fleuri" data-tech="Huile sur ToiLe" data-dim="90X140"src="images/2013/mini_eclat_fleuri.jpg"/>
                            <img data-image="img4" data-nom="Le Miroir des Âmes" data-tech="Huile sur ToiLe" data-dim="100X100"src="images/2013/mini_le_miroir_des_ames.jpg"/>
                            <img data-image="img5" data-nom="rayonnement residuel" data-tech="Huile sur ToiLe" data-dim="80X100"src="images/2013/mini_rayonnement_residuel.jpg"/>                           
                        </div>
                        <div class="galerie_img">
                            <img id="img1" src="images/2013/bulbatik.jpg"/>
                            <img id="img2" src="images/2013/eclat_fleuri.jpg"/>
                            <img id="img4" src="images/2013/le_miroir_des_ames.jpg"/>
                            <img id="img5" src="images/2013/rayonnement_residuel.jpg"/>
                            <div class="descript">
                                Nom : <span class="nom"></span>
                                Dimension :<span class="dim"></span>
                                Technique : <span class="tech"></span>
                            </div>
                        </div>
                    </div>
                    <div id="galer3">
                        <h3 class="titre_gal">2012</h3>
                        <div class="galerie_nav">
                            <img data-image="img7" data-nom="Déracinée" data-tech="Huile sur ToiLe" data-dim="60X120" src="images/2012/mini_deracinee.jpg"/>
                            <img data-image="img8" data-nom="Dérive" data-tech="Huile sur ToiLe" data-dim="60X80" src="images/2012/mini_derive.jpg"/>
                            <img data-image="img9" data-nom="Une Partition" data-tech="Huile sur ToiLe" data-dim="60X180" src="images/2012/mini_une_partition.png"/>
                            <img data-image="img10"data-nom="L'étincelLe D'été" data-tech="Huile sur ToiLe" data-dim="80X100" src="images/2012/mini_etincelle_d_ete.jpg"/>
                            <img data-image="img11"data-nom="Les PapilLons" data-tech="Huile sur ToiLe" data-dim="60X100" src="images/2012/mini_les_papilLons.jpg"/>
                            <img data-image="img12"data-nom="L'OeiL VoLcanique" data-tech="Huile sur ToiLe" data-dim="100X100" src="images/2012/mini_oeil_vulcanique.jpg"/>
                            <img data-image="img13"data-nom="PenSeur du Mont Roz" data-tech="Huile sur ToiLe" data-dim="60X80" src="images/2012/mini_penseur_et_mont_roz.jpg"/>
                            <img data-image="img14"data-nom="Sablier D'automne" data-tech="Huile sur ToiLe" data-dim="100X100" src="images/2012/mini_sablier_d_automne.jpg"/>
                        </div>  
                        <div class="galerie_img">
                            <span class="milieu">
                            <img id="img7" src="images/2012/deracinee.jpg"/>
                            <img id="img8" src="images/2012/derive.jpg"/>
                            <img id="img9" src="images/2012/une_partition.png"/>
                            <img id="img10" src="images/2012/etincelle_d_ete.jpg"/>
                            <img id="img11" src="images/2012/les_papilLons.jpg"/>
                            <img id="img12" src="images/2012/oeil_vulcanique.jpg"/>
                            <img id="img13" src="images/2012/penseur_et_mont_roz.jpg"/>
                            <img id="img14" src="images/2012/sablier_d_automne.jpg"/>
                            </span>
                            <div class="descript">
                                Nom : <span class="nom"></span>
                                Dimension :<span class="dim"></span>
                                Technique : <span class="tech"></span>
                            </div>
                        </div>
                    </div>
                    <div id="galer2">                       
                        <h3 class="titre_gal">2011</h3>
                        <div class="galerie_nav">
                            <img data-image="img15" data-nom="L'EnvoL" data-tech="Huile sur ToiLe" data-dim="100X120" src="images/2011/mini_envol.jpg"/>
                            <img data-image="img16" data-nom="La Rencontre des Possibles" data-tech="Huile sur ToiLe" data-dim="70X90" src="images/2011/mini_la_rencontre.jpg"/>
                            <img data-image="img17" data-nom="Le Monde de Maëlle" data-tech="Huile sur ToiLe" data-dim="60X100" src="images/2011/mini_monde_maellien.jpg"/>
                            <img data-image="img18" data-nom="Le Passeur" data-tech="Huile sur ToiLe" data-dim="80X80" src="images/2011/mini_passeant.jpg"/>
                            <img data-image="img19" data-nom="RadioPétroLe" data-tech="Huile sur ToiLe" data-dim="100X120" src="images/2011/mini_radio_petrole.jpg"/>
                            <img data-image="img20" data-nom="Sécheresse" data-tech="Huile sur ToiLe" data-dim="60X120" src="images/2011/mini_secheresse.jpg"/>
                        </div>  
                        <div class="galerie_img">
                            <img id="img15" src="images/2011/envol.jpg"/>
                            <img id="img16" src="images/2011/la_rencontre.jpg"/>
                            <img id="img17" src="images/2011/monde_maellien.jpg"/>
                            <img id="img18" src="images/2011/passeant.jpg"/>
                            <img id="img19" src="images/2011/radio_petrole.jpg"/>
                            <img id="img20" src="images/2011/secheresse.jpg"/>
                            <div class="descript">
                                Nom : <span class="nom"></span>
                                Dimension :<span class="dim"></span>
                                Technique : <span class="tech"></span>
                            </div>
                        </div>
                    </div>
                    <div id="galer1">
                        <h3 class="titre_gal">2007</h3>
                        <div class="galerie_nav">
                            <img data-image="img21" data-nom="" data-tech="Techniques mixtes" data-dim="80X100" src="images/2007/mini_arborescence.jpg"/>
                            <img data-image="img22" data-nom="" data-tech="Techniques mixtes" data-dim="80X100" src="images/2007/mini_bouquet.jpg"/>
                            <img data-image="img23" data-nom="" data-tech="Techniques mixtes" data-dim="70X90" src="images/2007/mini_evanaissance.jpg"/>
                            <img data-image="img24" data-nom="" data-tech="Techniques mixtes" data-dim="80X120" src="images/2007/mini_juste_au_bout.jpg"/>
                            <img data-image="img25" data-nom="" data-tech="Acrylique" data-dim="60X80" src="images/2007/mini_l_ouragan.jpg"/>
                            <img data-image="img26" data-nom="" data-tech="Techniques mixtes" data-dim="80X100" src="images/2007/mini_themagris.jpg"/>
                            <img data-image="img27" data-nom="" data-tech="Techniques mixtes" data-dim="Ø80" src="images/2007/mini_un_espace.png"/>
                        </div>
                        <div class="galerie_img">
                            <img id="img21" src="images/2007/arborescence.jpg"/>
                            <img id="img22" src="images/2007/bouquet.jpg"/>
                            <img id="img23" src="images/2007/evanaissance.jpg"/>
                            <img id="img24" src="images/2007/juste_au_bout.jpg"/>
                            <img id="img25" src="images/2007/l_ouragan.jpg"/>
                            <img id="img26" src="images/2007/themagris.jpg"/>
                            <img id="img27" src="images/2007/un_espace.png"/>
                            <div class="descript">
                                Nom : <span class="nom"></span>
                                Dimension :<span class="dim"></span>
                                Technique : <span class="tech"></span>
                            </div>
                        </div>
                    </div>  
                </div>
            <footer>
                <?php include("footer.php");?>
            </footer>
        </div>
    </body>

<html>

1 réponse

vlad05, il y a 13 ans

j'ai resolu mon pb en rajoutant une data, c'est surement pas le meilleur moyen et ca doit etre un peu lourd mais en attendant d'apprendre le php. voici ce que j'ai fait :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="tinoo.css" />
        <title>Gallerie Mathilde Rossignol</title>
        <script src="js/jquery.js"></script>
        <script language="javascript">
            $(document).ready(function(){
                $(".galerie_img img").hide();
                $("div[id^='descript']").hide();
                $("#galerie img").mousemove(function(){ 

                if (
                        $("#"+this.dataset.image).is(":hidden"))
                        {
                            $(".galerie_img img").stop().fadeOut();
                            $("#"+this.dataset.image).stop().fadeIn();
                            $(".nom").text(this.dataset.nom);
                            $(".dim").text(this.dataset.dim);
                            $(".tech").text(this.dataset.tech);
                            $("#"+this.dataset.descript).show();
                        }       
                });
                $('.galerie_nav').mouseout(function() {
                $(".galerie_img img").hide();
                $("div[id^='descript']").hide();
                });         
            });
        </script>
    </head>

    <body>
        <div id="bloc_page">
                <header>
                <?php include("entete.php");?>
                </header>
                <div id="galerie">
                    <div id="galer4">   
                        <h3 class="titre_gal">2013</h3>
                        <div class="galerie_nav">
                            <img data-image="img1" data-descript="descript1" data-nom="bulbatik" data-tech="Huile sur ToiLe" data-dim="100X100" src="images/2013/mini_bulbatik.jpg"/>
                            <img data-image="img2" data-descript="descript1" data-nom="eclat fleuri" data-tech="Huile sur ToiLe" data-dim="90X140"src="images/2013/mini_eclat_fleuri.jpg"/>
                            <img data-image="img4" data-descript="descript1" data-nom="Le Miroir des Âmes" data-tech="Huile sur ToiLe" data-dim="100X100"src="images/2013/mini_le_miroir_des_ames.jpg"/>
                            <img data-image="img5" data-descript="descript1" data-nom="rayonnement residuel" data-tech="Huile sur ToiLe" data-dim="80X100"src="images/2013/mini_rayonnement_residuel.jpg"/>                         
                        </div>
                        <div class="galerie_img">
                            <img id="img1" src="images/2013/bulbatik.jpg"/>
                            <img id="img2" src="images/2013/eclat_fleuri.jpg"/>
                            <img id="img4" src="images/2013/le_miroir_des_ames.jpg"/>
                            <img id="img5" src="images/2013/rayonnement_residuel.jpg"/>
                            <div id="descript1">
                                Nom : <span class="nom"></span>
                                Dimension :<span class="dim"></span>
                                Technique : <span class="tech"></span>
                            </div>
                        </div>
                    </div>
                    <div id="galer3">
                        <h3 class="titre_gal">2012</h3>
                        <div class="galerie_nav">
                            <img data-image="img7" data-descript="descript2" data-nom="Déracinée" data-tech="Huile sur ToiLe" data-dim="60X120" src="images/2012/mini_deracinee.jpg"/>
                            <img data-image="img8" data-descript="descript2" data-nom="Dérive" data-tech="Huile sur ToiLe" data-dim="60X80" src="images/2012/mini_derive.jpg"/>
                            <img data-image="img9" data-descript="descript2" data-nom="Une Partition" data-tech="Huile sur ToiLe" data-dim="60X180" src="images/2012/mini_une_partition.png"/>
                            <img data-image="img10"data-descript="descript2" data-nom="L'étincelLe D'été" data-tech="Huile sur ToiLe" data-dim="80X100" src="images/2012/mini_etincelle_d_ete.jpg"/>
                            <img data-image="img11"data-descript="descript2" data-nom="Les PapilLons" data-tech="Huile sur ToiLe" data-dim="60X100" src="images/2012/mini_les_papilLons.jpg"/>
                            <img data-image="img12"data-descript="descript2" data-nom="L'OeiL VoLcanique" data-tech="Huile sur ToiLe" data-dim="100X100" src="images/2012/mini_oeil_vulcanique.jpg"/>
                            <img data-image="img13"data-descript="descript2" data-nom="PenSeur du Mont Roz" data-tech="Huile sur ToiLe" data-dim="60X80" src="images/2012/mini_penseur_et_mont_roz.jpg"/>
                            <img data-image="img14"data-descript="descript2" data-nom="Sablier D'automne" data-tech="Huile sur ToiLe" data-dim="100X100" src="images/2012/mini_sablier_d_automne.jpg"/>
                        </div>  
                        <div class="galerie_img">
                            <span class="milieu">
                            <img id="img7" src="images/2012/deracinee.jpg"/>
                            <img id="img8" src="images/2012/derive.jpg"/>
                            <img id="img9" src="images/2012/une_partition.png"/>
                            <img id="img10" src="images/2012/etincelle_d_ete.jpg"/>
                            <img id="img11" src="images/2012/les_papilLons.jpg"/>
                            <img id="img12" src="images/2012/oeil_vulcanique.jpg"/>
                            <img id="img13" src="images/2012/penseur_et_mont_roz.jpg"/>
                            <img id="img14" src="images/2012/sablier_d_automne.jpg"/>
                            </span>
                            <div id="descript2">
                                Nom : <span class="nom"></span>
                                Dimension :<span class="dim"></span>
                                Technique : <span class="tech"></span>
                            </div>
                        </div>
                    </div>
                    <div id="galer2">                       
                        <h3 class="titre_gal">2011</h3>
                        <div class="galerie_nav">
                            <img data-image="img15" data-descript="descript3" data-nom="L'EnvoL" data-tech="Huile sur ToiLe" data-dim="100X120" src="images/2011/mini_envol.jpg"/>
                            <img data-image="img16" data-descript="descript3" data-nom="La Rencontre des Possibles" data-tech="Huile sur ToiLe" data-dim="70X90" src="images/2011/mini_la_rencontre.jpg"/>
                            <img data-image="img17" data-descript="descript3" data-nom="Le Monde de Maëlle" data-tech="Huile sur ToiLe" data-dim="60X100" src="images/2011/mini_monde_maellien.jpg"/>
                            <img data-image="img18" data-descript="descript3" data-nom="Le Passeur" data-tech="Huile sur ToiLe" data-dim="80X80" src="images/2011/mini_passeant.jpg"/>
                            <img data-image="img19" data-descript="descript3" data-nom="RadioPétroLe" data-tech="Huile sur ToiLe" data-dim="100X120" src="images/2011/mini_radio_petrole.jpg"/>
                            <img data-image="img20" data-descript="descript3" data-nom="Sécheresse" data-tech="Huile sur ToiLe" data-dim="60X120" src="images/2011/mini_secheresse.jpg"/>
                        </div>  
                        <div class="galerie_img">
                            <img id="img15" src="images/2011/envol.jpg"/>
                            <img id="img16" src="images/2011/la_rencontre.jpg"/>
                            <img id="img17" src="images/2011/monde_maellien.jpg"/>
                            <img id="img18" src="images/2011/passeant.jpg"/>
                            <img id="img19" src="images/2011/radio_petrole.jpg"/>
                            <img id="img20" src="images/2011/secheresse.jpg"/>
                            <div id="descript3">
                                Nom : <span class="nom"></span>
                                Dimension :<span class="dim"></span>
                                Technique : <span class="tech"></span>
                            </div>
                        </div>
                    </div>
                    <div id="galer1">
                        <h3 class="titre_gal">2007</h3>
                        <div class="galerie_nav">
                            <img data-image="img21" data-descript="descript4" data-nom="" data-tech="Techniques mixtes" data-dim="80X100" src="images/2007/mini_arborescence.jpg"/>
                            <img data-image="img22" data-descript="descript4" data-nom="" data-tech="Techniques mixtes" data-dim="80X100" src="images/2007/mini_bouquet.jpg"/>
                            <img data-image="img23" data-descript="descript4" data-nom="" data-tech="Techniques mixtes" data-dim="70X90" src="images/2007/mini_evanaissance.jpg"/>
                            <img data-image="img24" data-descript="descript4" data-nom="" data-tech="Techniques mixtes" data-dim="80X120" src="images/2007/mini_juste_au_bout.jpg"/>
                            <img data-image="img25" data-descript="descript4" data-nom="" data-tech="Acrylique" data-dim="60X80" src="images/2007/mini_l_ouragan.jpg"/>
                            <img data-image="img26" data-descript="descript4" data-nom="" data-tech="Techniques mixtes" data-dim="80X100" src="images/2007/mini_themagris.jpg"/>
                            <img data-image="img27" data-descript="descript4" data-nom="" data-tech="Techniques mixtes" data-dim="Ø80" src="images/2007/mini_un_espace.png"/>
                        </div>
                        <div class="galerie_img">
                            <img id="img21" src="images/2007/arborescence.jpg"/>
                            <img id="img22" src="images/2007/bouquet.jpg"/>
                            <img id="img23" src="images/2007/evanaissance.jpg"/>
                            <img id="img24" src="images/2007/juste_au_bout.jpg"/>
                            <img id="img25" src="images/2007/l_ouragan.jpg"/>
                            <img id="img26" src="images/2007/themagris.jpg"/>
                            <img id="img27" src="images/2007/un_espace.png"/>
                            <div id="descript4">
                                Nom : <span class="nom"></span>
                                Dimension :<span class="dim"></span>
                                Technique : <span class="tech"></span>
                            </div>
                        </div>
                    </div>  
                </div>
            <footer>
                <?php include("footer.php");?>
            </footer>
        </div>
    </body>

<html>