[HTML Javascript] Préserver les style d'un document.writeln

Version imprimable

27/03/2006, 18h47
BahCmoi

[HTML Javascript] Préserver les style d'un document.writeln
Salut,

j'aimerais savoir comment peut-on préserver les styles issus d'un fichier CSS dans un WriteLine javascript...
Dans ma balise body je fais un

Code:

<body OnLoad="MaFonctionWriteLn()">

où ma fonctionMaFonctionWriteLn() est chargée en extrayant des paramètres de l'adresse href d'écrire dans le document à des endroits bien précis à l'aide de variables locales...
le problème c'est que les styles ne sont pas appliqués
par exemple, voici un bout de mon code:
Code:

1 2 3 4 [...] maString="<table><tr><td class=StyleTruc height=47 width=724 colspan=4><hr>" + MaVariableTexte + "</td></tr></table>"; [...] document.writeln(maString);
C'est le style "StyleTruc" qui n'est pas appliqué alors que dans mon doc est bien écrit:

Code:

<link href="../../messtyles/stylepage.css" rel=stylesheet type=text/css>

de toute façon, ces styles fonctionnent puisque je les exploite dans une autre page.

Pouvez-vous me dire comment je peux procéder pour que la mise en forme se fasse avec mon CSS ?
J'ai même essayé de les copier dans le doc lui-même, mais ça ne change rien...

Merci par avance
28/03/2006, 10h36
BahCmoi

Salut

euh j'ai provisoirement solutionné mon problème en greffant des balises

Code:

<font style="">

à la place des

Code:

class=MonStyle

mais je suis ouvert à toute proposition concernant cette possibilité.
28/03/2006, 11h08
javatwister

ton writeln charge une nouvelle page, exempte de toute css! comment veux-tu que les styles soient conservés?
29/03/2006, 14h39
BahCmoi

Citation:

Envoyé par javatwister

ton writeln charge une nouvelle page, exempte de toute css! comment veux-tu que les styles soient conservés?

Bonjour

Merci pour cette remarque/réponse...
Je m'en doute mais, j'ai bien mis cette référence dans mes <HEAD>

Code:

<link href="../../messtyles/stylepage.css" rel=stylesheet type=text/css>

Pourquoi il sait lire le OnLoad de la balise BODY (D'ailleurs, je ne comprends pas non plus pourquoi il ne sait pas attribuer mon BGCOLOR="#988EB1" de la balise BODY ...) et pas link href de la balise HEAD ?

Comment t'y prendrais-tu alors toi ?
Moi, ce que je souhaite, c'est ouvrir cette page et que du texte change dynamiquement dedans en fonction de ce que lui passe... Je comprends le principe mais pas le fonctionnement en toute apparence.

Merci d'avoir répondu
29/03/2006, 14h42
SpaceFrog

pourquoi fais tu un writeln ?

passe plutot par un innerHTML ou encore un createElement ...
29/03/2006, 14h47
BahCmoi

Re,

Ben parce que je sais pas faire autrement.
Le but est simple, j'ai une série d'image dans une page sous forme de mosaic et je clique sur une des images.
Là, une page s'ouvre avec l'image agrandie et le texte qu'il l'accompagne plus deux trois information en plus et dans la page il y a un lien pour fermer et revenir, c'est tout.
29/03/2006, 14h50
SpaceFrog

deux possibilités selon moi:

un popup et tu y colles ton image et ton texte

un div qu tu passe de display:none à display:bloc
29/03/2006, 14h51
javatwister

aucun rapport avec write 8O
tu mets la charrue avant les boeufs en voulant à tout prix utiliser une méthode plutôt qu'en cherchant les méthodes pour atteindre ton but;

ouvre une page prédéfinie (agrandissement.htm);
insère ton image proprement dans le corps de cette page;

Code:

1
2
3
4
5
6
7
8
9
mon_image.onclick=function(){
win2=window.open("agrandissement.htm","grand");
var adr=this.src.replace(".jpg","b.jpg");
var im=document.createElement("img");
im.src="adr";
var texte=liste_de_textes[indice_de_mon_image];
win2.document.getElementById("conteneur_image").appendChild(im);
win2.document.getElementById("conteneur_texte").appendChild(texte);
}

29/03/2006, 15h03
SpaceFrog

c'est comment dirais-je ...
pâtissier ? :mrgreen:
29/03/2006, 15h20
BahCmoi

merci javatwister.
j'ai pas bien compris... en testant ton code j'ai une erreur

Citation:

this.src est une valeur null ou n'est pas un objet
29/03/2006, 17h10
javatwister

si mon_image est bien une image définie, il n'y aura pas d'erreur;

Euh, oui, pour toi peut-être...
C'est comme tous les gens qui maitrisent leur truc, il ont l'impression que ce qu'il expliquent est compréhensible.
moi, je suis pas super à l'aise avec ce... langage... :roll:
voilà ce que j'ai écrit pour la page de test:
Code:

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 <html> <head> <title>Essai</title> </head> <script> function MaFonction() { win2=window.open("agrandissement.htm","grand"); var adr=this.src.replace(".jpg","b.jpg"); var im=document.createElement("img"); im.src="adr"; //**** var texte=liste_de_textes[indice_de_mon_image]; win2.document.getElementById("conteneur_image").appendChild(im); //**** win2.document.getElementById("conteneur_texte").appendChild(texte); } </script> <body> <img border="0" src="inspecteur.jpg" width="99" height="120" onclick="MaFonction()"> </body> </html>
et ça pour "agrandissement"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <html> <head> </head> <body> <div id="conteneur_image" style="width: 311; height: 380"> </div> <div id="conteneur_texte" style="width: 311; height: 10"> </div> </body> </html>
Dans ma racine j'ai une tite image (inspecteur.jpg) et une grande (inspecteurb.jpg)...
:arrow: je sens que je vais me faire jeter :)

29/03/2006, 17h43
javatwister
nan nan, t'en es pas loin!
c'est juste que j'avais prévu le code pour un nombre x d'images;

pour garder ton code, passe simplement this en paramètre;

Code:

<img onclick="MaFonction(this)" />

et dans la fonction
Code:

1 2 3 4 5 function MaFonction(obj){ // et tu peux remplacer "this" par "obj"; }
29/03/2006, 18h09
BahCmoi

ravie de savoir que j'étais pas loin :)
mais je maîtrise pas trop les tableaux en zavascript d'où mes REM devant les conteneurs texte
j'ai fait les modifs et j'ai une autre erreur :oops:

Citation:

win2.document.getElementById("conteneur_texte").appendChild(texte) est une valeur null ou n'est pas un objet

décidément, je suis pas douée
30/03/2006, 10h21
BahCmoi

Bon, c'est pas grave...
Je me débrouille autrement parce même avec ta réponse, javatwister, ça ne résound pas mon problème de CSS.
Je garde mes <font style=""> pour l'instant.

Merci pour vos réponses
03/04/2006, 11h08
BahCmoi

Bonjour,

J'ai fini par trouver...
En fait, je créée une nouvelle instance de la page à chaque clic sur mon image thumbnail qui faisait appel à l'instruction.

Code:

document.writeln(maString);

Mais pour exploiter mon CSS, il fallait aussi spécifier le chemin du CSS dans mon document.writeln()...
Ce qu je n'avais pas compris, c'était que la totalité de la page était générée. C'est en regardant le code source de la page que j'ai compris.

Maintenant ça marche impécablement bien.
Merci à ceux qui se sont intéressés à mon problème.