Chargement d'arrière plan aléatoire et fondu

Résolu/Fermé

Julien Giuliano - 27 mai 2010 à 23:18
Julien Giuliano Messages postés 28 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 23 juin 2012 - 31 mai 2010 à 18:10

Bonjour,

Après plusieurs jours d'essai infructueux, je post mon problème.
Je cherche à faire une page web pour laquelle je souhaite un script qui fera charger aléatoirement une image d'arrière plan (parmis plusieurs) mais avec un effet de fondu.

Voici l'exemple de script pour cet effet d'apparition de l'arrière plan en fondu valable uniquement pour une image:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script> 
var opa=0 

function go(){ 
opa+=1 
if(document.all && !window.opera){ 
document.getElementById('imma').style.filter = 'alpha(opacity=' + opa + ');' ; 
} 
else{ 
document.getElementById('imma').style.opacity = opa/100; 
} 
if(opa>=100){ 
return false; 
} 
setTimeout(go,25); 
} 
</script> 
</head> 
<body onload='go()'> 
<img id="imma"STYLE="opacity:0;filter:0;position:absolute;top:150px;left:50px;"src='monimage.jpg'> 
</body> 
</html>

Voici un exemple de script de chargement aléatoire d'une image d'arrière plan (mais l'effet est mosaique ce que je ne recherche pas comme effet) :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript">

tbimage=new Array('accueil1.jpg','accueil2.jpg','accueil3.jpg','accueil4.jpg','accueil5.jpg','accueil6.jpg')

function pouic(){
document.body.style.cssText='background:url('+tbimage[Math.round(Math.random()*(tbimage.length-1))]+')'
}
</script>
</head>
<body onload='pouic()'>
</body>

Un dernier exemple de script de chargement aléatoire d'une image d'arrière plan parmis plusieurs et celle ci permet de centrer l'image, non pas de la faire apparaitre en mosaique :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<Script Language="JavaScript"> 
<!-- 
//liste des images 
var img1 = "accueil1.jpg" 
var img2 = "accueil2.jpg" 
var img3 = "accueil3.jpg" 
var img4 = "accueil4.jpg" 
var img5 = "accueil5.jpg" 
//en cas de modification, modifiez la valeur du randomize ci-dessous, ici 5 
var rnd = Math.round(Math.random()*5) 
//le 0 peut se produire.... 
if (rnd == 0){newimg = img1}; 
if (rnd == 1){newimg = img1}; 
if (rnd == 2){newimg = img2}; 
if (rnd == 3){newimg = img3}; 
if (rnd == 4){newimg = img4}; 
if (rnd == 5){newimg = img5}; 
//affichage du logo 
document.write('<center><IMG SRC="'+newimg+'"></center>') 
//--> 
</script> 

</head>
<body>
</body>

Je souhaite donc adapter le premier exemple de script que je viens de poster (chargement en fondu) avec le troisième script (chargement aléatoire d'arrière plan centré pas en mosaique).

On m'a décrit qu'il fallait procéder de cette facon :
Créer un tableau avec les images
var tbimage=new Array('accueil1.jpg','accueil2.jpg','accueil3.jpg','accueil4.jpg','accueil5.jpg','accueil6.jpg')

ensuite créer une fonction l'image de fond et a la fin de la fonction appeler l'autre fonction

Code Javascript :

function pouic(){
document.getElementById('imma').style.cssText='background:url('+tbimage[Math.round(Math.random()*(tbimage.length-1))]+')'
go()
}

Je n'arrive toujours pas à assembler ces deux fonctions, ces deux scripts.
J'espère qu'en ayant détaillé quelqu'un voudra bien m'aider à comprendre la procédure et m'aider à avoir un script valide. je suis notamment paumé entre les fonctions et le <head> et le <body>.
Si quelqu'un a un script en exemple à poster, cela serai super.

Encore merci d'avance pour le coup de main.

A voir également:

Chargement d'arrière plan aléatoire et fondu
Arrière plan - Guide
Youtube en arrière plan - Guide
Arriere plan pc - Guide
Flouter arrière-plan appel vidéo whatsapp android - Guide
Supprimer l'arrière plan d'une image paint - Guide

4 réponses

Réponse 1 / 4

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
27 mai 2010 à 23:40

Je t'oriente vers jQuery, la fonction fadein() est excellente.
Exemple:
$('#imma').css('background','image.jpg').fadein(1000);
avec 1000 correspond a 1000 millisecondes = 1 seconde.
Si tu as une variable qui contient aléatoirement le nom de l'image tu la met a la place de image.jpg, mais n'oubli pas de retirer les quotes ''

Julien Giuliano
27 mai 2010 à 23:46

pourrai tu être plus précis?
j'ai malheureusement travailler ces scripts depuis des jours en vain.
je ne connais pas jQuery.
J'ai voulu éviter flash malgrés mes bases car trop complexes. Donc je passe par dreamweaver et la suite adobe. Et je souhaite travailler en script.
La manip est possible. Beaucoup sur le net me dise que c'est possible mais je ne suis pas parvenu seul à assembler ces deux scripts pour un chargement aléatoire et en fondu de l'arrière plan de ma page d'accueil. et je n'ai pas trouver d'exemple concret de script.
C'est pour ca que j'ai poster à ce sujet. je n'en voit pas le bout.

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
27 mai 2010 à 23:51

Bon d'accord, je m'explique, jQuery est une bibliotheque javascript très riche et elle te fait eviter de créer toutes ces fonctions trop complexes.
Chez les développeurs, il y a une règle d'or: ne jamais développer une fonctionnalité existante sauf pour l'améliorer.
Je te conseille d'aller d'abord sur le site officier de jquery, telecharger la version la plus recente de jquery-1.3.2-min.js et revenir ici

Julien Giuliano
27 mai 2010 à 23:52

je continue de travailler le script en question je parvient à ca mais cela ne fonctionne toujours pas notamment parce que je ne sais pas si les <head> <body> et <script> sont bien constituer...je desespère

Julien Giuliano
27 mai 2010 à 23:53

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript">

var tbimage=new Array('accueil1.jpg','accueil2.jpg','accueil3.jpg','accueil4.jpg','accueil5.jpg','accueil6.jpg')

function pouic(){
document.getElementById('imma').style.cssText='background:url('+tbimage[Math.round(Math.random()*(tbimage.length-1))]+')'
go()
}

var opa=0 

function go(){ 
opa+=1 
if(document.all && !window.opera){ 
document.getElementById('imma').style.filter = 'alpha(opacity=' + opa + ');' ; 
} 
else{ 
document.getElementById('imma').style.opacity = opa/100; 
} 
if(opa>=100){ 
return false; 
} 
setTimeout(go,25); 
} 
</script>
</head>
<body onload='pouic()'>
</body>

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
27 mai 2010 à 23:54

je le vérifie et je revien vers toi

Réponse 2 / 4

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
28 mai 2010 à 02:58

Voila, avec jQuery on a besoin juste de quelques lignes de code:
Merci de tester
//*****************************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="javascript/jquery-1.3.2.js" ></script>
<script language="javascript">
$(document).ready(function() {

// Declaration d'un nouveau tableau contenant les noms d'images
var img = new Array()
img[0] = "accueil0.jpg",
img[1] = "accueil1.jpg",
img[2] = "accueil2.jpg",
img[3] = "accueil3.jpg";

//On cherche une valeur aleatoire en fonction de la dimension du tableau
var rnd = Math.round(Math.random()* img.length);

// on applique le background sur la div ayant l'id arriereplan
$('#arriereplan').css('background', 'url('+img[rnd]+') center center no-repeat');

// On redimensionne la div en fonction de la résolution de l'ecran
$('#arriereplan').css('width', screen.availWidth-50+'px');
$('#arriereplan').css('height', screen.availHeight+'px');

//On Place la div au centre de l'ecran
$('#arriereplan').css('left', '25px');
$('#arriereplan').css('top', '0px');

// On affiche la div progressivement sur 2 secondes
$('#arriereplan').fadeIn(2000); // 2000 equivaut a 2 secondes

});

</script>
</head>
<body style=" color:#CCC; background:#333">

<p style=" margin-left:200px; margin-top:150px;">
Le contenu html ici<br />
J'ai fait un petit test<br />
Genial, le texte se place devant l'image. J'espere que cela repond a ton besoin<br />
Le contenu html ici<br />
J'ai fait un petit test<br />
Genial, le texte se place devant l'image. J'espere que cela repond a ton besoin<br />
Le contenu html ici<br />
J'ai fait un petit test<br />
Genial, le texte se place devant l'image. J'espere que cela repond a ton besoin<br />
Le contenu html ici<br />
J'ai fait un petit test<br />
Genial, le texte se place devant l'image. J'espere que cela repond a ton besoin<br /></p>

<div id="arriereplan" style=" display:none; z-index:-5; position:absolute;"></div>
</body>
</html>

Julien Giuliano
28 mai 2010 à 03:10

malheureusement non j'ai ton texte qui s'affiche derrière arrière plan couleur gris. c tout. j'ai vérifier tu as écris accueil1.jpg etc. donc tu ne t pas trompé de nom j'ai mes images dans le meme dossier que la page html.je comprend pas pourquoi ce script ne fonctionne pas

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
28 mai 2010 à 03:14

c'est a cause du fichier jQuery qui n'est pas trouvé par le navigateur, verifie cette ligne

<script type="text/javascript" src="javascript/jquery-1.3.2.js" ></script>

Pour toi le fichier s'appelle jquery1.4.... verifie stp

Julien Giuliano
28 mai 2010 à 11:35

Tout à fait!!! C'est quand on connais pas quelque chose comme jquery qu'on fait ce genre d'oublie. Je n'avais pas vérifier cette ligne. Donc évidemment depuis que j'ai modifier ca fonctionne! Vraiment, encore merci. Je me demande seulement pourquoi l'arrière plan est gris bleu, et pas noir. et pourquoi aussi il y a ces marges notamment en haut de l'image.
Je souhaitais que l'image soit effectivement centré mais à droite et à gauche. haut et bas : rien du tout.
Je vais essayé de revoir le code aujourd'hui car en allant dans propriété de page pour changer les marges et la couleur d'arrière plan, cela n'a rien changé.
Puis par la suite voir si pour integrer un carousel .swf le mieux est d'utiliser une balise div ?

Encore merci pr tes conseils et tes lumières!

Julien Giuliano
28 mai 2010 à 11:47

c'était dans le body style pr la couleur d'arrière plan de page. c en noir c ok. en revanche l'image de l'arrière plan est toujours centré avec marge en haut et bas.
je sui tjr en train de réviser le code.

Julien Giuliano
28 mai 2010 à 12:18

Je revois toujours le script et j'ai repérer ces lignes

// On redimensionne la div en fonction de la résolution de l'ecran 
$('#arriereplan').css('width', screen.availWidth-50+'px'); 
$('#arriereplan').css('height', screen.availHeight+'px'); 

//On Place la div au centre de l'ecran 
$('#arriereplan').css('left', '25px'); 
$('#arriereplan').css('top', '-130px');

J'ai cimmencer par modifier les deux premières lignes que je viens de recopier. mais finalement j'ai préféré modifier le pixel top de la dernière ligne.
mon image en 1305x600 est donc centré à gauche et à droite. en haut ya pas de marge noir. par contre en bas oui j'ai un énorme vide noir. donc je peux continuer à descendre la page.
j'espère m'être bien expliqué.

Réponse 3 / 4

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
28 mai 2010 à 12:58

Tout d'abord, je suis content que ton problème est résolu et j'aimerais bien mettre cette discussion en résolu.
Concernant les swf, merci stp de créer une autre discussion, on y mettera le lien de celui la.
ça te va ?

Julien Giuliano Messages postés 28 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 23 juin 2012
31 mai 2010 à 15:22

Je ne sais pas si c ce qu'il fallait faire mais j'up ma question comme tu me l'avais demandé

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
31 mai 2010 à 15:25

ok, c'est possible de copier une mise a jour du code ?

Julien Giuliano Messages postés 28 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 23 juin 2012
31 mai 2010 à 15:34

tu veux que jte fasse un copier coller de mon script? en fait ya deux choses à revoir.
1. quand t'actualise ma page parfois ya pas d'arrière plan. c tout noir. donc soi il me manque une image d'arrière plan ce que je pense pas car j'ai un accueil0.jp accueil1, 2 et 3 comme dans le script. donc peut etre un probleme du fondu.
2. donc on a la possibilité de mettre 4 images d'arrière plan dans ce script. j'en aimerai genre une dizaine. donc savoir a quelle endroit du script je dois faire une modif sans faire de connerie ni detruire mon script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<SCRIPT language=JavaScript1.1>
<!-- début
function non(clic) {
var msg="FUNCTION DISABLED";
if (navigator.appName == 'Netscape' && clic.which==3) {
alert(msg);
return false;}
else
if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) {
alert(msg);
return false;
}
return true;
}
document.onmousedown = non;
// fin -->
</SCRIPT>

<script type="text/javascript" src="javascript/jquery-1.4.2.js.js" ></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script language="javascript"> 
$(document).ready(function() { 

// Declaration d'un nouveau tableau contenant les noms d'images 
var img = new Array() 
img[0] = "accueil0.jpg", 
img[1] = "accueil1.jpg", 
img[2] = "accueil2.jpg", 
img[3] = "accueil3.jpg"; 

//On cherche une valeur aleatoire en fonction de la dimension du tableau 
var rnd = Math.round(Math.random()* img.length); 

// on applique le background sur la div ayant l'id arriereplan 
$('#arriereplan').css('background', 'url('+img[rnd]+') center center no-repeat'); 

// On redimensionne la div en fonction de la résolution de l'ecran 
$('#arriereplan').css('width', screen.availWidth-50+'px'); 
$('#arriereplan').css('height', screen.availHeight-255+'px'); 

//On Place la div au centre de l'ecran 
$('#arriereplan').css('left', '25px'); 
$('#arriereplan').css('top', '0px'); 

// On affiche la div progressivement sur 2 secondes 
$('#arriereplan').fadeIn(2000); // 2000 equivaut a 2 secondes 

}); 

</script> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
<!--
body {
	background-color: #000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
<link href="Carousel.css" rel="stylesheet" type="text/css" />
</head> 
<div id="arriereplan" style="display:none; z-index:-5; position:absolute;"></div>
<div id="Carousel">
  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="500">
    <param name="movie" value="Carousel.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="9.0.45.0" />
    <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="Carousel.swf" width="800" height="500">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="9.0.45.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
      <div>
        <h4>Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player.</h4>
        <p><a href="https://get.adobe.com/flashplayer/"><img src="https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body> 
</html>

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
31 mai 2010 à 16:31

ici:

// Declaration d'un nouveau tableau contenant les noms d'images
var img = new Array()
img[0] = "accueil0.jpg",
img[1] = "accueil1.jpg",
img[2] = "accueil2.jpg",
img[3] = "accueil3.jpg";
img[4] = "accueil4.jpg";
.
.
.
img[n] = "accueil(n).jpg";

ça va marcher

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
31 mai 2010 à 16:32

Pourquoi tu as deux extensions ici ?

<script type="text/javascript" src="javascript/jquery-1.4.2.js.js" ></script>

.js.js ?

Réponse 4 / 4

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
31 mai 2010 à 16:46

J'ai trouvé, c'etait juste a cause de la fonction random qui allait jusqu'a 4, valeur qui n'etait pas definie dans notre tableau.
Voici la mise ajour de la ligne

//On cherche une valeur aleatoire en fonction de la dimension du tableau
var rnd = Math.round(Math.random()* (img.length - 1));

Essaie ça va marcher

Julien Giuliano Messages postés 28 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 23 juin 2012
31 mai 2010 à 16:55

effectivement ca a marché! je n'ai plus d'arrière plan tout noir! seul soucis c que je n'ai pas trop compris meme si j'ai vu la différence sur cette ligne avec la précision -1. Quel était le problème concrètement?
et je voulais te demander aussi, si je rajoute d'autres arrières plan (10 on va dire) : dois-je revenir sur cette fonction random et faire une mise à jour ?
ou alors je n'ai simplement qu'à continuer la liste des arrières plans ? :

// Declaration d'un nouveau tableau contenant les noms d'images 
var img = new Array() 
img[0] = "accueil0.jpg", 
img[1] = "accueil1.jpg", 
img[2] = "accueil2.jpg", 
img[3] = "accueil3.jpg"; 
img[4] = "accueil4.jpg"; 
img[5] = "accueil5.jpg";

etc etc...

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
31 mai 2010 à 18:05

Attention lors de la déclaration du tableau, seuler la derniere ligne se termine par ; les autres sont des ,

// Declaration d'un nouveau tableau contenant les noms d'images
var img = new Array()
img[0] = "accueil0.jpg",
img[1] = "accueil1.jpg",
img[2] = "accueil2.jpg",
img[3] = "accueil3.jpg",
img[4] = "accueil4.jpg",
img[5] = "accueil5.jpg";

Mnt je t'explique la ligne suivante;

//On cherche une valeur aleatoire en fonction de la dimension du tableau
var rnd = Math.round(Math.random()* (img.length - 1));

img.lenght est la dimension du tableau, cad le nombre d'enregistrements, dans notre cas img.lenght = 6 puisque la derniere valeur est 5.
j'ai ajouté -1 parceque la fonction random commence par 0 donc il faut aller de 0 à 5 conformément à notre tableau img.

Pigé ?

Julien Giuliano Messages postés 28 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 23 juin 2012
31 mai 2010 à 18:10

aaah ok!!! oui pigé là pas de soucis. merci de m'avoir fait remarqué la petite erreur de , ; je revoit sa tt de suite.
alors donc si je comprend bien c bel et bien ca! il faut juste rajouter ces images d'arrière plan dans cette liste de jpg sur le script uniquement. pas besoin de retoucher à la fonction random. ce qui manquait cetait le -1 en rapport à notre total d'image de 0 à x
Nikel se sera super simple pr rajouter ou modifier des images d'arrière plan!
Il ne reste plus qu'à repassé sur les deux ptites questions que je t posé rapport à flash.
Encore merci t'assure!

Discussions similaires

Service de transfert intelligent en arrière-plan

arriere plan

Open office image arriere plan