05. december 2005 - 15:20Der er
18 kommentarer og 1 løsning
Billede oven på billede
Er det muligt via javascript at placerer et billede ved f.eks. at skrive hvor mange pixels den skal være fra top og side. Dvs. så placeringen kan være oven på et andet billede eller tekst ?
Bemærk at du kan placere hvilket som helst element inde i et andet element, men for at undgå problemmer bør elementet, der skal placeres (her lillebillede.png), være placeret direkte indeni body-elementet (altså imellem <body> og </body>) og ikke imellem alle mulige andre.
Det virker fint nok, men billedet bliver placeret forskelligt alt efter hvilken opløsning brugeren har, og alt efter hvor stort et browser vindue der benyttes.
Det kan du gøre med ren CSS, en såkaldt layer: <div style="position:absolute; left:69px; top:93px; width:165px; height:96px;z-index:1;"><img-src=xx.jpg>Tekst</div>
angående den forskellige placering, så kan du tilføje dette til dit script: window.onresize = function() { placeElement(document.getElementById("bld2"),document.getElementById("bld1"),5,10); }
Dette burde ordne problemmet, hvis vinduet bliver mindre. Nu husker du vel også, at billedet du vil placere ikke må ligge indeni andre elementer end body?
Skovenberg -> Det har du fuldstændig ret :) Desuden kan du med fordel udskifte Position:absolute til position:relative, så vil den placere den i forhold til hvor du har sat div tagget ind på siden, og ikke i forhold til browserens top/left. Jeg forstår stadig ikke hvor det bliver nødvendigt med javascript. Skal billedet altid centreres eller sådan noget? I så fald er skovenberg inde på det rigtige. Du kan styre layeren ved at give div-tagget et id.
Nu ved jeg hvad der går galt. Jeg har et billede på siden hvor jeg ønsker et andet billede skal placeres på, helt præcist oppe i hjørnet. Billedet på siden er centreret og det er formodentligt det der giver problemet, da scriptet jo placerer billedet ud fra kanterne på browseren og derved bliver skubbet væk fra det andet billede hvis man sætter opløsningen ned/op.
Men det burde vel ikke betyde noget når man bruge css som du foreslog. Men jeg kan ikke få det til at virke, jeg har skrevet:
Åh, jo... Du kan kun placere layeren i forhold til top-left (ifølge w3c standarden), så du skal bruge noget javascript til at finde ud af hvor den skal placeres. Det kan jeg ikke nå at skrive nu, jeg vil tro skovenberg kan hjælpe dig.
Lav en div med et baggrundsbillede, der er det billede, som du før centrerede: <div style="background:#fff url(billede.png) no-repeat;">
Indeni denne div placerer du så billedet, som du vil have lagt oveni: <img src="billede2.png">
Hvis du vil have billedet lidt forskudt skal du bare tilføje en padding til din div: <div style="background:#fff url(billede.png) no-repeat;padding-left:10px;padding-top:10px"><img src="billede2.png"> </div>
For at centrere billedet, skal du bare centrere div'en istedet, fx: <div style="background:#fff url(billede.png) no-repeat;padding-left:10px;padding-top:10px;width:400px;margin:0px auto">
Billedet på siden er i alt ca. 850 x 100 px og som sagt indelt i flere tabeller. Billedet skal simpelt hen bare sættes foran billedet og ikke dække et bestemt antal celler. Der skal ikke ændres noget ved at klikke på de forskellige celler.
Jo, på en måde. Du kunne placere tabellen indeni en div, som du centrerer: <div style="width:850px;margin:0px auto;position:relative;"> <table> ... </table> <img src="billede.png" style="position:absolute;left:400px;top:20px;"> </div>
Billedet nederst i div'en er den du skal lægge oveni, og som du kan se kan dette gøres via left og top. Grunden er at position:absolute ikke nødvendigvis placerer billedet i forhold til vinduet, men i forhold til det først omkransende element, som enten har position:relative; eller position:absolute; i sin style. Hvis sådan en ikke findes placeres den efter vinduet i stedet. På den måde kan du udnytte at billedet nu placeres i forhold til div'en hvor tabellen ligger.
okay da :-) Det er også nogen gange mere smart at løse tingene uden alt for megen javascript ;-)
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.