Discussion :

[will74]

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

a+

Will

[SpaceFrog]

Code :

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

onclick="document.body.style.backgrounsImage=url('image.jgp')"

[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

++

[SpaceFrog]

Code :

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

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;
}

et

Code :

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

onclick="changeBg()"

[will74]

Merci je teste tout de suite

[SpaceFrog]

sauf qu'il faut commencer avec toggle true ^^

[will74]

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

/* ##### 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 :

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

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 ..?

[SpaceFrog]

Code :

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

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 :

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

<p align="center">Kit designed to use in portofolio&nbsp;|&nbsp;<a href="#" onclick="changeBg()">Go Connect™ </a></p>

[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 ..

[SpaceFrog]

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

explique le comportement souhaité ???

[will74]

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

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

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 ?

/* ##### 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

[SpaceFrog]

as tu au moins testé ma focntion ???

elle teste la valeur du flag toggle et donc change l'image une fois sur deux

[will74]

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

[SpaceFrog]

problème de quotes ...

Code :

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

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

[will74]

Non sa ne fonctionne toujours pas

[SpaceFrog]

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
<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>

[will74]

Merci cela marche après quelques bidouillages

+++