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
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
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
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
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 ''
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 ''
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
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>
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>
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
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
<script type="text/javascript" src="javascript/jquery-1.3.2.js" ></script>
Pour toi le fichier s'appelle jquery1.4.... verifie stp
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!
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!
Je revois toujours le script et j'ai repérer ces lignes
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é.
// 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é.
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
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 ?
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
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
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
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.
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
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
// 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
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 ?
<script type="text/javascript" src="javascript/jquery-1.4.2.js.js" ></script>
.js.js ?
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
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
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
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 ? :
etc etc...
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
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é ?
// 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
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!
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!
27 mai 2010 à 23:46
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.
27 mai 2010 à 23:51
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
27 mai 2010 à 23:52
27 mai 2010 à 23:53
27 mai 2010 à 23:54