mon script fonctionne sous tout les navigateurs, sauf sur IE...

vlad05
Javascript

Je ne sais pas s'il ya des fonctions à éviter ou des pratiques a bannir, ou encore faire des fonctions différentes. A priori le navigateur entre dans la fonction puisque les images sont cachés mais il ne les affiches pas au survol.
Le site est en ligne [url=http://www.mat-signol.com/galerie.php]www.mat-signol.com/galerie.php[/url]
voici le code qd meme:
[code]
<!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>

</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 Résiduel" 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">
                            <span class="nom"></span> - 
                            <span class="dim"></span> - 
                            <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">
                            <span class="nom"></span> - 
                            <span class="dim"></span> - 
                            <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">
                            <span class="nom"></span> - 
                            <span class="dim"></span> - 
                            <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="Arborescence" data-tech="Techniques mixtes" data-dim="80X100" src="images/2007/mini_arborescence.jpg"/>
                        <img data-image="img22" data-descript="descript4" data-nom="BouQuet" data-tech="Techniques mixtes" data-dim="80X100" src="images/2007/mini_bouquet.jpg"/>
                        <img data-image="img23" data-descript="descript4" data-nom="EvaNaissance" data-tech="Techniques mixtes" data-dim="70X90" src="images/2007/mini_evanaissance.jpg"/>
                        <img data-image="img24" data-descript="descript4" data-nom="Juste au Bout" data-tech="Techniques mixtes" data-dim="80X120" src="images/2007/mini_juste_au_bout.jpg"/>
                        <img data-image="img25" data-descript="descript4" data-nom="L'ouragan" data-tech="Acrylique" data-dim="60X80" src="images/2007/mini_l_ouragan.jpg"/>
                        <img data-image="img26" data-descript="descript4" data-nom="Théma Gris" data-tech="Techniques mixtes" data-dim="80X100" src="images/2007/mini_themagris.jpg"/>
                        <img data-image="img27" data-descript="descript4" data-nom="Un Espace" 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">
                            <span class="nom"></span> - 
                            <span class="dim"></span> - 
                            <span class="tech"></span>
                        </div>
                    </div>
                </div>  
            </div>
        <footer>
            <?php include("footer.php");?>
        </footer>
    </div>
    <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>

</body>

<html>
[/code]

et le css

[code]
html
{
height:100%;
}

body
{
height:100%;
margin:0px;
/background-image: url("images/fond13.jpg");/
/background-color: #6f6f6f;/
background-color: #d7d5d7;
font-family: Calibri,Trebuchet MS;
}

bloc_page

{
background-image: url("images/fond20.jpg");
background-position:center top;
background-repeat: no-repeat;
background-attachment:fixed;
width : 900px;
min-height:100%;
margin:auto;
}

/header/

entete

{
display:table;
}

lang,#titre,#menu

{
display: table-cell;
vertical-align:middle;
text-align:center;
}

titre

{
margin-right:50px;
border-width:10px;
border-style:solid;
border-color:rgba(0,0,0,0);
}

menu

{
width:800px;
}

lang

{
padding-left:10px;
width:50px;
}

header nav li
{
list-style-type: none;
margin:1px;
}

menu li

{
display:inline-block;
}

menu li a

{
background:rgba(255,255,255,0.5);
padding:5px 15px 5px 15px;
font-size:1.2em;
}

menu li a:hover

{
background:rgba(255,255,255,1);
}

h1
{
margin: 0 40px 0 0;
right:0px;
top:0px;
font-size : 1.8em;
text-align : center;
width: 300px;
background:rgba(255,255,255,0.5);
}

span
{
font-size : 0.8em;
}

h3
{
font-size:1.5em;
background:rgba(255,255,255,0.5);
text-align:center;
margin-right:50px;
margin-left:50px;
}

/footer//*
footer
{
width: 100%;
}

footer nav
{
text-align:center;
}

footer nav li:hover
{
text-decoration:underline;
}

footer nav li
{
display: inline-block;
list-style-type: none;
margin:4px;
}
/
/page actualité*/

titre_expo

{
position:relative;
left:100px;
width:200px;
}

tableau

{
background-color : rgba(255,255,255,0.5);
padding:20px;
top:120px;
left:20px;
min-width:600px;
margin: 20px 40px 20px 70px;
}

titre_contact

{
margin:50px 0 0 500px ;
width:200px;
}

text_contact1 ,#text_contact2

{
display: inline-block;
vertical-align: top;
}

form
{
text-align:left;
margin:60px 60px 40px 100px;
width:330px;
padding:20px;
background-color : rgba(255,255,255,0.5);
}

text_contact2

{
text-align:right;
margin:90px 45px 0 80px;
padding:20px;
background-color : rgba(255,255,255,0.5);
}

label
{
margin-top:25px;
}

input, textarea
{
padding:3px;
border:1px solid #d6dce2;
border-radius:5px;
width:300px;
background-color: white;
margin-bottom: 25px;
}

input[type=submit]
{
width:60px;
margin-left:5px;
cursor:pointer;
}

/page galerie/

.galerie_nav, .galerie_img
{
text-align:center;
}

.galerie_img
{
min-height:490px;
}

.milieu
{
display : table-cell;
vertical-align : middle;
text-align:center;
height:460px;
width:900px;
}

img[id^=img]
{
border: 2px solid white;
}

div[id^=descript] span
{
font-size : 1.2em;
color:white;
}

/page presentation/

titre_demarche

{
margin-left:75px;
width:300px;
}

titre_parcours

{
margin:50px 0 0 600px;
width:200px;
}

texte_demarche, #texte_parcours

{
width:700px;
background-color:rgba(255,255,255,0.5);
margin:10px;
padding:15px;
}

texte_demarche

{
margin-left:20px;
}

texte_parcours

{
margin-left:100px;
margin-top: 30px;
}

/page index/
a
{
text-decoration:none;
color:black;
}

{
background-color:rgba(255,255,255,1);
}

menu_index

{
position:relative;
background-color:yellow;
}
.index
{
text-align:center;
position:absolute;
background:rgba(255,255,255,0.5);
}

lien_pres, #lien_gal, #lien_actu

{
background:rgba(255,255,255,0.5);
width:200px;
text-align:center;
font-size:1.8em;
position:absolute;
}

lien_pres

{
top:50px;
left:140px;
}

pres1

{
left:40px;
top:110px;
width:180px;
}

pres2

{
left:160px;
top:160px;
width:100px;
}

lien_gal

{
right:100px;
top:170px;
}

gal1

{
right:160px;
top:230px;
width:60px;
}

gal2

{
right:80px;
top:260px;
width:60px;
}

gal3

{
right:145px;
top:310px;
width:60px;
}

gal4

{
right:110px;
top:370px;
width:60px;
}

lien_actu

{
left:100px;
top:410px;
}

actu1

{
left:50px;
top:480px;
width:120px;
}

actu2

{
left:210px;
top:530px;
width:90px;
}

[/code]

si qqun a une idée...

Aucune réponse