Besoin d'aide en javascript
Fermé
amandine301091
Messages postés
3
Date d'inscription
lundi 19 mars 2012
Statut
Membre
Dernière intervention
19 mars 2012
-
19 mars 2012 à 15:14
ReDLoG - 20 mars 2012 à 22:16
ReDLoG - 20 mars 2012 à 22:16
A voir également:
- Besoin d'aide en javascript
- Telecharger javascript - Télécharger - Langages
- Javascript echo ✓ - Forum PHP
- Table de multiplication javascript ✓ - Forum Javascript
- 1fichier javascript ✓ - Forum Téléchargement
- Quelque chose bloque le fonctionnement de javascript sur votre ordinateur ✓ - Forum Virus
2 réponses
Bonjour,
ça devrait ressembler à un truc comme ceci, dans l'exemple on change le style de la couleur de fond de la page web, adapte-le pour que ce soit une image différente qui remplace la couleur :
Pour info, la propriété javascript est backgroundImage et tu peux utiliser pour l'image une url absolue (htt://www.tonsite.com/image/tonimagedefond.jgg) ou relative par rapport à la page web, dans le cas présent (image/tonimagedefond.jpg).
ça devrait ressembler à un truc comme ceci, dans l'exemple on change le style de la couleur de fond de la page web, adapte-le pour que ce soit une image différente qui remplace la couleur :
<html>
<head>
<title>• TEST •</title>
<script type="text/javascript">
function changeBackground() {
var color=document.getElementById('Color').value;
switch(color) {
case "yellow":
document.getElementById('Page').style.backgroundColor="#ffff00";
break;
case "red":
document.getElementById('Page').style.backgroundColor="ff0000";
break;
case "green":
document.getElementById('Page').style.backgroundColor="009900";
break;
case "blue":
document.getElementById('Page').style.backgroundColor="#000099";
break;
default:
document.getElementById('Page').style.backgroundColor="#fff";
break;
}
}
</script>
</head>
<body id="Page">
<form method="" action="">
<p>Changer la couleur de fond de la page <select id="Color" onChange="changeBackground()">
<option value="">Choix de couleur...</option>
<option value="yellow">Jaune</option>
<option value="red">Rouge</option>
<option value="green">Vert</option>
<option value="blue">Bleu</option>
</select></p>
</form>
</body>
</html>
Pour info, la propriété javascript est backgroundImage et tu peux utiliser pour l'image une url absolue (htt://www.tonsite.com/image/tonimagedefond.jgg) ou relative par rapport à la page web, dans le cas présent (image/tonimagedefond.jpg).
amandine301091
Messages postés
3
Date d'inscription
lundi 19 mars 2012
Statut
Membre
Dernière intervention
19 mars 2012
19 mars 2012 à 20:35
19 mars 2012 à 20:35
Merci pour ta réponse ! J'ai essayé d'appliquer tes instructions, mais ça ne fonctionne pas....
Voilà mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Amandine.Chazot</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
<script type="text/javascript" src="jquery-1.7.1.min.js">
function changeBackground() {
var color=document.getElementById('Color').value;
switch(color) {
case "sombre":
document.getElementById('page_index').style.backgroundColor="#ffff00";
break;
case "coloré":
document.getElementById('page_index').style.backgroundColor="ff0000";
break;
}
}
</script>
</head>
<body id="page_index">
<div id="conteneur">
<h1>Mon site Internet</h1>
<ul id="menu">
<li id="index"><a href="index.html">A propose de Moi</a></li>
<li id="formation"><a href="formation.html">Mon parcours professionnel</a></li>
<li id="mapassion"><a href="mapassion.html">Mon univers personnel </a></li>
</ul>
<form action="index.html" method="post" id="thème">
<p>Choix du thème de la page d'accueil :
<select id="color" onChange="changeBackground()">
<option value ="">Choisir...</option>
<option value ="sombre">thème sombre</option>
<option value ="coloré">thème coloré</option>
</select>
<input type="submit" value="Visionner le thème"/></p>
</form>
Comment puis-je faire pour par exemple modifier une image du thème sombre (la page initiale de mon site), ou encore modifier la couleur du texte ?
Merci de ton aide ....
Voilà mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Amandine.Chazot</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
<script type="text/javascript" src="jquery-1.7.1.min.js">
function changeBackground() {
var color=document.getElementById('Color').value;
switch(color) {
case "sombre":
document.getElementById('page_index').style.backgroundColor="#ffff00";
break;
case "coloré":
document.getElementById('page_index').style.backgroundColor="ff0000";
break;
}
}
</script>
</head>
<body id="page_index">
<div id="conteneur">
<h1>Mon site Internet</h1>
<ul id="menu">
<li id="index"><a href="index.html">A propose de Moi</a></li>
<li id="formation"><a href="formation.html">Mon parcours professionnel</a></li>
<li id="mapassion"><a href="mapassion.html">Mon univers personnel </a></li>
</ul>
<form action="index.html" method="post" id="thème">
<p>Choix du thème de la page d'accueil :
<select id="color" onChange="changeBackground()">
<option value ="">Choisir...</option>
<option value ="sombre">thème sombre</option>
<option value ="coloré">thème coloré</option>
</select>
<input type="submit" value="Visionner le thème"/></p>
</form>
Comment puis-je faire pour par exemple modifier une image du thème sombre (la page initiale de mon site), ou encore modifier la couleur du texte ?
Merci de ton aide ....
Bonsoir,
Pas besoin de bouton de soumission pour changer de thème, ça se fait automatiquement au moment de la sélection du thème dans la liste déroulante...
function changeBackground() {
var theme = document.getElementById('Theme').value;
switch(theme) {
case "sombre":
document.getElementById('page_index').style.backgroundImage = "url(themes/theme_sombre.jpg)";
document.getElementById('page_index').style.color = "white";
break;
case "colore":
document.getElementById('page_index').style.backgroundImage = "url(themes/theme_colore.jpg)";
document.getElementById('page_index').style.color = "black";
break;
}
}
</script>
<body id="page_index">
<form>
<p>Choix du thème de la page d'accueil : <select id="Theme" onChange="changeBackground()">
<option value ="">Choisir un thème...</option>
<option value ="sombre">thème sombre</option>
<option value ="colore">thème coloré</option>
</select></p>
</form>
</body>
Pas besoin de bouton de soumission pour changer de thème, ça se fait automatiquement au moment de la sélection du thème dans la liste déroulante...
