image et display : none;

**bluesmanu** · 19/12/2006, 19h46

Sur mon site, un javascript affiche une image aléatoirement en la choisissant parmi une dizaine d'images.
Lorsque je mets les images dans le même répertoire que la page elle-même, pas de problème, tout s'affiche bien. En revanche si je les change de répertoire et que j'ajoute le chemin dans src="", certains navigateurs (ie firefox 2) ajoutent dans la balise img un style="display:none;" qui fait que les images ne sont plus visibles. J'ai essayé de forcé le display à la main mais rien à faire, le none reste et mes images ne s'affichent pas.

any idea?

**blueice** · 19/12/2006, 20h01

Moi je dis arrête la fumette

Non sérieux, comment veux tu que le navigateur te rajoute de lui même un style pour un simple changement de dossier...

Donne nous plus de détails, du code, un lien...

**bluesmanu** · 19/12/2006, 23h39

Tout d'abord j'apprécierais beaucoup un autre type de réponse que "faut arrêter la fumette" merci.
Pour être plus clair, ce n'est peut être pas le navigateur qui rajoute du code mais lorsque j'inspecte le code lu avec une extension firefox je vois ce code en plus. De plus, si je vous donne un lien vous ne verez peut être pas le problème puisque ça ne le fait qu'avec firefox 2.0.

Code dans la page :

Code HTML :

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

1
2
3
<script type="text/javascript" language="JavaScript">
printImage();
</script>

et dans l'en tête de la page :

Code Javascript :

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
NumberOfImagesToRotate = 9;
FirstPart = '<img src="img/leftbanner/left';
LastPart = '.jpg" border="1px" alt="left banner"/>';
 
function printImage() {
  var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
  document.write('<tr><td align="center">'+FirstPart + r + LastPart + '</td></tr>');
  var t = 0;
  do
    {
      t=Math.ceil(Math.random() * NumberOfImagesToRotate);
    }
  while (t==r);
  document.write('<tr><td align="center">'+FirstPart + t + LastPart + '</td></tr>');
var k = 0;
  do
    {
      k=Math.ceil(Math.random() * NumberOfImagesToRotate);
    }
  while (k==r || k==t);
  document.write('<tr><td align="center">'+FirstPart + k + LastPart + '</td></tr>');
}

et lorsque j'inspecte la page dans firefox 2 ça me donne :

Code HTML :

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

<img border="1" alt="left banner" src="img/leftbanner/left3.jpg" style="display:none"/>

Si je ne met pas le img/leftbanner dans le javascript et que je mets mes images à la racine ça affiche correctement.

**coca25** · 20/12/2006, 00h03

comment tu arrives à voir le code source d'une page généré en javascript, firefox n'affiche pas le code source généré par document.write ()
aucun navigateur n'ajoute un "display:none" tout seul
donne le lien (y a bcp de personnes qui ont ff2)
on verra plus facilement le probleme

**MasterOfChakhaL** · 20/12/2006, 00h04

Salut,

A tout hasard, dans tes extensions firefox, il n'y en aurais pas une qui te permet d'éditer les css à la volée?
La suppresion de l'affichage des images est un classique des navigateurs qui offrent une utilisation avancée des styles, donc pourquoi pas un display: none pour arriver à cette fin.

Si ce n'est pas ça, c'est quand même étrange!!
Un navigateur qui se permet de rajouter du code de cette manière, comme disait mon vieil oncle anatol, c'est plus fort que le roquefort...

En tout cas, le problème ne vient pas de ton code (ou alors on n'a pas vu tout vu). Je concentrerais mes investigations sur firefox et ses extensions...

**blueice** · 20/12/2006, 07h00

Euh "bluesmanu" ici "blueice", je te souhaite la bienvenue et mon message comme l'indique les smileys était à prendre à la légère.

Pour en revenir à ton problème très étrange, je me range du côté de MasterOfChakhaL, en passant tu fermes mal ta balise <img... />il faut un espace avant le 'slash'

Code html :

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

<img src="#" alt="#" />

**Bisûnûrs** · 20/12/2006, 09h26

Tu t'embêtes vraiment pour rien avec un long code alors qu'on peut le faire en 3 lignes ...

Cf ce post : http://developpez.net/forums/showthread.php?t=248686

**bluesmanu** · 20/12/2006, 10h58

En effet, le code sur la page vers laquelle tu pointes est plus court. Cependant, j'ai trois images à afficher aléatoirement et elles doivent être toutes les trois différentes, d'ou la relative compléxité de mon code.

J'inspecte le code avec une extension de firefox, je crois que c'est firebug. Elle permet d'inspecter une page et de voir les bugs. En ballandant la souris sur la page l'extension affiche le code correspondant, après php et javascript.

la page : http://www.theleaguemusic.net.

Sur la partie gauche de la page, vous pouvez voir le logo "The League" normalement 3 images carrées s'affichent en dessous, en colonne. Si vous les voyez, tant mieux, moi je ne les vois pas...