Pas d'affichage d'images sur firefox mais oui sur les autres browsers

Pas d'affichage d'images sur firefox mais oui sur les autres browsers - HTML/CSS - Programmation

Marsh Posté le 24-11-2010 à 11:37:54    

Bonjour,
 
Je sèche sur une incompatibilité avec Firefox, c'est un pauvre diaporama qui fonctionne bien avec les autres navigateurs.
 
Lui là => http://zepitou.free.fr/diapo/diapo [...] refox.html
 
Le tout est ICI
 
C'est surement tout con mais je commence à désespérer de trouver l'origine du problème.
 
 :jap:


Message édité par rfv le 26-11-2010 à 19:03:34
Reply

Marsh Posté le 24-11-2010 à 11:37:54   

Reply

Marsh Posté le 24-11-2010 à 16:51:07    

Mouais, la réponse est dans la console d'erreur de Firefox (Ctrl+Shift+J). Tu utilises effectivement une spécifitié à IE.

Reply

Marsh Posté le 24-11-2010 à 17:08:23    

Ha ! ça progresse, j'ai découvert qq chose là :D Merci
 
ça marche nickel sous chrome, safari, ie, il n'y aurait pas moyen de rendre facilement le script compatible avec Firefox ?
 
Je suis sensé en déduire quoi de ce "MonImage is not defined" ? J'ai dû oublier qq chose apparament, une déclaration qq part, mais quoi et où ?
 
js noob inside,  :sweat: pataper.


Message édité par rfv le 24-11-2010 à 21:17:08
Reply

Marsh Posté le 25-11-2010 à 16:25:25    

tu fous un id sur "MonImage"  
<img src="" id="MonImage"/>
et ensuite tu fais
var img = document.getElementById('MonImage');
init(img)
 
voila c'est tout, c'est juste que IE est une sous merde trop permissive en JS. Et après du coup c'est la porte ouverte au mauvais code javascript


---------------
Blablaté par Harko
Reply

Marsh Posté le 25-11-2010 à 17:01:32    

Ne pas oublier le onclick aussi: remplacer "MonImage" par "this".

Reply

Marsh Posté le 26-11-2010 à 10:24:39    

On y est presque, je le tord dans tous les sens en vain, j'ai fais des choses inavouables  :o , faut pas m'abandonner maintenant [:agkklr]
 
J'avais ça :
 
  <DIV><span class="textenormal">cliquer sur l'image (bah y'en a pas sous Firefox, c'est balot).</span><br>
  <img name="MonImage" border="0" src="" alt="image" style="" onClick="changeImage(MonImage)"></DIV>
 
<script language="javascript" type="text/javascript">
  init(MonImage)
</script>
 
J'ai maintenant ça :
 
  <DIV><span class="textenormal">cliquer sur l'image (bah y'en a pas sous Firefox, c'est balot).</span><br>
  <img id="MonImage" border="0" src="" alt="image" style="" onClick="changeImage(this)"></DIV>
 
<script language="javascript" type="text/javascript">
var img = document.getElementById('MonImage')
init(img)
</script>
 
L'image 1 s'affiche mais la mise à jour lors du clic ne fonctionne pas.
Une petite édition du code de votre part ( :sweat: aprés vérif du bon fonctionnement) serait salutaire je vous cache pas.  :jap:


Message édité par rfv le 26-11-2010 à 10:45:58
Reply

Marsh Posté le 26-11-2010 à 17:35:58    

Ah ouais, quand même, je me demande comment ce code fait pour fonctionner :
 

Code :
  1. function changeImage(obj) {
  2.   if (timerAg != 0) {
  3.     clearTimeout(timerAg)
  4.     timerAg = 0
  5.   }
  6.   if (timerRe == 0) { timerRe = setTimeout("retrecirImage("+obj.name+" )",0) }
  7. }
  8.  
  9. function agrandirImage(obj) {
  10.   if (obj.width < largDepart) {
  11.     obj.width+=40
  12.     obj.height = hautDepart
  13.     timerAg = setTimeout("agrandirImage("+obj.name+" )",0)
  14.   }
  15.   else {
  16.     clearTimeout(timerAg)
  17.     timerAg = 0
  18.   }
  19. }


 
