Alterner les images de fond

ah!
tu m'aiguille! merci beaucoup!
je sens que e commence à comprendre!

Pour ce faire, je vais avoir une page et différentes images dans son petit dossier associé.
Je vais les appeler par exemple pour ma page bam.php (qui contient 5 image) bam1.jpg, bam2.jpg, bam3.jpg, bam4.jpg.

Est ce que le code alors ca donne ca?
Merci de corriger, puisqu'il faudra forcement corriger!
Je me lance, wahouuu :...


<script language="javascript">
function changeBG(){
var actual_bg = document.body.background;
var newBgNum = Math.round(Math.random(0)*5)+1;
while ( actual_bg == '/images/bam'+newbamNum+'.gif'){
newbamNum = Math.round(Math.random(0)*5)+1;
}

document.body.background = '/images/bam'+newbamNum+'.gif';

}
</script>

<a href="#" onclick="changebam();return false;">Changer l'image de fond</a>

à ceci s'ajoute quelques questions : la dernière ligne signifie t'elle qu'en cliquant sur l'image, je procède au changement d'image, ou bien estce que cela peut venir d'un bouton?

autre petite question : est-ce-que gif est mieux que jpg pour une image de fond? (il s'agit pour ma part de vraies photos 560px par 550px, donc assez grande et quand je compresse mes images pour le web en général le gif est plus lourd que le jpeg) qu'en pense tu?

Voilà, merci pour ton / votre aide!

A très vite!
LAure

bonsoir!

Merci pour vos réponses.

Mais je ne comprends pas!

Je crois que j'utilise le langage php comme si j'utilisais du html. J'avais just eutilisé php pour pouvoir obtenir un formulaire de contact sur mon site, mais là je ne comprend pas ce que vous m'écrivez.

Est ce que vous avez un exemple de script pour que ca puisse m'éclairer? Je suis allée sur le jardinzen, comme indiqué dans le sposts, mais je ne vois pas le lien en question je pense..

Parce que pour le moment, je me dirige vers cette idée : fair eune page php par image( donc par fond d'écran) donc si 4 images alors image.php +image2.php + image3.php + image 4.php, et c'est fastidieux! Est ce que c'est ce dont vou sme parliez?

Merci beaucoup d'avance pour vos réponses, je sens que vous allez m'etre d'une aide précieuse!

A tres vite
Laure

Jusqu'aux différentes feuilles css, j'arrive à suivre (enfin je crois) mais je n'ai aucune idée de ce à quoi peut ressembler cette fameuse fonction php... J'ai regardé le code de jardin zen, mais je ne comprend rien, je décortique, je décortique, mais ca ne m'avanc epas vraiment...

Histoire de balises h1 h2 etc,..
C'est pourtant certainement très simple!

Mais comme je cherche à faires des tas de pages de mon site avec ces fameuses images de fond changeantes j'aimerais vraiment prendre le temps de comprendre.

Bonne âme pédagogue qui s'y connait bienvenue!
please please please :)


merci beaucoup d'avance

Laure

Très bien , merci, je vais faire des test rapidement, je te recontacterai je pense de toutes les manières, mais je pense que je commence à comprendre,

A très vite

Laure

Mais avec le désavantage de devoir recharger toute la page "juste" pour changer l'image de fond. En fonction du contenu du site, ca peut être moins avantageux.
Et pour les utilisateurs dont le JS est désactivé, on ne peut pas dire qu'ils perdent une grande fonctionnalité, et ne sont pas nombreux.

Et toutes les propriétés CSS sont ajustables en javascript. Mais forcément ca demande un développement plus poussé que ma petite fonction.

Alors, pour être sincère, je pense que je comprendrai mieux la solution des images de fond, rangées dans un sous-dossier de image1.jpg à imageX.jpg que je peux alterner avec le code que Xil m'a proposé et que j'ai essayé de recopier (sûrement avec des fautes pour le moment).

Mais : interrogation : c'est celui-ci qui fait recharger la page entière? Non ce sont les css?.. Je suis un peu perdue.
enfin.

Je commence à trouver une solution à ma requête, elle s'affine et va beaucoup m'aider pour la suite (je vous montrerai le résultat si vous voulez!)

Ce que je vais faire, c'est faire un test sur une page type, je vais vous donner le lien, comme ça vous aurez le code, et vous pourrez me dire ce qui cloche ou si bingo(!) c'est okay..

Si vous voulez bien prendre ce temps, ça serait super chouette!

Bon je m'y mets, et je poste à nouveau un message sur cette page du forum.
A très vite!
Laure

PS : appelez moi Laure, parce que pbimprimante c'est pas top! (je pensais pas que j'utiliserai ce site ensuite, et finalement c'est vraiment helpfull! vive les sites communaitaires, pour ma part j'ai filé mon bouquin de dreamweaver à un ami qui démarre, chacun aide à sa manière :) A tout'

yes merci, j'essaierais de tester les deux options dont la tienne pour voir laquelle me semble la plus adaptée ( en terme aussi de difficulté..)

mon script est dispo sur www.lauremanach.net/menu2/10joursapekin.php

je te remercie pour ton aide
et vais poster ma question aussi sur le forum de programmation pour ouvrir les réponses..

A bientôt

Laure

