creation de sites internet :

- Chargement préload
Site gratuit de petites annonces motos
occasion Honda
Autres messages sur des sujets similaires :
Intergrer un téléchargement de photo dans un formulaire
Menu déroulant dynamique avec chargement d'un autre menu sur la meme page
aide lien telechargement en html
Cours HTML / Javascript / PHP disponibles :



 Retour Site Honolulu  |  Nouveau sujet  |  Retour aux sujets  |  Chercher  |  Connexion    
 Chargement préload
Auteur: tonio034
((---.fbx.proxad.net)
Date: 10-09-2007 18:53
4 messages postés sur la création de sites internet [ 4 msg ]
 		Bonjour,
Je cherche désespérément de l'aide pour une page de mon site. En effet, j'aimerais créer une page "préload". Je m'explique :
La page principale, comporte beaucoup de photos, j'aimerais qu'elle se charge en arrière plan avant de s'afficher. Avec par exemple un bouton "chargement" qui affiche la progression ou un simple qui tourne avec comme inscription : chargement des photos en cours. Tout cela, masquant les photos pendant leur chargement. Si cela est infaisable, est-il possible d'afficher une page différente pendant le chargement de la dite page photos qui afficherait pourquoi pas des sponsors pendant le chargement (bien que cela fasse un peu tâche).
Voici ma page : http://www.ecuriesbelair.fr/Bel_Air/Photos/Photos.html


voici le code de la page :

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="fr">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="Generator" content="iWeb 2.0.1" />
<meta name="iWeb-Build" content="local-build-20070905" />
<title>Les photos des Ecuries de Bel Air</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="Photos_files/Photos.css" />
<!--[if IE]><link rel='stylesheet' type='text/css' media='screen,print' href='Photos_files/PhotosIE.css'/><![endif]--><style type="text/css"><!--
@import "../Scripts/Widgets/PlayButton/PlayButton.css";
--></style>

<!-- No code to add to head -->
<style type="text/css"><!--
@import "../Scripts/Widgets/HeaderControls/HeaderControls.css";
--></style>
<!-- No code to add to head -->
<style type="text/css"><!--
@import "../Scripts/Widgets/FooterControls/FooterControls.css";
--></style>
<link rel="alternate" type="application/rss+xml" title="RSS" href="file://localhost/Users/Tonio/Desktop/Bel_Air/Photos/Photos_files/rss.xml" />
<style type="text/css">
/*<![CDATA[*/
@import "../Scripts/Widgets/HTMLRegion/Paste.css";
/*]]>*/
</style>
<script type="text/javascript" src="../Scripts/iWebSite.js"></script>

<script type="text/javascript" src="../Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
<script type="text/javascript" src="../Scripts/Widgets/Navbar/navbar.js"></script>
<script type="text/javascript" src="../Scripts/iWebImage.js"></script>
<script type="text/javascript" src="../Scripts/iWebMediaGrid.js"></script>
<script type="text/javascript" src="../Scripts/Widgets/Slideshow/Slideshow.js"></script>
<script type="text/javascript" src="../Scripts/Widgets/PlayButton/PlayButton.js"></script>

<script type="text/javascript" src="../Scripts/iWPopUpSlideshow.js"></script>
<script type="text/javascript" src="../Scripts/Widgets/HeaderControls/localizedStrings.js"></script>
<script type="text/javascript" src="../Scripts/Widgets/HeaderControls/HeaderControls.js"></script>
<script type="text/javascript" src="../Scripts/Widgets/FooterControls/FooterControls.js"></script>
<script type="text/javascript" src="../Scripts/Widgets/HTMLRegion/Paste.js"></script>
<script type="text/javascript" src="Photos_files/Photos.js"></script>

</head>
<body style="background: #ffffff; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
<div style="text-align: center; ">
<div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: #ffffff; text-align: left; width: 700px; " id="body_content">
<div style="margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div class="com-apple-iweb-widget-navbar flowDefining" id="widget0" style="margin-left: 35px; margin-top: 0px; position: relative; width: 630px; z-index: 1; ">

<div id="widget0-navbar" class="navbar">


<div id="widget0-bg" class="navbar-bg">


<ul id="widget0-navbar-list" class="navbar-list">
<li></li>
</ul>


</div>


</div>
</div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
new NavBar('widget0', '../Scripts/Widgets/Navbar', '../Scripts/Widgets/SharedResources', '..', {"path-to-root": "..\/", "current-page-GUID": "BDE499CF-2F02-4D9B-B7B9-EE66A13E906F", "isCollectionPage": "YES", "navbar-css": ".navbar {\n\tfont-family: Arial, sans-serif;\n\tfont-size: 1em;\n\tcolor: #666;\n\tmargin: 9px 0px 6px 0px;\n\tline-height: 30px;\n}\n\n.navbar-bg {\n\ttext-align: center;\n}\n\n.navbar-bg ul {\n\tlist-style: none;\n\tmargin: 0px;\n\tpadding: 0px;\n}\n\n\nli {\n\tlist-style-type: none;\n\tdisplay: inline;\n\tpadding: 0px 10px 0px 10px;\n}\n\n\nli a {\n\ttext-decoration: none;\n\tcolor: #666;\n}\n\nli a:visited {\n\ttext-decoration: none;\n\tcolor: #666;\n}\n\nli a:hover\r{\r\n \tcolor: #463C3C;\n\ttext-decoration: none;\r}\n\n\nli.current-page a\r{\r\t color: #463C3C;\n\ttext-decoration: none;\n\tfont-weight: bold;\r\r}"});
//--><!]]></script>

<div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="height: 73px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div id="id1" style="height: 50px; left: 35px; position: absolute; top: 23px; width: 630px; z-index: 1; " class="style_SkipStroke">
<div class="text-content Normal_External_630_50" style="padding: 0px; ">
<div class="Normal">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style">Les photos des Ecuries de Bel Air</p>

</div>
</div>
</div>



<div style="height: 1px; width: 630px; height: 0px; left: 35px; position: absolute; top: 3px; width: 630px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 630px; ">
<img src="Photos_files/shapeimage_1.jpg" alt="" style="height: 1px; left: 0px; position: absolute; top: 0px; width: 630px; " />
</div>
</div>
</div>

<div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 0px; left: 35px; position: absolute; top: 124px; width: 630px; z-index: 1; " id="id2"></div>
<div class="com-apple-iweb-widget-headercontrols" id="widget13" style="height: 27px; left: 35px; position: absolute; top: 124px; width: 630px; z-index: 1; ">

<div class="middle">

<!-- Header Controls -->

<div class="header_controls positioned">


<div class="Comment_Posted_Date" style="text-align: center; background: transparent;">


<!-- media index controls -->

<div id="widget13-media_index_only" style="display: none;">


<div class="positioned">


<div class="right">

<span class="subscribe"><!--
--><a href="javascript:(void)"><img class="canvas subscribe" alt="subscribe" src="" /></a><!--
--><a href="javascript:(void)"><!--
--><script type="text/javascript"><!--
WriteLocalizedString('com-apple-iweb-widget-headercontrols', 'Subscribe');
--></script><!--
--></a><!--
--></span>


</div>


</div>



</div>


<!-- album controls -->

<div id="widget13-album_only" style="display: none;">


<div class="positioned">


<div class="left">

<span id="widget13-back_to_index"><!--
--><a href="javascript:widget13.setPreferenceForKey(true, 'goToIndexPage')"><img class="canvas back" alt="back" src="" /></a><!--
--><a href="javascript:widget13.setPreferenceForKey(true, 'goToIndexPage')"><!--
--><script type="text/javascript"><!--
WriteLocalizedString('com-apple-iweb-widget-headercontrols', 'Back to Index');
--></script><!--
--></a><!--
--></span>

</div>


</div>



<div class="paginated_only right" id="widget13-pagination_controls">
</div>



<div class="non_paginated_only right">

<span class="subscribe"><!--
--><a href="javascript:(void)"><img class="canvas subscribe" alt="subscribe" src="" /></a><!--
--><a href="javascript:(void)"><!--
--><script type="text/javascript"><!--
WriteLocalizedString('com-apple-iweb-widget-headercontrols', 'Subscribe');
--></script><!--
--></a><!--
--></span>


</div>



<div>

<span class="add_photo" id="widget13-add_photo"><!--
--><a href="javascript:(void)"><img class="canvas add" alt="add photo" src="" /></a><!--
--><a href="javascript:(void)"><!--
--><script type="text/javascript"><!--
WriteLocalizedString('com-apple-iweb-widget-headercontrols', 'Add Photo');
--></script><!--
--></a><!--
--></span>
<span class="subscribe"><!--
--><a class="paginated_only" href="javascript:(void)"><img class="canvas subscribe" alt="subscribe" src="" /></a><!--
--><a class="paginated_only" href="javascript:(void)"><!--
--><script type="text/javascript"><!--
WriteLocalizedString('com-apple-iweb-widget-headercontrols', 'Subscribe');
--></script><!--
--></a><!--
--></span>
<span class="play_slideshow"><!--
--><a href="javascript:widget13.playSlideshow()"><img class="canvas play" alt="play" src="" /></a><!--
--><a href="javascript:widget13.playSlideshow()"><!--
--><script type="text/javascript"><!--
WriteLocalizedString('com-apple-iweb-widget-headercontrols', 'Play Slideshow');
--></script><!--
--></a><!--
--></span>

</div>



</div>


</div>


</div>


</div>
</div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
new HeaderControls('widget13', '../Scripts/Widgets/HeaderControls', '../Scripts/Widgets/SharedResources', '..', {"showBackToIndex": false, "mediaIndex": true, "canvas controls": {"canvas_transport-left-N": "..\/Media\/canvas_transport-left-N_03.png", "canvas_transport-right-D": "..\/Media\/canvas_transport-right-D_03.png", "canvas_thumbs_off-S": "..\/Media\/canvas_thumbs_off-S_03.png", "canvas_back": "..\/Media\/canvas_back_03.png", "canvas_thumbs_off-N": "..\/Media\/canvas_thumbs_off-N_03.png", "canvas_transport-right-N": "..\/Media\/canvas_transport-right-N_03.png", "canvas_arrow-left-D": "..\/Media\/canvas_arrow-left-D_03.png", "canvas_arrow-right": "..\/Media\/canvas_arrow-right_03.png", "canvas_play": "..\/Media\/canvas_play_03.png", "canvas_arrow-left": "..\/Media\/canvas_arrow-left_03.png", "canvas_download": "..\/Media\/canvas_download_03.png", "canvas_thumbs_on-S": "..\/Media\/canvas_thumbs_on-S_03.png", "canvas_thumbs_on-N": "..\/Media\/canvas_thumbs_on-N_03.png", "canvas_arrow-right-D": "..\/Media\/canvas_arrow-right-D_03.png", "canvas_transport-left-D": "..\/Media\/canvas_transport-left-D_03.png", "canvas_add": "..\/Media\/canvas_add_03.png", "canvas_subscribe": "..\/Media\/canvas_subscribe_03.png"}, "showAddPhoto": false, "feedURL": "file:\/\/localhost\/Users\/Tonio\/Desktop\/Bel_Air\/Photos\/Photos_files\/rss.xml", "entriesPerPage": 99, "entryCount": "0", "showSlideshow": false, "showSubscribe": true, "gridID": "id2"});
//--><!]]></script>
<div class="com-apple-iweb-widget-footercontrols" id="widget14" style="height: 27px; left: 35px; position: absolute; top: 124px; width: 630px; z-index: 1; ">
<!-- Footer Controls -->
<div class="footer_middle">


<div class="positioned">


<div class="Comment_Posted_Date paginated_only right" id="widget14-pagination_controls">
</div>


</div>



</div>
</div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
new FooterControls('widget14', '../Scripts/Widgets/FooterControls', '../Scripts/Widgets/SharedResources', '..', {"gridID": "id2"});
//--><!]]></script>

<div id="id3" style="height: 57px; left: 35px; position: absolute; top: 80px; width: 630px; z-index: 1; " class="style_SkipStroke_1">
<div class="text-content Normal_External_630_57" style="padding: 0px; ">
<div class="Normal">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style_1">Faites glisser la souris sur l’image de l’album pour le parcourir rapidement, cliquez dessus pour l’ouvrir.</p>
</div>
</div>
</div>



<div id="id4" style="height: 100px; left: 300px; position: absolute; top: 427px; width: 100px; z-index: 1; " class="style_SkipStroke_2">

<div class="text-content graphic_textbox_layout_style_default_External_100_100" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default"></div>
</div>
</div>
<div class="com-apple-iweb-widget-HTMLRegion" id="widget15" style="height: 60px; left: 300px; position: absolute; top: 0px; width: 120px; z-index: 1; ">
<iframe id="widget15-frame" src="../Photos/Photos_files/widget15_markup.html" frameborder="0" style="width: 100%; height: 100%;" scrolling="no" marginheight="0" marginwidth="0" allowTransparency="true"></iframe>
</div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget15', '../Scripts/Widgets/HTMLRegion', '../Scripts/Widgets/SharedResources', '..', {});
//--><!]]></script>

<div class="com-apple-iweb-widget-HTMLRegion" id="widget16" style="height: 60px; left: 116px; position: absolute; top: 1572px; width: 468px; z-index: 1; ">
<iframe id="widget16-frame" src="../Photos/Photos_files/widget16_markup.html" frameborder="0" style="width: 100%; height: 100%;" scrolling="no" marginheight="0" marginwidth="0" allowTransparency="true"></iframe>
</div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget16', '../Scripts/Widgets/HTMLRegion', '../Scripts/Widgets/SharedResources', '..', {});
//--><!]]></script>
<div class="com-apple-iweb-widget-HTMLRegion" id="widget17" style="height: 60px; left: 233px; position: absolute; top: 1651px; width: 234px; z-index: 1; ">
<iframe id="widget17-frame" src="../Photos/Photos_files/widget17_markup.html" frameborder="0" style="width: 100%; height: 100%;" scrolling="no" marginheight="0" marginwidth="0" allowTransparency="true"></iframe>
</div>

<script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget17', '../Scripts/Widgets/HTMLRegion', '../Scripts/Widgets/SharedResources', '..', {});
//--><!]]></script>
<div style="height: 1711px; line-height: 1711px; " class="spacer"> </div>
</div>
<div style="height: 150px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
</div>

</div>
</body>
</html>


Merci beaucoup de votre aide !
Répondre à ce message
 
 Re: Chargement préload
Auteur: honolulu
(---.adsl.proxad.net)
Date: 11-09-2007 15:40
1520 messages postés sur la création de sites internet [ 1520 msg ]
 		salut,

tu peux par exemple tester un truc du genre :

<html>
<head></head>
<body onLoad="Chargement()">
<style type="text/css">
#chargement
{
position:absolute; top:0px; left:0; visibility:hidden; height:100%;
}
</style>
<div id="chargement">
<table width="100%" height="100%" border=0 cellpadding=0 cellspacing=0 bgcolor="#000000">
<tr>
<td> </td>
<td align=center valign=middle bgcolor="#0f2148"><font face="Verdana, Arial, Helvetica, sans-serif" size=2 color="#999999">Chargement de la page en cours...</font></td>
<td align=center valign=middle> </td>
</tr>
</table>
</div>
<script language="javascript">
<!--
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava)
{
chg = document.chargement
}
else if (dom)
{
chg = document.getElementById("chargement").style
}
else if (iex)
{
chg = chargement.style
}
largeur = screen.width;
<!--chg.left = Math.round((largeur/2)-200);-->
chg.visibility = "visible";
function Chargement()
{
chg.visibility = "hidden";
}
</script>
</body>
</html>
Répondre à ce message
 
 Re: Chargement préload
