/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
sætte backgruond billede
Fra : Ole Neis Nielsen


Dato : 08-08-07 21:01

Hej derude er der nogen der ved hvordan jeg får "image1"
loaded ind i css boxen?
På forhånd mange tak...




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from
url=(0056)http://www.html.dk/scripts/javascript/00005/eksempel.as
p -->
<HTML><HEAD><TITLE>javascripttest</TITLE>
<META http-equiv=Content-Type content="text/html;
charset=iso-8859-1">
<META content="MSHTML 6.00.2900.3132" name=GENERATOR>
<style type="text/css">
<!--
body {
   background-color: #006600;
}
-->
</style>



<BODY onResize="window.location.href = window.location.href;"
onload="SetStyle();">
<SCRIPT type=text/javascript>


var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && (
document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth ||
document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
//window.alert( 'Width = ' + myWidth );
//window.alert( 'Height = ' + myHeight );
   }

//window.alert( 'myHeight = ' + myHeight );

var margen = 20;
var bredde = myWidth - 2 * margen;
var hoejde = myHeight - 2 * margen;

//var image1= '<img src="Green Bag 900x450.jpg" width="' + bredde
// + '" height="' + hoejde + '">';   
// resizing image

//image1.src = image1; //????
image1.src = 'Green Bag 900x450.jpg';   //????
//document.write(image1);

function SetStyle() {
var div = document.getElementById('apDiv1');
div.style.position = 'absolute';
div.style.backgroundColor = '#005544';
div.style.width = bredde + 'px';
div.style.height = hoejde + 'px';
div.style.left = margen + 'px';
div.style.top = margen + 'px';
//div.style.backgroundImage = "url(Green%20Bag%20900x450.jpg)";
div.style.backgroundImage = url(image1.src); // her går det
galt!!!
}
</SCRIPT>

<style type="text/css">
#apDiv1 {

z-index:1;

}
</style>




<div id="apDiv1"></div>
</BODY></HTML>


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Jørgen Farum Jensen (08-08-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 08-08-07 22:53

Ole Neis Nielsen skrev:
> Hej derude er der nogen der ved hvordan jeg får "image1"
> loaded ind i css boxen?
> På forhånd mange tak...
>
>
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
> <!-- saved from
> url=(0056)http://www.html.dk/scripts/javascript/00005/eksempel.as
> p -->
> <HTML><HEAD><TITLE>javascripttest</TITLE>
> <META http-equiv=Content-Type content="text/html;
> charset=iso-8859-1">
> <META content="MSHTML 6.00.2900.3132" name=GENERATOR>
> <style type="text/css">
> <!--
> body {
>    background-color: #006600;
> }
> -->
> </style>
>
>
>
> <BODY onResize="window.location.href = window.location.href;"
> onload="SetStyle();">
> <SCRIPT type=text/javascript>
>
>
> var myWidth = 0, myHeight = 0;
> if( typeof( window.innerWidth ) == 'number' ) {
> //Non-IE
> myWidth = window.innerWidth;
> myHeight = window.innerHeight;
> } else if( document.documentElement && (
> document.documentElement.clientWidth ||
> document.documentElement.clientHeight ) ) {
> //IE 6+ in 'standards compliant mode'
> myWidth = document.documentElement.clientWidth;
> myHeight = document.documentElement.clientHeight;
> } else if( document.body && ( document.body.clientWidth ||
> document.body.clientHeight ) ) {
> //IE 4 compatible
> myWidth = document.body.clientWidth;
> myHeight = document.body.clientHeight;
> //window.alert( 'Width = ' + myWidth );
> //window.alert( 'Height = ' + myHeight );
>    }
>
> //window.alert( 'myHeight = ' + myHeight );
>
> var margen = 20;
> var bredde = myWidth - 2 * margen;
> var hoejde = myHeight - 2 * margen;
>
> //var image1= '<img src="Green Bag 900x450.jpg" width="' + bredde
> // + '" height="' + hoejde + '">';   
> // resizing image
>
> //image1.src = image1; //????
> image1.src = 'Green Bag 900x450.jpg';   //????
> //document.write(image1);
>
> function SetStyle() {
> var div = document.getElementById('apDiv1');
> div.style.position = 'absolute';
> div.style.backgroundColor = '#005544';
> div.style.width = bredde + 'px';
> div.style.height = hoejde + 'px';
> div.style.left = margen + 'px';
> div.style.top = margen + 'px';
> //div.style.backgroundImage = "url(Green%20Bag%20900x450.jpg)";
> div.style.backgroundImage = url(image1.src); // her går det
> galt!!!
CSS kan ikke tolke en src-attribut, du skal have
en reference til grafikken, se nedenfor.
> }
> </SCRIPT>
>
> <style type="text/css">
> #apDiv1 {
>
> z-index:1;
>
> }
> </style>
>
>
>
>
> <div id="apDiv1"></div>
> </BODY></HTML>
>
>

Det var dog en værre rodebunke. Hvor kan du ikke bare
lave et stylesheet med indholdet
#apDiv1 {
backgroud-image: url(green_bag_900x450.jpg);
background-repeat: no-repeat;
}

Din side skal sandsynligvis ligge på en Apache
server, og så er du nødt til at have styr på
store og små ogstaver og undgå mellemrum.

Din opmærkning stinker: Scripts og stylesheets
skal være i head-delen af siden og skal afsluttes
før body-markøren, attributter skal være i
anførselstegn m.fl.

Det ser ud som om du vil styre størrelsen af
brugerens browservindue og så indsætte et billede
med faste mål. Det kommer der ikke noget godt ud
af.

Under alle omstændigheder vil et link til din
side være meget mere nyttigt end noget løsrevet
kode.



--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Ole Neis Nielsen (09-08-2007)
Kommentar
Fra : Ole Neis Nielsen


Dato : 09-08-07 09:12

Hej jørgen. tak svaret.
Jeg har ikke en hjemmeside endnu.
Hele pointen er dybest set at
1)hente et billede
2) manipulere dette via et java script. (browser tilpasning og
animation af JPG's)
3) herefter loade det til en css box

Ja det er rodet, men det er blot tale om et forsøg for at forstå
mekanismerne...

mvh ole

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste