Bonjour tous le monde !

voilà, je viens aujourd'hui sollicité vos connaissance en JQuery pour pouvoir m'aider à avancer dans un projet perso . je suis actuellement entrain de bosser sur un site pour m'exercer un peu et je rencontre quelque difficulté.
il s'agit d'un site dont la structure est une grosse liste du genre :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
 
<ul>
     <li>Titre
          <div>Contenu</div>
     </li>
     <li>Titre
          <div>Contenu</div>
     </li>
</ul>
j'ai rendu ça dynamique avec du code jquery pour donnée une sorte de menu accordéon. Mon design lui est assez simple, j'ai une photo pleine ecran en fond, ainsi qu'un cadre avec une couleur en background dans mes div pour mon contenu.
Le problème que je rencontre est que je souhaiterai que lors ce que l'on clique sur un titre (qui ce trouve entre des li, les div s'affiche mais également que l'image de fond de mon site, (qui ce trouve dans mon body en background=url() soit modifier. voici le code que j'ai fait :

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
34
35
36
37
38
 
$(document).ready(function () {
 
	//Ma fonction pour changer l'image de fond						
	function changeBGImage(Image){
		if (document.body){
		document.body.style.backgroundImage = "url('IMG/"+Image+"')";
		}
	}						
 
     // On cache les sous-menus 
    // sauf celui qui porte la classe "open_at_load" : 
    $(".menu ul.subMenu:not('.open_at_load')").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".menu li.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="javascript:changeBGImage('image1.jpg')" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".menu li.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.subMenu:visible").length != 0) { 
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } ); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".menu ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } ); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    }); 
 
});
je pense que le gros du boulot est là, mais je bloque sur
Code : Sélectionner tout - Visualiser dans une fenêtre à part
 $(this).replaceWith('<a href="javascript:changeBGImage('image1.jpg')" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
Mes images sont rangés dans un dossier IMG à la racine de mon site et ce nome Image1.jpg Image2.jpg etc...

Quelqu'un aurait'il une idée pour que cela soit fonctionnel ?
Je vous remercie et bonne fin de semaine !