<style type="text/css">
<!--
.titre {font-family: "American Typewriter";
font-size: 22px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
white-space: normal;
display: inline;
}
.titrelight {font-family: "American Typewriter Light";
font-size: 22px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
white-space: normal;
display: inline;
}
.textebleu {font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
background-color: #FFFFFF;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
white-space: normal;
display: inline;
font-family: "American Typewriter";
color: #0080FF;
}
.textenglish {
font-family: "American Typewriter";
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
white-space: normal;
display: inline;
background-color: #FFFFFF;
}
.textefrancais {
font-family: "American Typewriter";
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #808080;
text-decoration: none;
background-color: #FFFFFF;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
white-space: normal;
display: inline;
}
a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: overline;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
}
#texte {
position:absolute;
left:10px;
top:50px;
width:500px;
height:300px;
z-index:1;
visibility: visible;
}
#imagesuivante {
position:absolute;
left:10px;
top:10px;
width:100px;
height:20px;
z-index:2;
visibility: visible;
}
#cachertexte {
position:absolute;
left:10px;
top:30px;
width:100px;
height:20px;
z-index:5;
visibility: visible;
}
#montrertexte {
position:absolute;
left:10px;
top:30px;
width:100px;
height:20px;
z-index:4;
visibility: hidden;
}
body {
background-image: url();
}

-->
</style>
<script language="javascript">
function changechina(){
var actual_bg = document.body.background;
var newBgNum = Math.round(Math.random(0)*12)+1;
while ( actual_bg == '/IMAGES/MENU2/china'+newBgNum+'.jpg'){
newBgNum = Math.round(Math.random(0)*12)+1;
}

document.body.background = '/IMAGES/MENU2/china'+newBgNum+'.jpg';

}

function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<div id="texte"><span class="textenglish">Workshop realised at Central Academy of Fine Arts of Beijing about ways to communicate by drawing in group. We worked in team mixed by both of the nationalities Chinese and French and we asked the culture of Design around the world. First game was to realised tools to draw at four. The concept we imagined was to fix pens on the wallI and carry together a hugde paper. By mooving in co-ordination and listenning each other, we realised a team sketch. <br />
Next of this experience we tried to find a way to confront what could be a Chinese usual object and French usual tool. We decide to work whith bambou tight sticks and rubberbands. We had to realise an animal! First soft the bamboo by drenching it in hot water, and thanks to rubberband we realise curvs on it. Finally we used ruberband for give a shape to the material and reuse it next to connect bamboo together what made a very long caterpillar, the symbol of transmigration (action of people to leave there country for anotherone), what was quite true at this time as we were travelling to a new way of create together.</span></div>
<div id="imagesuivante"><a href="#" class="textenglish" onClick="changechina();return false;">image suivante </a></div>
<div id="cachertexte" onfocus="MM_showHideLayers('texte','','hide','imagesuivante','','show','cachertexte','','hide','montrertexte','','show')"><span class="textenglish"><a href="#" onclick="MM_showHideLayers('texte','','hide','imagesuivante','','inherit','cachertexte','','hide','montrertexte','','show')">c</a></span><a href="#" onclick="MM_showHideLayers('texte','','hide','imagesuivante','','inherit','cachertexte','','hide','montrertexte','','show')"><span class="textenglish">acher le texte</span></a></div>
<div id="montrertexte" onfocus="MM_showHideLayers('texte','','show','imagesuivante','','show','cachertexte','','show','montrertexte','','hide')"> <span class="textenglish"><a href="#" onclick="MM_showHideLayers('texte','','show','imagesuivante','','inherit','cachertexte','','show','montrertexte','','hide')">m</a></span><a href="#" onclick="MM_showHideLayers('texte','','show','imagesuivante','','inherit','cachertexte','','show','montrertexte','','hide')"><span class="textenglish">ontrer le texte</span></a></div>

<p><a href="#" class="textenglish" onClick="changechina();return false;"></a></p>

je serai dispo a partir de demain soir, pour l'heure c'est un peu tendu. Je te remerci epour ton aide! rendez vous demain soir.. Je teste en fin d'apres midi ce que tu me propose samedi.

A +++

une question bete peut-être : mais je le place ou tout ca? J'ai un doute...

<!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>Untitled Document</title>
</head>

<body>
</body>
</html>


je dois l'appliquer dans un code entre <script> et </script> non?
mais dans body? dans head? avant? après?

yes thank you pour l'aide :)

Je pense avoir corriger cette erreur pourtant, ca ne fonctionne toujours pas.
Je te laisse ci contre l'adresse pour accéder au code (depuis le post, ça devient illisible..)

www.lauremanach.net/MENU2/10joursapekin.php

Je me demande si le problème ne vient pas de tout ca, qu'en penses tu?:

- le fait que dans mon dossier IMAGES/MENU2 : il y ai toutes les images qui correspondent au menu deux : donc china1 2 3 ... 12 , mais aussi projet1 projet2 projet3 (donc des images d'autres projets du MENU2 qui ne vont pas dans cette page 10joursapekin.php. Dans ce cas est-il préférable que je crée de nouveaux sous-dossiers?

- le fait que je n'ai pas d'image de fond par défaut quand je vais dans le panneau des propriétés sur DW.

- le fait que mon script est probablement bourré d'erreur :)

- le fait que j'ai modifié cette fameuse ligne du lien pour changer l'image de fond.

Mais tout de même, j'ai fidèlement copié/collé ton script qui normalement fonctionne. Je trouve ça étrange...

Bon, comme je ne veux pas faire n'importe quoi je suis repartie à zéro à partir de ton code, voici la page test que j'utilise pour le post dorénavant : http://www.lauremanach.net/menu2/test.php

le dossier images s'écrit exactement IMAGES
le sous-dossier menu2 dan simages s'écrit exactement : MENU2
et j'ai rangé les images dans des sousdossiers, le simages china sont d e1 à 12 et rangées dans ce sous-sous-dossier CHINA

Voila pour les infos nécessaires je pense.

Mais comment se fait il qu'il n'y ai absolument aucun fond d'écran par défaut?...

Tu peux installer Wampserveur, ou EasyPhp sur ton pc, ca fait office de serveur web et interpreteur PHP.
C'est relativement facile à installer, et la config par défaut est correcte pour un développement classique.