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

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:

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:

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!

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:

image1 = new Image;

mais

Code:

image1 = new Image();

il faut aussi déclarer ses variables :

Code:

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:

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"; }

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:

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!

Code:

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 ;)

Non ça ne marche toujours pas:?
Bon alors voici le code de la page qui fonctionne (mais sans sélecteur de thème)

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
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:

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...
:?

Citation:

Envoyé par Bovino

Code:

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>