PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
M

afbeeldingsgrootte

Door Mathias Seynaeve op 12-10-2007 19:45
795 views
Hoi,

ik denk dat deze vraag waarschijlijk al meerdere malen werd gesteld, maar toch vind ik niet direct een antwoord voor mijn probleem.

ik heb namelijk 1 afbeelding die ik zou willen gebruiken over de volledige breedte van mijn website, eventueel als achtergrond, dit wil dus zeggen dat gelijk welke grootte van monitor de mensen hebben, ze telkens de volledige afbeedling zien zonder witte rand of zonder schuifbalken,

weet er iemand een antwoord op mijn probleem?

alvast bedankt.
Mathias
Gerard M
12-10-2007 22:35
Je kan het oplossen met CSS, dus denk aan "width: 100%;". Maar helaas zal dit je afbeelding uitrekken.

Alternatief kan je het oplossen met JavaScript, voor firefox zou je dan "window.innerWidth" kunnen gebruiken, en voor Internet Explorer "document.body.offsetWidth".
M
Mathias Seynaeve
13-10-2007 13:32
bedankt,

heb he inderdaad via een javascript gedaan, nu werkt het perfect :)

bedankt voor de tip.
M
Mathias Seynaeve
14-10-2007 10:10
ik heb onderstaande code gebruikt voor het javascript, het probleem is dat de website www.fotostudioarto.eu nu enkel werkt in firefox en niet in Internet Explorer. Kan er iemand zeggen wat er verkeerd is aan mijn code?

alvast bedankt.
Mathias


<!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=iso-8859-1" />
<title>Fotostudio Artò al Lago d'Orta</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) &&
(agent.indexOf('spoofer') == -1) && (agent.indexOf('compatible') == -1) && (agent.indexOf('opera') == -1) && (agent.indexOf('webtv') == -1));
this.ns2 = (this.ns && (this.major == 2));
this.ns3 = (this.ns && (this.major == 3));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major == 4) &&
(agent.indexOf("msie 5.0") == -1));
this.ie5 = (this.ie && (this.major == 4) &&
(agent.indexOf("msie 5.0") != -1));
this.ieX = (this.ie && !this.ie3 && !this.ie4);}
var is = new Is();
function layerObject(id,left,top,visibility) {
if (is.ie5||is.ns6){
this.obj = document.getElementById(id).style;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;}
else if(is.ie4) {
this.obj = document.all[id].style;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;}
else if(is.ns4) {
this.obj = document.layers[id];
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;}}
function layerSetup() {
backgroundLyr = new layerObject('backgroundLayer', 0,0,'visible');}
function findSize() {if(is.ns4 ||is.ns6) {available_width=innerWidth;
available_height=innerHeight;
layerSetup();} else if(is.ie4 || is.ie5) {available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
layerSetup();}}
function winResize() {
if(is.ns4 ||is.ns6||is.ie4||is.ie5) {history.go(0);}}
// End -->
</script>
</head>



<BODY onLoad="findSize();" onResize="winResize()">
<div id="backgroundLayer" style="position: absolute; width: 28; height: 15; z-index: 1; left: 0; top: 0; visibility: hidden"><SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if(is.ns4 || is.ns6) {available_width = innerWidth;available_height = innerHeight;}
else if(is.ie4 || is.ie5) {available_width=document.body.clientWidth;available_height=document.body.clientHeight;}
if(is.ie4 || is.ie5 || is.ns6 || is.ns4) {image1_width = (available_width * 1.00);
image1_height = (available_height * 1.00);
var image1 = '<img src="images/voorblad.jpg" width="' + image1_width + '" height="' + image1_height + '">';
document.write(image1);}
// End -->
</script>
</div>


</body>
</html>
?
Onbekende gebruiker
14-10-2007 10:45
In FireBug krijg ik dit te zien:
offsetHeight is not defined
available_height=offsetHeight;
At: www.fotostudioart... (line 48)

En ook:
offsetHeight is not defined
if(is.ns4 || is.ns6) {available_width = offsetWidth;available_height = offsetHei...
At: www.fotostudioart... (line 63)
M
Mathias Seynaeve
14-10-2007 10:57
ik merk dat dit mijn vorige script was, dat werkte helemaal niet, zowel niet in firefox als in IE, heb nu de aangepaste versie even online gezet, nu werkt hij dus wel in firefox, maar niet in IE.

Werkt die firebug niet enkel voor firefox?
b
bart van der veen
14-10-2007 12:18
soort van half offtopic,

voor dat je hier volledig in verzand, het is vanuit een design standpunt geen goed idee om een volledig beeldvullende afbeelding te gebruiken. Het word namelijk:

1 te groot => lange laadtijd.
2 te wazig => onprofessioneel.

ik snap dat je de foto's graag zo groot mogelijk wil laten doorkomen maar daar zijn betere manieren voor.

voor meer inspiratie voor fotoportfolio's kijk hier eens.
http://www.templatemonster.com/category/art-photography/
M
Mathias Seynaeve
21-10-2007 10:19
en toch wil ik de foto's over het volledige scherm. punt :)
p
pepijn de vos
21-10-2007 10:35
het kan WEL met css, heb ik ook gedaan.
er is ergens een voorbeeld van jan koehoorn....
je moet niet een div een achtergrond geven, maar een img een id.
(inline css is voor simpel voorbeeld)

<img src="plaatje.jpg" style="width:100%;height:100%;">

dat moet werken....
alleen moet je je text er dan wel absolute overheen zetten, want je kan geen text in een plaatje zetten normaal gesproken.
M
Mathias Seynaeve
21-10-2007 10:46
heb ik ook al es geprobeerd, maar dan neemt hij de grootte van mijn afbeelding en niet de grootte van mijn scherm.

Reageren

Inloggen om te reageren