11484 sujets

JavaScript, DOM et API Web HTML5

[résolu] Changer le background d'un div grace à javascript

Bonjour,

je cherche à afficher un fond différent à une balise div lors d'un survol sur mes liens. voici mon code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Document sans nom</title>

<link href="/include/stylePopNcarte.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

function setStyle()

{

document.getElementById("div_id").style.backgroundImage = 'url("file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-1.jpg")';

document.getElementById("div_id").style.backgroundImage = 'url(file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-2.jpg")';

document.getElementById("div_id").style.backgroundImage = 'url("file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-3.jpg")';

document.getElementById("div_id").style.backgroundImage = 'url("file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-4.jpg")';

}

</script>

</head>

<body>

<div id="mainpage">

	<div id="header"><h1>D&eacute;coblal</h1></div>

	<div id="fond">

		<div id="gauche">

			<a href="" onclick="setStyle(1)"><img src="/Images/popNw-pt-carte1.jpg" alt="Carte Bleue" width="99" height="64" border="0" class="img" /></a>

			<a href="" onclick="setStyle(2)"><img src="/Images/popNw-pt-carte2.jpg" alt="Carte Bleue" width="99" height="64" border="0" class="img" /></a>

			<a href="" onclick="setStyle(3)"><img src="/Images/popNw-pt-carte3.jpg" alt="Carte Bleue" border="0" class="img" /></a>

			<a href="" onclick="setStyle(4)"><img src="/Images/popNw-pt-carte4.jpg" alt="Carte Bleue" width="99" height="64" border="0" class="img" /></a>

		</div>

		<div id="droite">

				<h2>Blabla</h2>

				<h3>(cliquez sur une vignette, pour faire appara&icirc;tre la carte en taille r&eacute;elle). </h3>

				<h4>Cliquez ici pour obtenir des informations sur la commande<br />d'un nouveau visuel</h4>

		</div>

	</div>	

</div>

</body>

</html>

Modifié par WebBM (30 Aug 2007 - 14:24)
Bonjour,
deja je pense que mettre des chemins absolutcela n'est pas tres bien, essai les chemin relatif plutot.
Tu aurais pas oublier dans ta fonction un parametre ?

Je ne vois pas ton div_id donc je ne sais pas trop a quoi cela doit correspondre, car tu n'as aucun div de ce nom la.

De plus ta fonction devrai etre comme ceci

function setStyle(numstyle){
if(numstyle==1){
document.getElementById("div_id").style.backgroundImage = 'url("file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-1.jpg")';
}
else if(numstyle==2){
document.getElementById("div_id").style.backgroundImage = 'url(file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-2.jpg")';
}
else if(numstyle==3){
document.getElementById("div_id").style.backgroundImage = 'url("file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-3.jpg")';
}
else if(numstyle==4){
document.getElementById("div_id").style.backgroundImage = 'url("file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-4.jpg")';
}
}


Et faut que tu pense a changer le nom de ton getElementByid pour que cela correspond a une div de ta page.
Je souhaite changer le background de mon div droite

Mon div droite devient div_droit ?

et j'ai une autre question <a href="" onclick="setStyle(1)"> c'est bon?
Normalement cela devrai marcher comme j'ai pas les images je peux pas tester.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="/include/stylePopNcarte.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function setStyle(numstyle){
	if(numstyle==1){
		document.getElementById("droite").style.backgroundImage = 'url("file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-1.jpg")';
	}
	else if(numstyle==2){
		document.getElementById("droite").style.backgroundImage = 'url(file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-2.jpg")';
	}
	else if(numstyle==3){
		document.getElementById("droite").style.backgroundImage = 'url("file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-3.jpg")';
	}
	else if(numstyle==4){
		document.getElementById("droite").style.backgroundImage = 'url("file:///C|/Documents%20and%20Settings/MARE30B/Bureau/popNwCarte-4.jpg")';
	}
}
</script>
</head>
<body>
<div id="mainpage">
	<div id="header"><h1>D&eacute;coblal</h1></div>
	<div id="fond">
		<div id="gauche">
			<a href="#" onclick="setStyle(1)"><img src="/Images/popNw-pt-carte1.jpg" alt="Carte Bleue" width="99" height="64" border="0" class="img" /></a>
			<a href="#" onclick="setStyle(2)"><img src="/Images/popNw-pt-carte2.jpg" alt="Carte Bleue" width="99" height="64" border="0" class="img" /></a>
			<a href="#" onclick="setStyle(3)"><img src="/Images/popNw-pt-carte3.jpg" alt="Carte Bleue" border="0" class="img" /></a>
			<a href="#" onclick="setStyle(4)"><img src="/Images/popNw-pt-carte4.jpg" alt="Carte Bleue" width="99" height="64" border="0" class="img" /></a>
		</div>
		<div id="droite">
				<h2>Blabla</h2>
				<h3>(cliquez sur une vignette, pour faire appara&icirc;tre la carte en taille r&eacute;elle). </h3>
				<h4>Cliquez ici pour obtenir des informations sur la commande<br />d'un nouveau visuel</h4>
		</div>
	</div>	
</div>
</body>
</html>
Yo,

Houlala, tester en local ne t'empeche pas de mettre des adresses relatives, et enlever ces horribles file://blabla%20blabla qui ne fonctionneront jamais en ligne

Ensuite tu dis vouloir changer le fond lors d'un survol, or tu mets un onclick... donc je sais pas trop ce que tu veux réellement en fait

A ta place je commencerai par enlever ces onclick="" sur tes liens et je ferai comme ça :

Un boucle pour passer en revue tout tes liens qui sont dans #gauche.
Pour chacun de ces liens, attribuer à leur event onmouseover la fonction setStyle
Et définir une fonction setStyle qui :
1/ récupére l'adresse de l'image
2/ en déduit l'adresse de l'autre image que tu veux ajouter (après tout, les noms de fichiers sont sur le même modèle, il y a juste le numero qui change)
3/ cible #droite, et y attribue la nouvelle adresse comme image de fond
Sujet clos
Aller à