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

Javascript / DHTML / Ajax

 > 

Framework

 > 

Atlas

 > 

Chargement d'une image en fondu


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

Chargement d'une image en fondu

lundi 30 mars 2009 à 14:25:38 | Chargement d'une image en fondu

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 chargement de la page. J'ai trouvé seulement des effet sur des slideshow....

Si quelqu'un a une petite idée, je prend volontier.
Bien a vous,
Giovanni
lundi 30 mars 2009 à 15:32:53 | Re : Chargement d'une image en fondu

kazma

Administrateur CodeS-SourceS
bonjour

essai ca

<!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>
lundi 30 mars 2009 à 18:08:51 | Re : Chargement d'une image en fondu

pastissimo

MERCI BEAUCOUP !

Ça marche et par je ne sais quel miracle j'ai réussi à le cumuler avec un chargement d'image aléatoire...

Merci encore, a tantôt
Giovanni
jeudi 27 mai 2010 à 17:42:25 | Re : Chargement d'une image en fondu

Giuliano00027

Pastissimo, je serai intéressé de savoir comment tu as pu adapter le cumul d'un chargement d'image aléatoire avec cette technique d'apparition en fondu.
J'avoue que je me casse pas mal la tête là dessus et je pense que le problème doit se situer dans mon script de chargement aléatoire ou que j'ai mal configurer l'ensemble.
D'avance merci si tu pouvais poster un exemple de script qui montre l'assemblage du chargement aléatoire avec le chargement en fondu.


Julien Giuliano
vendredi 28 mai 2010 à 11:28:34 | Re : Chargement d'une image en fondu

pastissimo

Hello,
Je suis une quiche en Java et j'ai fait ca il y a un bout de temps et l'ai laissé tombé après.
Je peux te donner le code brut ?... je sais pas si ca servira à quelque chose :

<script type="text/javascript">
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);
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

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_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function randomImg() {document.getElementById('imma').src = "mg/logos_gris/logo" + Math.round(Math.random()*2+1) + ".gif";
}
</script>

CA C'EST POUR LA HEAD

<body bgcolor="#FFFFFF" onLoad="go(), randomImg()>

CA C'EST POUR LA BALISE BODY

<td width="332" align="left" ><img src="mg/transparant_spacer.gif" width="100" height="1"><a href="index.html" target="_self"><img id="imma"style="opacity:0; filter:0;"src="" alt="Revenir &agrave; l'accueil" title="Revenir &agrave; l'accueil" width="231" height="139" border="0"></a></td>

ET POUR FINIR LA CASE DANS LAQUELLE IL Y A L'IMAGE.

J'espere que ca aidera ??!!....

Giovanni
vendredi 28 mai 2010 à 12:08:41 | Re : Chargement d'une image en fondu

Giuliano00027

J'ai un peu avancer le travail et la recherche en utilisant jquery.
Je suis parvenu à ce script qui assemble le fondu et l'aléatoire.
MAIS j'ai une marge en haut et en bas de l'image d'arrière plan. je souhaite avoir l'image d'arrière plan centré à gauche et à droite. pas en haut et en bas (ce que je ne veux pas c qu'on soit obligé de descendre la page pour voir l'image d'arrière plan (elles sont toutes en 1305x600). et c juste la dessus que je bloque.

Code Javascript :
<!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.4.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> 
<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></head> 
<body style=" color:#CCC; background:#000"> 

<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
CREATIONS VISUELLES
Site Web


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


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 ET chargement aleatoire [ 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'ada 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 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. Fondu au chargement de "Kazma" + élément par dessus [ par thomthom75 ] Bonjour, J'ai utilisé le code de Kazma sur le fondu d'une div au chargement d'une page mais j'ai une petite fouarouille... Je m'explique : - pour le 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 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 defilment d'image [ par mamynonette ] Bonjour !Je n'y connais pas grand chose en javascript, mais en fouinant j'ai trouvé des codes que j'utilise pour créer un fond d'écran animé.Tout marc 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


Nos sponsors


Sondage...

Comparez les prix

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 : 2,075 sec (3)

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