<head><script language="JavaScript" type="text/JavaScript"><!--function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}//--></script></head></body onload="MM_preloadImages('images/background.gif')"><div id="background"><img src="images/background.gif" border="0" width="100%" height="100%"></div></body>
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//--></script></head></body onload="MM_preloadImages('images/background.gif')"><div id="background"><img src="images/background.gif" border="0" width="100%" height="100%"></div></body>
In de CSS:
html, body {height: 100%;width: 100%;overflow-x: hidden;overflow-x: auto;margin: 0px; padding: 0px; }#background {position: absolute;top: 0px;left: 0px;visibility: show;float: left;margin: 0px; padding: 0px; height: 100%; width: 100%; }
#background {position: absolute;top: 0px;left: 0px;visibility: show;float: left;margin: 0px; padding: 0px; height: 100%; width: 100%; }
Tip: gebruik een .gif image want een .jpg schaalt niet zo lekker. (Bewerkt door Leendert om 9:24, 28-04-2008)
(Bewerkt door Leendert om 9:24, 28-04-2008)
raadpleeg W3C
Resultaat is te zien op http://www.konijnmetpluimen.be/kinderboeken
Merrcikes!
pakito om 20:49, 28-04-2008...werkt prefect...
hmmm... toch niet helemaal hoor... In IE laat ie bijvoorbeeld standaard scrollbalken zien.Als je in elke browser de het vensterscherm kleiner maakt, zodat scrollbalken verschijnen, en je scrolt naar rechts of beneden, dan zie je wit i.p.v. beeld.
Ook het preload script werkt niet, omdat het preloaden van het beeld pas gebeurd als de content al geladen is...
Dit werkt wel...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>plaatje</title><style type="text/css">html, body, #background{ margin:0;padding:0; width:100%;height:100%; overflow:hidden;}#background{ display:block; border:0 none;}#container{ position:absolute; top:0;left:0;right:0;bottom:0; margin:0; padding:10px; background:transparent; overflow:auto;}</style><body><img id="background" src="plaatje2.jpg"><div id="container"> <h1> Dit is de alternatieve body. alle content dient in deze div opgenomen te worden, anders werkt 't niet... </h1></div></body>
<title>plaatje</title>
<style type="text/css">
html, body, #background{ margin:0;padding:0; width:100%;height:100%; overflow:hidden;}
#background{ display:block; border:0 none;}
#container{ position:absolute; top:0;left:0;right:0;bottom:0; margin:0; padding:10px; background:transparent; overflow:auto;}</style>
<body>
<img id="background" src="plaatje2.jpg">
<div id="container"> <h1> Dit is de alternatieve body. alle content dient in deze div opgenomen te worden, anders werkt 't niet... </h1></div>
</body>
en om de afbeelding te pre-loaden (quick and dirty) :
<script type="text/javascript">(function(){if(document.getElementById("background"))document.getElementById("background").style.visibility="hidden";else setTimeout(arguments.callee,0);})(); window.onload = function() { document.getElementById("background").style.visibility="visible";}</script>
(Bewerkt door Kaydie om 3:47, 1-05-2008)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>plaatje</title><style type="text/css">html, body, #background{ margin:0;padding:0; width:100%;height:100%; overflow:hidden;}#background{ display:block; border:0 none;}#new_body{ position:absolute; top:0;left:0;right:0;bottom:0; margin:0; padding:10px; background:transparent; overflow:auto;}#container{ position:absolute; top :50%; left:50%; width :500px; height:400px; margin-left: -250px; margin-top : -200px; background:white; opacity:0.5;}</style><body><img id="background" src="plaatje.jpg"><div id="new_body"> <div id="container"> <h1> Voilá, gecentreerd... </h1> </div></div></body>
#new_body{ position:absolute; top:0;left:0;right:0;bottom:0; margin:0; padding:10px; background:transparent; overflow:auto;}
#container{ position:absolute; top :50%; left:50%; width :500px; height:400px; margin-left: -250px; margin-top : -200px; background:white; opacity:0.5;}</style>
<img id="background" src="plaatje.jpg">
<div id="new_body"> <div id="container"> <h1> Voilá, gecentreerd... </h1> </div></div>
Ik heb 'm aangepast op http://www.konijnmetpluimen.be/kinderboeken
(Bewerkt door pakito om 13:31, 1-05-2008)
Ik zou overigens voor de achtergrond foto een jpeg nemen en voor het logobeeld een gif of 8-bits png beeld. Ga je nog gebruik maken van het pre-load scriptje?
Ben benieuwd naar de boeken. Ga je ze in eigen beheer uitgeven?
Succes d'r mee!
Met m'n eerste boekje ben ik ondertussen anderhalf jaar bezig en deze komt uit bij een uitgever van kinderboeken uit België. Ik moet nog een paar dingetjes afwerken, maar wss zal het pas eind volgend jaar zijn ...
Je kan voor het preloaden natuurlijk ook de prototype library gebruiken...
<script type="text/javascript" src="http://www.konijnmetpluimen.be/library/js/prototype.js"></script><script type="text/javascript">Event.observe(window, "load", function() { $('background').show(); });document.observe("dom:loaded", function() { $('background').hide(); });</script>
Dat zal beter werken...
(Bewerkt door Kaydie om 0:49, 3-05-2008)
De halve bollen langs de kanten komen er maar sporadisch op, wanneer je 'terug' klikt vanuit het gastenboek krijg je telkens een vreemd beeld met die verschillende mannetjes op één pagina. Vanaf dat je dan op de mannetjes klikt is het weer in orde. Ik begrijp er niets van.
Iemand een ideetje?
Even opletten dat je alle elementen behalve de achtergrond image in de container div plaatst, of eventueel in een nieuwe 'absolute' gepositioneerde div met een 'top' en 'left' waarde meegegeven, zodat deze de achtergrondafbeelding niet kunnen verdrukken.
Verder even opletten dat je een id in een document maar aan één element kan toewijzen.(id="mainimage")
(Bewerkt door pakito om 17:17, 7-05-2008)
Gast
