Mon script jquery ne fonctionne pas sous IE

Question

vlad05

9 Jun 2013 à 18:13

bonjour,
j'ai ecrit un petit script qui permet d'afficher des images et des informations au survol d'une miniature de l'image. Ce script fonctionne sur tout les navigateurs (firefox, chrome, opera, safari)
mais pas sous IE. Je ne sais pas si j'ai utilisé une fonction non reconnu sous IE ou autre bref , j'ai besoin d'aide. Mon site est en ligne a cette adresse : http://www.mat-signol.com/galerie.php
voici le code de ma 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>

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

Modifié par 6l20 (09 Jun 2013 - 19:40)

vlad05

9 Jun 2013 à 18:18

je remet l'adresse du lien qui ne fonctionne pas.
http://www.mat-signol.com/galerie.php
Modifié par 6l20 (09 Jun 2013 - 19:41)

vlad05

9 Jun 2013 à 18:23

je sais pas si j'utilise mal les balises mais l'adresse est la bonne en tout cas.

6l20

9 Jun 2013 à 19:45

vlad05 a écrit :
je sais pas si j'utilise mal les balises mais l'adresse est la bonne en tout cas.

Tu utilises mal les balises Smiley cligne

aide #12 a écrit :

Liens et URL dans le forum

Tout texte présentant la syntaxe particulière d'une url (http://....,www.....) ou d'un e-mail (...@...) sera automatiquement converti en lien. Si vous désirez créer des liens plus élaborés, vous pouvez utiliser le bouton [_lien] afin d'obtenir des liens de ce genre : [_url=url]texte[/url].

Sans le underscore après le premier crochet ouvrant Smiley cligne

DJousto

9 Jun 2013 à 20:43

à priori c'est la méthode "dataset" ligne 156 de ton code :

$("#"+this.dataset.image).is(":hidden"))

cette méthode apportée par le HTML5 n'est que partiellement supportée par IE, voir quelques explications et contournement ici www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html

Pour info tu as quelques outils bien pratiques sous IE pour débugger tes scripts, (touche F12 sous IE10).

vlad05

10 Jun 2013 à 13:17

j'ai effectivement bien ce message sur la console :
"SCRIPT5007: Impossible d’obtenir la propriété « image » d’une référence null ou non définie"
mais ma variable image (data-image est définie pour chaque image)
j'ai bien lu l'article sur le dataset, c'est d'ailleurs en le lisant que j'avais eu l'idee de passer mes données de cette facon mais je n'ai pas trouver de solutions.
si qqun a une idée ?

vlad05

10 Jun 2013 à 13:25

je viens d'inclure le plugin jquery.dataset.js
ca ne fonctionne pas mieu...

vlad05

10 Jun 2013 à 16:28

je viens de trouver la solution il fallait utiliser la fonction getAttribute pour que ca fonctionne sous IE.
voici le script :


		<script language="javascript">
			$(document).ready(function(){
				$(".galerie_img img").hide();
				$("div[id^='descript']").hide();
				$("#galerie img").mousemove(function(){ 
				if (
						$("#"+this.getAttribute('data-image')).is(":hidden"))
						{
							$(".galerie_img img").stop().hide();
							$("#"+this.getAttribute('data-image')).stop().show();
							$(".nom").text(this.getAttribute('data-nom'));
							$(".dim").text(this.getAttribute('data-dim'));
							$(".tech").text(this.getAttribute('data-tech'));
							$("#"+this.getAttribute('data-descript')).show();
						}		
				});
				$('.galerie_nav').mouseout(function() {
				$(".galerie_img img").hide();
				$("div[id^='descript']").hide();
				});			
			});
		</script>

~~supprimé~~

11 Jun 2013 à 10:56

http://api.jquery.com/jQuery.data/

ZeB_panam

12 Jun 2013 à 08:42

jb_gfx a écrit :
http://api.jquery.com/jQuery.data/

Je plussoie jb_gfx, pourquoi n'utilises tu pas data() ? Tu peux même filtrer, ex :


$("selector[data-image='path'")

Sujet clos