Sujet Précédent Sujet Suivant

Chargement d'une image en fondu ET chargement aleatoire

Giuliano00027 Messages postés 7 Date d'inscription mardi 25 mai 2010 Statut Membre Dernière intervention 28 mai 2010 - 27 mai 2010 à 19:10
Giuliano00027 Messages postés 7 Date d'inscription mardi 25 mai 2010 Statut Membre Dernière intervention 28 mai 2010 - 27 mai 2010 à 22:40
Bonjour,
Après avoir trouver sur le site un script qui permet d'afficher au chargement de la page l'arrière plan en fondu, j'aimerai maintenant l'adapter afin de pouvoir afficher en fondu au chargement de la page une image aléatoirement. J'aurai donc plusieurs images d'arrière plan. Ce que je cherche c'est donc à ce qu'il y ai qu'une seule image qui se charge en fondu lorsque l'on ouvre la page web mais aléatoirement. Voici le code exemple que j'ai trouver permettant de faire un chargement d'une image en fondu :

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



</html>

En exemple voici le genre de code que j'ai trouver pour faire un chargement d'image aléatoire. Mais pour l'instant je n'arrive pas à "assembler" ces deux styles de codes.

ARRIERE PLAN ALEATOIRE
Lignes de codes à insérer entre les balises HEAD

<Script Language="JavaScript">
<!--
//liste des images
var img1 = "img1.gif"
var img2 = "img2.gif"
var img3 = "img3.gif"
var img4 = "img4.gif"
var img5 = "img5.gif"
//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></center>')
//-->
</script>

D'avance merci si quelqu'un pouvait m'aider à adapter ces deux scripts pour l'utilisation dont j'ai besoin. J'avoue que je bloque même si ca ne semble pas si compliqué. HELP !



Julien Giuliano

5 réponses

Réponse 1 / 5
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
27 mai 2010 à 20:28
tu cree un tableau avec les images

var tbimage =new Array('img1.gif','img2.gif','img3.gif','img4.gif','img5.gif')

ensuite tu cree une fonction l'image de fond et a la fin de la fonction tu appel l'autre fonction 

function pouic(){
document.getElementById('imma').style.cssText='background:url('+tbimage[Math.round(Math.random()*(tbimage.length-1))]+')'
go()
}
0
Réponse 2 / 5
Giuliano00027 Messages postés 7 Date d'inscription mardi 25 mai 2010 Statut Membre Dernière intervention 28 mai 2010
27 mai 2010 à 20:56
Je vois...
D'avance je m'excuse car je débute dans ce domaine même si j'ai de bonnes notions et bases.

Si je comprend bien il faudra récupéré le script que j'ai posté plus haut concernant le chargement d'une image en fondu.
Puis créer un tableau avec les différentes images, une fonction image de fond puis à la fin on appel l'autre fonction.

Je viens de tester mais j'ai des problèmes pour construire ce script encore afin d'obtenir les deux effets.

Encore merci de ta réponse. Si tu as le temps pourrai tu poster un exemple de script fonctionnel pour un chargement d'image aléatoire et en fondu lors du démarrage d'une page web?

Mais encore merci...je vais persévérer et reessayer d'adapter ton conseil précédent.

Julien Giuliano
0
Réponse 3 / 5
Giuliano00027 Messages postés 7 Date d'inscription mardi 25 mai 2010 Statut Membre Dernière intervention 28 mai 2010
27 mai 2010 à 20:59
En effet, là où je bloque c sur l'insertion de tes lignes dans mon script (posté plus haut) qui comprend le chargement en fondu et le chargement aléatoire. Je n'arrive pas encore à obtenir quelque chose de valable je pense avoir mal appliqué tes conseils dans le script que j'essaye de construire depuis psieurs jours.
Encore merci de ton temps vraiment.


Julien Giuliano
0
Réponse 4 / 5
Giuliano00027 Messages postés 7 Date d'inscription mardi 25 mai 2010 Statut Membre Dernière intervention 28 mai 2010
27 mai 2010 à 21:27
J'ai donc essayé d'adapter ces deux façons de charger (aléatoirement une image et en fondu). Mais je ne parviens pas à obtenir le résultat que je cherche:

<!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=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
var tbimage =new Array('accueil1.jpg','accueil2.jpg','accueil3.jpg','accueil4.jpg','accueil5.jpg')

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

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




</html>

J'ai essayé la méthode décrite plus haut et je me suis un peu perdu entre head et body. perdu aussi entre le script pour le fondu et le script pour l'aléatoire.
Quelqu'un a-t-il un exemple de script ?
Ou quelqu'un qui a repéré mes erreurs?

Encore merci!


Julien Giuliano
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Giuliano00027 Messages postés 7 Date d'inscription mardi 25 mai 2010 Statut Membre Dernière intervention 28 mai 2010
27 mai 2010 à 22:40
Après avoir bien étudier la solution de kazma et différents modèles de scipt, je n'arrive toujours pas malheureusement, dû sans doute à mon niveau, à assembler les deux scripts ou deux fonctions de chargement aléatoire et en fondu.
Je suis parvenu à ce script mais toujours pas de résultat pourtant j'ai compris l'explication de kazma mais j'ai du mal à la mettre en pratique notamment entre <head> et .

Quelqu'un pourrait-il me renseigner davantage ou poster un script exemple qui fonctionnerai selon ce mode : ouverture d'une page web chargement d'un arrière plan aléatoire en fondu.

Encore merci.

<!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=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>

<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()
}
</script>

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



</html>


Julien Giuliano
0

Discussions similaires

Génération d'un plan de chargement
joris_38 -
lagzor -

2 réponses
Réaliser une matrice avec Excel
SERIEUXETCOOL -
SERIEUXETCOOL -

9 réponses
Récupération d'un mot aléatoire depuis un fichier texte
mornaloce -
buno -

24 réponses
Animation gif pour chargement qui bloque
Portos67 -
Calade -

26 réponses
lettre aléatoire
Thanos_the_yopper -
Thanos_the_yopper -

3 réponses
Rejoignez-nous