Script galerie d'images : compatibilité Internet Explorer

**nal** · 04/08/2014, 13h59

Bonjour,

Je suis débutant en java et ai un problème avec un script java :
Il s'agit d'un script de galerie d'images défilantes : un bandeau d'images miniatures qui défilent lorsqu'on clique dessus et fait apparaitre l'image en grand à côté.
Sous IE plus rien n'apparait. ça ne fonctionne plus sous IE/ depuis plus d'un an (ce qui pourrait correspondre à la mise en service d'une nouvelle version d'IE ??

*Le script de la galerie fonctionne très bien sous Firefox et Google Chrome*

Quelqu'un verrait-il dans ce script ce qui a pu devenir incompatible avec IE et comment le modifier pour que ça fonctionne à nouveau?
Merci par avance pour votre aide !

Code :

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
 
<HTML>
<HEAD>
<SCRIPT language=JavaScript type=text/javascript>
function checkBrowser()
{
	this.ver=navigator.appVersion
	this.dom=document.getElementById?1:0
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0
	this.ie4=(document.all && !this.dom)?1:0
	this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0
	this.ns4=(document.layers && !this.dom)?1:0
	this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
	return this
}
 
bw=new checkBrowser()
 
sLeft=10
 
sTop=0
 
sMenuheight=50
 
sArrowwidth=15
 
sScrollspeed=20
 
sScrollPx=5
 
var tim=0
var noScroll=true
 
function mLeft()
{
	if(!noScroll && oMenu.x<sArrowwidth)
	{
		oMenu.moveBy(sScrollPx,0)
		tim=setTimeout("mLeft()",sScrollspeed)
	}
}
 
function mRight()
{
	if(!noScroll && oMenu.x>-(oMenu.scrollWidth-(pageWidth))-sArrowwidth)
	{
		oMenu.moveBy(-sScrollPx,0)
		tim=setTimeout("mRight()",sScrollspeed)
	}
}
 
function noMove()
{
	clearTimeout(tim); noScroll=true
}
 
function makeObj(obj,nest,menu)
{
	nest=(!nest) ? '':'document.'+nest+'.'										
   	this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0
	this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0
	this.scrollWidth=bw.ns4?this.css.document.width:this.evnt.offsetWidth
	this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.pixelLeft
	this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.pixelTop
	this.moveBy=b_moveBy; this.moveIt=b_moveIt
	this.showIt=b_showIt;this.clipTo=b_clipTo
	return this
}
 
function b_moveBy(x,y)
{
	this.x=this.x+x
	this.y=this.y+y
	this.css.left=this.x
	 this.css.top=this.y
}
 
function b_moveIt(x,y)
{
	this.x=x
	this.y=y
	this.css.left=this.x
	this.css.top=this.y
}
 
function b_clipTo(t,r,b,l)
{
	if(bw.ns4)
	{
		this.css.clip.top=t
 		this.css.clip.right=r
		this.css.clip.bottom=b
 		this.css.clip.left=l
	}
	else 
		this.css.clip="rect("+t+","+r+","+b+","+l+")"
}
 
function b_showIt()
{
	this.css.visibility="visible"
}
 
function sideInit()
{
	pageWidth=(bw.ns4 || bw.ns5)?innerWidth:document.body.offsetWidth-20
	oBg=new makeObj('divBg')
	oMenu=new makeObj('divMenu','divBg',1)
	oArrowRight=new makeObj('divArrowRight','divBg')
 
	oBg.moveIt(sLeft,sTop) 
 
	oMenu.moveIt(sArrowwidth,6)
	oArrowRight.moveIt(pageWidth-sArrowwidth,9)
 
	if(bw.dom || bw.ie4)
	{ 
		oBg.css.width=pageWidth
		oBg.css.overflow="hidden" 
	}
	oBg.clipTo(0,pageWidth,sMenuheight,0)
}
onload=sideInit
</SCRIPT>
</HEAD>
 
<BODY>
 
<DIV id=divBg>
<DIV id=divMenu>
<TABLE >
  <TBODY>
  <TR>
    <TD noWrap>
      <SCRIPT>
 
	 document.write(' <a href="peintures/im1.htm" target="central"><img src="peintures/Image1.jpg" width="36" height="56" border="0"></a> ');
	 document.write(' <a href="peintures/im2.htm"  target="central"><img src="peintures/Image2.jpg" width="50" height="56" border="0"></a> ');
     document.write(' <a href="peintures/im3.htm"  target="central"><img src="peintures/Image3.jpg" width="39" height="56" border="0"></a> ');
 
 
</SCRIPT>
 
</TD>
</TR>
</TBODY>
</TABLE>
 
</DIV>
<DIV id=divArrowLeft>
 
</DIV>
<DIV id=divArrowRight>
 
</DIV>
</DIV>
 
 
<table width="341" border="0" cellspacing="0" cellpadding="0" height="5">
 
<tr> 
   	<td valign="top" colspan="13" border=0 >
		<img src="images/compo_defil_a.gif" width="15" height="11" border=0>
	</td>
	<td valign="top" colspan="4" border=0>
		<A onmouseover="noScroll=false; mLeft()" onmouseout=noMove() href="#">
 
		</A>
	</td>
	<td valign="top" colspan="2" border=0>
		<img src="images/compo_defil_c.gif" width="46" height="11" border=0>
	</td>
	<td valign="top" colspan="4" border=0>
		<A onmouseover="noScroll=false; mRight()" onmouseout=noMove() href="#" >
 
		</A>
	</td>
	<td valign="top"  border=0>
		<img src="images/compopeintlast.gif" width="267" height="10" border=0>
	</td>
 </tr>
 
</table>
 
<SCRIPT>
 
	 document.write(' <a href="biblio.htm" target="central"><img src="images/pave_lune_extraits.jpg" width="160" height="124" border="0"></a> ')
 
 
</SCRIPT>
 
</BODY>
</HTML>

**Pill_S** · 04/08/2014, 14h07

Ici c'est Java, pas Javascript...

Tu vois quelques chose dans la console (F12)?

* Installe la debug bar IE si F12 ne fait rien

PS: il manque des quotes dans la balise script pour que cela soit correct...

**nal** · 04/08/2014, 14h42

Ok Merci! je vais voir

**nal** · 04/08/2014, 15h00

Envoyé par Pill_S

Ici c'est Java, pas Javascript...

Tu vois quelques chose dans la console (F12)?

* Installe la debug bar IE si F12 ne fait rien

PS: il manque des quotes dans la balise script pour que cela soit correct...

----
quelles quotes manque t-il dans la balise Script?

Avec F12 ça donne:
[code]
TypeError: url.toLowerCase(...).match(...) is null sf_preloader.jsp:1612
"InterYield Click Bind version 1.0-SNAPSHOT.7,096 20140731-1012" clickbinder.do:1
"InterYield click bind handler had no ad coverage." nocoverage.do:6
"InterYield click bind handler had no ad coverage."

</code>

**Pill_S** · 04/08/2014, 15h20

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<SCRIPT language=JavaScript type=text/javascript>

doit s'écrire comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script language="javascript" type="text/javascript">

m'enfin, je doute quand même que cela soit ça le problème...

**nal** · 04/08/2014, 15h52

Oui j'ai essayé ça ne semble pas venir de là...

**Pill_S** · 04/08/2014, 16h32

pfiou, c'est vraiment un code affreux et vieillot en tout cas...

aucune idée, regarde dans la console, et ajoute des "alert" ou "console.log" un peu partout, pour identifier où passe IE et où passent les autres browsers...

**nal** · 04/08/2014, 16h53

je vais peut-être essayé de trouver un autre code, javascript actualisé pour créer une galerie d'images défilantes...
je vais essayer ça en remplacement par cette galerie trouvée sur internet:

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
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="galerie">
  <ul id="galerie_mini">
    <li>
      <a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a>    </li>
    <li>
      <a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a>    </li>
    <li>
      <a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a>    </li>
    <li>
      <a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a>    </li>
    <li>
      <a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a>    </li>
    <li>
      <a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a>    </li>
    <li>
      <a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a>    </li>
    <li>
      <a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a>    </li>
    <li>
      <a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a>  </li>
</ul>
 
  <dl id="photo">
    <dt>Titre de la photo 1</dt>
    <dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
  </dl>
</div>
</body>

et créer un fichier script.js.

Code :

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
function displayPics()
{
  var photos = document.getElementById('galerie_mini') ;
  // On récupère l'élément ayant pour id galerie_mini
  var liens = photos.getElementsByTagName('a') ;
  // On récupère dans une variable tous les liens contenu dans galerie_mini
  var big_photo = document.getElementById('big_pict') ;
  // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
 
  var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
  // Et enfin le titre de la photo de taille normale
  // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
  for (var i = 0 ; i < liens.length ; ++i) {
    // Au clique sur ces liens 
    liens[i].onclick = function() {
      big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
      big_photo.alt = this.title; // On change son titre
      titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
      return false; // Et pour finir on inhibe l'action réelle du lien
    };
  }
}
 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;

On verra bien....

Script galerie d'images : compatibilité Internet Explorer

JavaScript

Discussions similaires

Partager

Partager