[SCRIPT] Changement de l'image background

Version imprimable

15/06/2007, 14h09
will74

[SCRIPT] Changement de l'image background

Bonjour à tous .

Je requière votre aide pour m'aider à créer un script qui me permettrait de changer l'image de fond de ma page web en cliquant sur un lien .
De même, au re-clic, l'image de fond par défault reviendrai...
Il ne me manque que le script avec la fonction .. je saurais la mettre en oeuvre avec l'appel "onClick" sur mon lien ..

Voilà si vous aviez des idées :D

a+

Will
15/06/2007, 14h11
SpaceFrog

Code:

onclick="document.body.style.backgrounsImage=url('image.jgp')"
15/06/2007, 14h13
will74

Ok j'avais trouvé quelque chose comme ceci ..
Le truc c'est que je voudrais que si on recliquait sur le lien, le background par défault revienne. Et c'est là ou je coince ;)

++

Code:

1
2
3
4
5
6
7
8
9
10
var toggle=false
var default=new Image()
default.src='imagedefaut.jpg'
var other=new Image()()
other.src='autreimage.jpg'
 
function changeBg(){
document.body.style.backgroundImage=(toggle)?url(other):url(default);
toggle=!toggle;
}

Code:

onclick="changeBg()"

15/06/2007, 14h23
will74

Merci je teste tout de suite :D
15/06/2007, 14h33
SpaceFrog

sauf qu'il faut commencer avec toggle true ^^
15/06/2007, 14h37
will74

sa ne marche pas ..
Voici le script avec les bonnes infos :

Citation:

/* ##### Start BACKGROUND ##### */
var toggle=true var default=new Image() default.src='main/bg.gif' var other=new Image()() other.src='bg-connect.gif' function changeBg(){ document.body.style.backgroundImage=(toggle)?url(other):url(default); toggle=!toggle; }
/* ##### End BACKGROUND ##### */

et voici mon lien :

Citation:

Kit designed to use in portofolio | <a href="#" onclick="toggle('div_connect');changeBg()">Go Connect™ </a>

y'a-t-il un erreur de ma part ?

Merci d'avance

PS: le chemin vers mes images doit-il est relatif à ma page web ou à mon fichier js ..?

Code:

1 2 3 4 5 6 7 var toggle=true; var default=new Image(); default.src='main/bg.gif'; var other=new Image() other.src='bg-connect.gif' function changeBg(){ document.body.style.backgroundImage=(toggle)?url(other):url(default); toggle=!toggle; }
Code:

Kit designed to use in portofolio | <a href="#" onclick="changeBg()">Go Connect™ </a>

15/06/2007, 14h50
will74

Pour mon lien il faut absolument que les deux fonctions s'enchaîneent..
Est-ce possible ?

Edit : même en remettant tout comme tu me le dis ça ne marche toujours pas ..8O
15/06/2007, 14h56
SpaceFrog

quelles deux focntion ??? il n'y en a qu'une

explique le comportement souhaité ???
15/06/2007, 15h05
will74

Il y à cette fonction qui permet de faire apparaître une div et de la faire disparaitre au second clic ..

Citation:

Kit designed to use in portofolio | <a href="#" onclick="toggle('div_connect')">Go Connect™ </a>

Ensuite, j'aimerais que lorsque la div apparaisse le fond d'écran change en même temsp pour donner un effet de cadre a cette div ..
Ainsi, au second clic, lorsque la dic disparaitrait, le fond d'écran redeviendrait par défault....

Ainsi de suite ...

Voici le fonction d'apparition de la div ..
Au pire, y'a-t-il possibilité de combiner celle-ci avec la fonction d'affichage du fon d'écran ?

Citation:

/* ##### Start CONNECT ##### */
function toggle(div_connect) {
var monElement = document.getElementById(div_connect);
if(monElement.style.display == 'none')
monElement.style.display = 'block';
else
monElement.style.display = 'none';
}
function toggleOn(div_connect) {
var monElement = document.getElementById(div_connect);
monElement.style.display = 'block';
}
function toggleOff(div_connect) {
var monElement = document.getElementById(div_connect);
monElement.style.display = 'none';
}
/* ##### End CONNECT ##### */

Merci d'avance
15/06/2007, 15h34
SpaceFrog

as tu au moins testé ma focntion ???

elle teste la valeur du flag toggle et donc change l'image une fois sur deux :roll:
15/06/2007, 15h40
will74

Oui je l'ai testé et elle ne marche pas :?

problème de quotes ...

Code:

1
2
 
function changeBg(){ document.body.style.backgroundImage=(toggle)?"url("+other+")":"url("+default+")"; toggle=!toggle; }

15/06/2007, 15h48
will74

Non sa ne fonctionne toujours pas 8O

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
var toggle=true;
 
var bg1="url('ball.gif')"
var bg2="url('bouton.jpg')"
 
function changeBg(){ document.body.style.backgroundImage=(toggle)?bg2:bg1;
            toggle=!toggle; }</script>
 
</head>
 
<body style="background-image=url('ball.gif');">
<input type="button" onclick="changeBg()" value="go" />
</body>
 
</html>

15/06/2007, 17h15
will74

Merci cela marche après quelques bidouillages

+++:D