Accueil > Forum > > > > Chargement d'une image en fondu
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
|
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 à l'accueil" title="Revenir à 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
Livres en rapport
|
Derniers Blogs
IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|