Comment insérer un script de plusieurs lignes dans document.write()?

**Little Rey** · 27/06/2010, 15h09

Bonjour
Ma question semble peut-être farfelue et il y a surement moyen de faire plus simple, mais je suis graphiste et mon niveau en programmation n'est pas très avancé, alors voilà ma situation:

J'ai fait un design pour un forum, avec une bannière animée par roll-over distant sur les boutons. Jusque là tout va bien.
Maintenant je souhaite laisser le choix de la résolution au visiteur du forum, donc j'installe un sélecteur.
Pas de souci sur le principe, le sélecteur fonctionne, mais bien sur, uniquement pour le css... Logique!

Mon problème est ici: le roll-over en javascript fait appel à des images chargées de cette manière:

Code :

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

1
2
3
4
5
    image1 = new Image;   
    image1.src = "http://image1.png";   
    image2 = new Image;   
    image2.src = "http://image2.png";   
    etc...

Or ces images ne sont pas les même d'une version à l'autre!

Après plusieurs essais différents, ma dernière idée est de récupérer la variable du thème utilisée qui se trouve dans un cookie, et créer un petit scripte qui écrirait cette liste avec les bonnes images pour chaque thème,
ce qui donnerait quelque chose comme ça:

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
var type = getCookie('template1');
 
 
 
