Fonction JS - changement background image au clique

Inkone · 13/03/2010, 19h51

Bonsoir tous le monde !

je viens vous voir car je bloque sur un petit code JavaScript :/
je suis entrain de bosser sur un petit site pour m'exercer, qui utilise des photos en background (pleine page).
pour monter mon interface, j'ai imbriquer des div dans des <li> jusque là, tous vas bien

. mais je voudrai que lors ce que l'on clique sur un des titre dans une balise <li>, que ça change mon image de fond en background. j'ai essayer de bosser sur une petite fonction javascript, mais le problème c'est que des que je place mes lien dans mes <div> dans les <li> ça ne fonctionne pas. Quelqu'un aurait-il une idée à me donner pour pouvoir faire fonctionner ce système ?
Autre problématique, je souhaiterai que au lancement du site on tombe automatique sur l'image 1.jpg,

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
<script language="JavaScript">
var backImage = new Array();
backImage[0] = "IMG/1.jpg";
backImage[1] = "IMG/2.jpg";
backImage[2] = "IMG/3.jpg";
backImage[3] = "IMG/4.jpg";
 
function changeBGImage(whichImage){
	if (document.body){
	document.body.background = backImage[whichImage];
	}
}
</script>
 
<div id="wrap-home">
	<div id="header">
    <img src="IMG/omgelogo.png" alt="Omega logo" />
    </div>
	<ul class="menu">
		<li class="toggleSubMenu"><span class="accueil"><a href="javascript:changeBGImage(1)">ACCUEIL</a></span>
        <ul class="subMenu">
        <div id="accueil-bloc">

Voilà, je vous remercie d'avance

bonne soirée et bon weekend tous le monde !

xess91 · 13/03/2010, 22h49

Salut Inkone,

pour se faire il faut que tu cibles l'élément style du body et aussi tu dois préciser si c'est un background-image ou color, il te manque dans ton array "url('')" et oui c'est comme ça que ça s'écrit : background-image:url('IMG/1.jpg'); et la tu écris background:IMG/1.jpg.

Et sinon pourquoi plutôt que de faire un array et des options, tu ne mettrais pas directement dans l'argument de la function le nom de l'image?

ce qui donnerait :

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
27
28
29
30
31
 
<html>
<head>
<script language="JavaScript">
 
function changeBGImage(Image){
	if (document.body){
	document.body.style.backgroundImage = "url('IMG/"+Image+"')";
	}
}
</script>
</head>
<body style="background-image:;">
 
<ul class="menu">
<li class="toggleSubMenu">
<span class="accueil">
<a href="javascript:changeBGImage('image1.jpg')">ACCUEIL</a>
</span>
</li>
<li class="toggleSubMenu">
<span class="accueil">
<a href="javascript:changeBGImage('image2.jpg')">ACCUEIL</a>
</span>
</li>
<li class="toggleSubMenu">
<span class="accueil">
<a href="javascript:changeBGImage('image3.jpg')">ACCUEIL</a>
</span>
</li>
<ul class="subMenu">

Je viens de voir aussi en refaisant ton code que tu as oublié de fermer la balise <li> et aussi que dans l'appel de ta fonction tu avais oublié de mettre l'argument entre apostrophes.

Voila bonne soirée.

Inkone · 14/03/2010, 09h05

Bonjour tous le monde !

merci xess91 pour tes remarque, effectivement pas besoin me mettre un array dans ce cas là. Cependant je n'arrive toujours pas à exécuter correctement cette fonction javascript (je début vraiment en javascript

). je suis partis sur le code suivant

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
27
28
29
30
31
32
33
<link href="CSS/style.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="JS/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="JS/menu.js"></script>
    <script type="text/javascript" src="JS/caroussel.js"></script>
 
 
<script language="JavaScript">
 
function changeBGImage(Image){
	if (document.body){
	document.body.style.backgroundImage = "url('IMG/"+Image+"')";
	}
}
</script>
</head>
<body style="background-image:;">
<div id="wrap-home">
	<div id="header">
    <img src="IMG/omgelogo.png" alt="Omega logo" />
    </div>
	<ul class="menu">
		<li class="toggleSubMenu"><span class="accueil"><a href="javascript:changeBGImage('image1.jpg')">ACCUEIL</a></span>
        <ul class="subMenu">
        <div id="accueil-bloc">
        <a href="javascript:changeBGImage('image3.jpg')">Lien</a>
        etc...
        etc...
        etc...
        </div>
        </ul>
        </li>
        </ul>
        </div>

Le problème qui viens ce rajouter à cela, est que j'ai fait un menu accordéon avec mes ul,li qui viennent parasiter mes href="javascript:changeBGImage

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
$(document).ready(function () {
    $(".menu ul.subMenu:not('.open_at_load')").hide(); 
"toggleSubMenu" 
 
    $(".menu li.toggleSubMenu span").each( function () { 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher le sous-menu"><strong>' + TexteSpan + '</strong><\/a>') ; 
    } ) ; 
    $(".menu li.toggleSubMenu > a").click( function () { 
        if ($(this).next("ul.subMenu:visible").length != 0) { 
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } ); 
        } 
        else { 
            $(".menu ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } ); 
        } 
        return false; 
    }); 
 
});

a cette ligne là :

Code :

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

$(this).replaceWith('<a href="" title="Afficher le sous-menu"><strong>' + TexteSpan + '</strong><\/a>') ;

je n'arriver pas à comprendre comment faire marcher ma fonction javacript. car je ne peux pas rajouter de href sur mes liens déjà identifiés dans ma fonction de menu accordéon, et même quand je créer de nouveau lien avec un href fonctionnel, il change juste le fond en noir mais pas d'image.
voilà ce que j'ai dans mon css au niveau du body :

Code :

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

body{margin:0; padding:0; background:#000; color:#000; font-family:Verdana, Geneva, Helvetica, sans-serif; font-size:12px;}

Si quelqu'un aurai une idée pour résoudre mon probléme, je suis prenneur

en attendant, passer un bon weekend.
Salut et merci.

xess91 · 14/03/2010, 11h45

Salut Inkone,

effectivement il y a une blocage entre ta fonction et celle de la biblio js que tu utilises.

Perso j'y connais rien en jquery ou autre, j'espère qu'un autre membre pourra t'aider.

14/03/2010, 11h45	#4
xess91 Membre actif Inscription : octobre 2008 Messages : 401 Détails du profil Informations personnelles : Âge : 28 Localisation : France, Paris (Île de France) Informations forums : Inscription : octobre 2008 Messages : 401 Points : 158 Points : 158	Salut Inkone, effectivement il y a une blocage entre ta fonction et celle de la biblio js que tu utilises. Perso j'y connais rien en jquery ou autre, j'espère qu'un autre membre pourra t'aider.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email