Auteur: tonio034
((---.fbx.proxad.net)
Date: 11-09-2007 17:42
4 messages postés sur la création de sites internet [ 4 msg ]
 		OK, peux-tu stp, comme je suis un peu novice..., me dire comment le placer et quels seront les effets du code stp ?! Ca serait bien aimable ;-)
Répondre à ce message
 
 Re: Chargement préload
Auteur: honolulu
(---.adsl.proxad.net)
Date: 11-09-2007 17:45
1520 messages postés sur la création de sites internet [ 1520 msg ]
 		tu "places" ton contenu "normal" classiquement après le script javascript...
Répondre à ce message
 
 Re: Chargement préload
Auteur: tonio034
((---.fbx.proxad.net)
Date: 11-09-2007 18:13
4 messages postés sur la création de sites internet [ 4 msg ]
 		C'est pas exactement ce que je cherche... Plutôt un truc à la PayPal, soit un bouton qui tourne pour afficher le chargement, est-il possible d'ajouter une image ?
Répondre à ce message
 
 Re: Chargement préload
Auteur: honolulu
(---.adsl.proxad.net)
Date: 11-09-2007 21:54
1520 messages postés sur la création de sites internet [ 1520 msg ]
 		c'est un élément "div" ( cf CSS débutants ), tu peux y mettre ce que tu veux...
Répondre à ce message
 
 Re: Chargement préload
Auteur: tonio034
((---.fbx.proxad.net)
Date: 12-09-2007 12:44
4 messages postés sur la création de sites internet [ 4 msg ]
 		Ouais, bon j'ai tout trouvé apparemment, mais maintenant, j'aurais besoin d'un peu d'aide pour placer le code aux bons endroits ! :s

En effet, avec ce script, la page s'affiche en trois temps !
Premier temps :
page blanche sans rien,
second temps :
le menu de navigation,
troisième temps :
tout.
Or, je voudrais avoir : premier temps : menu de navigation avec marqué à la place des photos chargement en cours tout ça...
De plus, le texte ne s'affiche pas...
Enfin bref, un vrai coup de main (par msn ?) serait vraiment appréciable ! Désolé d'être aussi noob...
Répondre à ce message
 
 Re: Chargement préload
Auteur: honolulu
(---.adsl.proxad.net)
Date: 14-09-2007 17:11
1520 messages postés sur la création de sites internet [ 1520 msg ]
 		tu en demandes trop là #triste#
faut revoir le poids de tes images ou passer par du Flash dans ce cas...
Répondre à ce message
 Retour Site Honolulu  |  Liste des Forums    

 Liste des Forums  |  Nouvel utilisateur ? Enregistrez-vous ici 
 Connexion
 Nom d'utilisateur:
 Mot de passe:
 Enregistrer mon profil:
   
 Mot de passe perdu ?
Écrivez votre adresse Email ou votre Identifiant ci-dessous et un nouveau mot de passe sera envoyé sur l'Email lié à votre profil.
phorum.org
Honolulu : créateur de site internet à Annecy et sur le web !