if (type == 'valeur1')
{
	document.write('<script type="text/javascript">   
    image1 = new Image;   
    image1.src = "http://image1.png";   
    image2 = new Image;   
    image2.src = "http://image2.png";   
    etc...
</script>
 
')}
else if (type == 'valeur2')
{
	document.write('<script type="text/javascript">   
    image1 = new Image;   
    image1.src = "http://image1bis.png";   
    image2 = new Image;   
    image2.src = "http://image2bis.png";   
    etc...
</script>
 
')}

Mais évidement ça ne marche pas. je me suis renseigné, j'ai lu que pour faire plusieurs lignes il fallait mettre <br> alors bon, j'ai essayé mais sans surprise ça ne marche pas, j'ai aussi mis des \ devant les /mais toujours rien, alors je sèche...
Merci d'avance!

**Bovino** · 27/06/2010, 19h54

Tout d'abord, les sauts de ligne en JavaScript n'existent que pour la présentation du code, mais l'interpréteur n'en a rien à faire...
Ensuite, c'est pas

Code :

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

image1 = new Image;

mais

Code :

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

image1 = new Image();

il faut aussi déclarer ses variables :

Code :

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

var image1 = new Image();

enfin, faire un document.write() est plus que déconseillé en général, mais lorsque c'est pour rajouter un script à l'intérieur d'un script, ça n'a absolument aucun intérêt :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var type = getCookie('template1');
var image1 = new Image();
var image2 = new Image();
etc...
if (type == 'valeur1')
{
    image1.src = "http://image1.png";
    image2.src = "http://image2.png";
}
else if (type == 'valeur2')
{
    image1.src = "http://image1bis.png";
    image2.src = "http://image2bis.png";
}

**Little Rey** · 27/06/2010, 22h37

Merci beaucoup de te pencher sur mon problème!
mais ça ne marche toujours pas.

j'ai bien remplis le scripte que tu m'a rendu corrigé et inséré dans la partie head à la place de l'ancien code, mais aucun résultat...

Voilà ce qui se trouve dans le body au cas ou:

Code html :

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

1
2
3
 
<img src="http://image1.png" name="img1" > 
<a href="http://lien.com"onMouseOver="img1.src=image2.src" onMouseOut="img1.src=image1.src">le lien</a>

une idée?
merci d'avance!

**Bovino** · 27/06/2010, 22h50

Code html :

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

1
2
<img src="http://image1.png" id="img1" > 
<a href="http://lien.com" onmouseover="document.getElementById('img1').src=image2.src" onmouseout="document.getElementById('img1').src=image1.src">le lien</a>

Sinon, merci de montrer le code complet

**Little Rey** · 27/06/2010, 23h37

Non ça ne marche toujours pas

Bon alors voici le code de la page qui fonctionne (mais sans sélecteur de thème)

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
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
 
 
 
<script type="text/javascript">   
    image1 = new Image;   
    image1.src = "http://img145.imageshack.us/img145/7353/blankl.png";   
    image2 = new Image;   
    image2.src = "http://img34.imageshack.us/img34/2815/train900px.gif"; 
    image3 = new Image;   
    image3.src = "http://img130.imageshack.us/img130/5397/plume900px.gif"; 
    image4 = new Image;   
    image4.src = "http://img130.imageshack.us/img130/7496/prolard900px.jpg"; 
    image5 = new Image;   
    image5.src = "http://img21.imageshack.us/img21/2077/poudlard900px.jpg"; 
    image6 = new Image;   
    image6.src = "http://img532.imageshack.us/img532/5429/portail900px.gif"; 
    image7 = new Image;   
    image7.src = "http://img145.imageshack.us/img145/1131/hiboux900px.gif"; 
    image8 = new Image;   
    image8.src = "http://img130.imageshack.us/img130/1597/harry900px.gif"; 
    image9 = new Image;   
    image9.src = "http://img532.imageshack.us/img532/2161/hagrid900px.gif"; 
    image10 = new Image;   
    image10.src = "http://img80.imageshack.us/img80/1379/bateau900px.gif"; 
 
 
</script> 
 
 
 
<body>
 
 
 
 
 
 
 
 
 
<div class="fond">
 
 
<div class="baniere">
<div class="preolard">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="preolard" > 
</div>
<div class="harry">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="harry" > 
</div>
<div class="portail">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="portail" > 
</div>
<div class="hiboux">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="hiboux" > 
</div>
<div class="plume">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="plume" > 
</div>
<div class="poudlard">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="poudlard" > 
</div>
<div class="hagrid">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="hagrid" > 
</div>
<div class="train">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="train" > 
</div>
<div class="bateau">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="bateau" > 
</div>
 
 
<div class="sinscrire900"><a href="http://fchp.forumactif.com/profile.forum?mode=register"onMouseOver="preolard.src=image4.src" onMouseOut="preolard.src=image1.src"></a></div>
 
<div class="profil900"><a href="http://fchp.forumactif.com/profile.forum?mode=editprofile"onMouseOver="harry.src=image8.src" onMouseOut="harry.src=image1.src"></a></div>
 
<div class="portail911"><a href="http://fchp.forumactif.com/portal.htm"onMouseOver="portail.src=image6.src" onMouseOut="portail.src=image1.src"></a></div>
 
<div class="messagerie900"><a href="http://fchp.forumactif.com/msg.forum?folder=inbox"onMouseOver="hiboux.src=image7.src" onMouseOut="hiboux.src=image1.src"></a></div>
 
<div class="membres900"><a href="http://fchp.forumactif.com/memberlist.forum"onMouseOver="plume.src=image3.src" onMouseOut="plume.src=image1.src"></a></div>
 
<div class="groupes900"><a href="http://fchp.forumactif.com/groupcp.forum"></a></div>
 
<div class="forum900v"><a href="http://fchp.forumactif.com/forum.htm"onMouseOver="poudlard.src=image5.src" onMouseOut="poudlard.src=image1.src"></a></div>
 
<div class="faq900"><a href="http://fchp.forumactif.com/faq.htm"onMouseOver="hagrid.src=image9.src" onMouseOut="hagrid.src=image1.src"></a></div>
 
<div class="dco900"><a href="http://fchp.forumactif.com/login.forum?logout=true" onMouseOver="train.src=image2.src" onMouseOut="train.src=image1.src"></a></div>
 
<div class="conect900"><a href="http://fchp.forumactif.com/login.forum?connexion"onMouseOver="bateau.src=image10.src" onMouseOut="bateau.src=image1.src"></a></div>
 
</div>

Lien vers la page (il s'agit de la bannière)

Et maintenant le code de la page teste qui ne fonctionne donc pas:

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
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
 
 
 
 
<script type="text/javascript">  
var type = getCookie('template1');
var image1 = new Image();
var image2 = new Image();
var image3 = new Image();
var image4 = new Image();
var image5 = new Image();
var image6 = new Image();
var image7 = new Image();
var image8 = new Image();
var image9 = new Image();
var image10 = new Image();
 
if (type == 'valeur1')
{
    image1.src = "http://img145.imageshack.us/img145/7353/blankl.png";
    image2.src = "http://img34.imageshack.us/img34/2815/train900px.gif";
    image3.src = "http://img130.imageshack.us/img130/5397/plume900px.gif";
    image4.src = "http://img130.imageshack.us/img130/7496/prolard900px.jpg";
    image5.src = "http://img21.imageshack.us/img21/2077/poudlard900px.jpg";
    image6.src = "http://img532.imageshack.us/img532/5429/portail900px.gif";
    image7.src = "http://img145.imageshack.us/img145/1131/hiboux900px.gif";
    image8.src = "http://img130.imageshack.us/img130/1597/harry900px.gif";
    image9.src = "http://img532.imageshack.us/img532/2161/hagrid900px.gif";
    image10.src = "http://img80.imageshack.us/img80/1379/bateau900px.gif";
 
}
else if (type == 'valeur2')
{
    image1.src = "http://img145.imageshack.us/img145/7353/blankl.png";
    image2.src = "http://img532.imageshack.us/img532/7034/train1000px.gif";
    image3.src = "http://img80.imageshack.us/img80/3693/plume1000px.gif";
    image4.src = "http://img80.imageshack.us/img80/7054/prolard1000.jpg";
    image5.src = "http://img532.imageshack.us/img532/1546/poudlard1000px.jpg";
    image6.src = "http://img15.imageshack.us/img15/4184/portail1000px.gif";
    image7.src = "http://img34.imageshack.us/img34/4245/hiboux1000px.gif";
    image8.src = "http://img21.imageshack.us/img21/4889/harry1000px.gif";
    image9.src = "http://img130.imageshack.us/img130/2921/hagrid1000px.gif";
    image10.src = "http://img34.imageshack.us/img34/1493/bateau1000px.gif";
}
</script> 
 
 
 
</head>
 
 
<body>
 
 
 
 
 
 
 
 
 
<div class="fond">
 
 
<div class="baniere">
<div class="preolard">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="preolard" > 
</div>
<div class="harry">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="harry" > 
</div>
<div class="portail">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="portail" > 
</div>
<div class="hiboux">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="hiboux" > 
</div>
<div class="plume">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="plume" > 
</div>
<div class="poudlard">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="poudlard" > 
</div>
<div class="hagrid">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="hagrid" > 
</div>
<div class="train">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="train" > 
</div>
<div class="bateau">
<img src="http://img145.imageshack.us/img145/7353/blankl.png" name="bateau" > 
</div>
 
 
<div class="sinscrire900"><a href="http://fchp.forumactif.com/profile.forum?mode=register"onMouseOver="document.getElementById('preolard').src=image4.src" onMouseOut="document.getElementById('preolard').src=image1.src"></a></div>
 
<div class="profil900"><a href="http://fchp.forumactif.com/profile.forum?mode=editprofile"onMouseOver="document.getElementById('harry').src=image8.src" onMouseOut="document.getElementById('harry').src=image1.src"></a></div>
 
<div class="portail911"><a href="http://fchp.forumactif.com/portal.htm"onMouseOver="document.getElementById('portail').src=image6.src" onMouseOut="document.getElementById('portail').src=image1.src"></a></div>
 
<div class="messagerie900"><a href="http://fchp.forumactif.com/msg.forum?folder=inbox"onMouseOver="document.getElementById('hiboux').src=image7.src" onMouseOut="document.getElementById('hiboux').src=image1.src"></a></div>
 
<div class="membres900"><a href="http://fchp.forumactif.com/memberlist.forum"onMouseOver="document.getElementById('plume').src=image3.src" onMouseOut="document.getElementById('plume').src=image1.src"></a></div>
 
<div class="groupes900"><a href="http://fchp.forumactif.com/groupcp.forum"></a></div>
 
<div class="forum900v"><a href="http://fchp.forumactif.com/forum.htm"onMouseOver="document.getElementById('poudlard').src=image5.src" onMouseOut="document.getElementById('poudlard').src=image1.src"></a></div>
 
<div class="faq900"><a href="http://fchp.forumactif.com/faq.htm"onMouseOver="document.getElementById('hagrid').src=image9.src" onMouseOut="document.getElementById('hagrid').src=image1.src"></a></div>
 
<div class="dco900"><a href="http://fchp.forumactif.com/login.forum?logout=true" onMouseOver="document.getElementById('train').src=image2.src" onMouseOut="document.getElementById('train').src=image1.src"></a></div>
 
<div class="conect900"><a href="http://fchp.forumactif.com/login.forum?connexion"onMouseOver="document.getElementById('bateau').src=image10.src" onMouseOut="document.getElementById('bateau').src=image1.src"></a></div>

Lien de la page teste (toujours la bannière)
Ici les animations dans la carte n'apparaissent plus...

**Bovino** · 28/06/2010, 10h05

Envoyé par Bovino

Code html :

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

1
2
<img src="http://image1.png" id="img1" > 
<a href="http://lien.com" onmouseover="document.getElementById('img1').src=image2.src" onmouseout="document.getElementById('img1').src=image1.src">le lien</a>

Comment insérer un script de plusieurs lignes dans document.write()?

JavaScript

Discussions similaires

Partager

Partager