Assez fort quand même: tu passes une chaine de caractère (obj.name) à un callback, et comme par magie, il se transforme en référence sur ton objet dans la fonction. Le genre d'effet de bord que tu t'arraches les cheveux quand tu ne t'y attends pas.... le pire, c'est que ça fonctionne dans Safari. [:shlavos]  
 
Oui, je sais t'en a rien à foutre, tu as récupéré ce script dans la première poubelle du web venu, codé comme il y a 15 ans, et tout ce que tu demandes c'est que ça fonctionne. Bon, parce que ça fait vraiment trop mal aux yeux :
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  2.                         "http://www.w3.org/TR/html4/loose.dtd"> 
  3. <html> 
  4. <head> 
  5. <title>test</title> 
  6. <link href="style.css" rel="stylesheet" type="text/css"> 
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  8. </head> 
  9.  
  10. <body bgcolor="#FFFFFF"> 
  11. <table width="700"  border="0" align="center" cellpadding="0" cellspacing="0" id="Tableau_01"> 
  12.   <tr> 
  13.     <td width="700" height="0" align="left" valign="top"> 
  14.  
  15. <script type="text/javascript"> 
  16. var largDepart = 0 
  17. var hautDepart = 0 
  18. var numImg = 0 
  19. var timerRe = 0 
  20. var timerAg = 0 
  21. var tabImage = new Array() 
  22. tabImage[0] = "1.jpg" 
  23. tabImage[1] = "2.jpg" 
  24. tabImage[2] = "3.jpg" 
  25.  
  26. function init(obj) { 
  27.   obj.src = tabImage[numImg] 
  28.   largDepart = 640     
  29.   hautDepart = 480 
  30. } 
  31.  
  32. function changeImage(obj) { 
  33.   if (timerAg != 0) { 
  34.     clearTimeout(timerAg) 
  35.     timerAg = 0 
  36.   } 
  37.   if (timerRe == 0) { timerRe = setTimeout(retrecirImage,0) } 
  38. } 
  39.  
  40. function agrandirImage() { 
  41.   var obj = document.getElementById('MonImage') 
  42.   if (obj.width < largDepart) { 
  43.     obj.width+=40 
  44.     obj.height = hautDepart 
  45.     timerAg = setTimeout(agrandirImage,0) 
  46.   } 
  47.   else { 
  48.     clearTimeout(timerAg) 
  49.     timerAg = 0 
  50.   } 
  51. } 
  52.  
  53. function retrecirImage() { 
  54.   var obj = document.getElementById('MonImage') 
  55.   if (obj.width > 0) {  
  56.     obj.width-=40 
  57.     obj.height = hautDepart 
  58.     timerRe = setTimeout(retrecirImage,0) 
  59.   } 
  60.   else { 
  61.     clearTimeout(timerRe) 
  62.     timerRe = 0 
  63.     obj.src = tabImage[(numImg+1)%tabImage.length] 
  64.     numImg++ 
  65.     timerAg = setTimeout(agrandirImage,0) 
  66.   } 
  67. } 
  68. </script> 
  69.  
  70.   <DIV><span class="textenormal">cliquer sur l'image (bah y'en a pas sous Firefox, c'est balot).</span><br> 
  71.   <img id="MonImage" border="0" src="" alt="image" style="" onClick="changeImage(this)"></DIV> 
  72.  
  73. <script language="javascript" type="text/javascript"> 
  74.   init(document.getElementById("MonImage" )) 
  75. </script> 
  76.      
  77.     </td> 
  78.   </tr> 
  79. </table> 
  80. </body> 
  81. </html>


 
 
 

Reply

Marsh Posté le 26-11-2010 à 17:53:56    

T'as bien cerné la situation, gros gros merci pour ce sortage de la mouisse, du coup ça m'a donné envie de creuser un peu les bases, ça sera pas du luxe :o
 :jap:  :jap:  :jap:  :jap:  :jap:  :jap:
 
Edit : c'est vrai que c'est tout de suite plus compréhensible quand c'est codé correctement.


Message édité par rfv le 26-11-2010 à 18:42:40
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed