begin process at 2012 05 29 00:14:01
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

Framework

 > 

Atlas

 > 

Chargement d'une image en fondu ET chargement aleatoire


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Chargement d'une image en fondu ET chargement aleatoire

jeudi 27 mai 2010 à 19:10:33 | Chargement d'une image en fondu ET chargement aleatoire

Giuliano00027

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>
<body onload='go()'>
<img id="imma"STYLE="opacity:0;filter:0;position:absolute;top:150px;left:50px;"src='monimage.jpg'>
</body>
</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><IMG SRC="'+newimg+'"></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
jeudi 27 mai 2010 à 20:28:48 | Re : Chargement d'une image en fondu ET chargement aleatoire

kazma

Administrateur CodeS-SourceS
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

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



jeudi 27 mai 2010 à 20:56:22 | Re : Chargement d'une image en fondu ET chargement aleatoire

Giuliano00027

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
jeudi 27 mai 2010 à 20:59:28 | Re : Chargement d'une image en fondu ET chargement aleatoire

Giuliano00027

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
jeudi 27 mai 2010 à 21:27:49 | Re : Chargement d'une image en fondu ET chargement aleatoire

Giuliano00027

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>

<body onload='go()'>
<img id="imma"STYLE="opacity:0;filter:0;position:absolute;top:150px;left:50px;">
</body>
</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
jeudi 27 mai 2010 à 22:40:09 | Re : Chargement d'une image en fondu ET chargement aleatoire

Giuliano00027

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

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>

<body onload='pouic()'>
</body>
</html>


Julien Giuliano


Cette discussion est classée dans : image, chargement, fondu, aleatoire, opa


Répondre à ce message

Sujets en rapport avec ce message

Script chargement image aleatoire ET en fondu [ par Giuliano00027 ] 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'adap Chargement d'une image en fondu [ par pastissimo ] Bonjour,Je bidouille en JS et HTML et apres maintes recherches je n'ai trouvé aucun script permettant d'avoir une image qui apparait en fondu au charg Problème chargement image javascript [ par Travailleuuse06 ] Bonjour,je suis devant un très gros problème que je n'arrive pas à résoudre. J'ai une page html où j'ai un Dans ma partie javascript, j'ai document. Attendre chargement image [ par sisi231 ] Bonjour !       Je souhaiterais bloquer l'exécution de mon script pendant qu'une image se charge et le reprendre après, autrement dit attendre qu'une Chargement dynamique d'images [ par Kevin.Ory ] Bonjour à tous,Je voudrais créer une galerie d'image avec un effet de fondu lors du changement de l'image affiché. Hors je ne voudrais pas précharger prechargement des image [ par baryta ] Bonjour à tous Cela fait quelques jours que je cherche à résoudre le préchargement de mes images. J'ai trouvé le code javascrip pour les précharger. J Fondu sur image [ par Guerrilla ] Bonjour à tous,Enfaite je travaille sur une sorte de CMS (Jahia), donc ça se peut qu'il y ait des contraintes, mais je demande quand même.J'ai donc un Pré-chargement d'image [ par BOBART1 ] Bonsoir, j'ai un petit soucis en ce qui concerne le pré chargement je ne sais pas comment précharger une image avec une adresse externe type http://ww Chargement automatique d'une image [ par bumblebee ] Je cherche a afficher une image l'orsque le client selectionne celle-ci dans dans un champ Je suppose que cela est faisable en javascript anors si qq Icone de chargement pour image [ par porciner ] Bonjour,Je cherche une méthode pour afficher, lors du chargement de certaines images d'une page, une petite icone gif  à la place de l'image en questi


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,076 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales