CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

dragonbook Nybegynder

05. december 2005 - 15:20 Der 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 ?

Og i så fald hvordan ?

Synes godt om

skovenborg Nybegynder

05. december 2005 - 16:18 #1

Prøv:
<script type="text/javascript">
function getPos(elm) {
for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
return {x:zx,y:zy}
}

function placeElement(elm,onElm,dX,dY) {
dX = (typeof dX == "number") ? dX : 0;
dY = (typeof dY == "number") ? dY : 0;
var pos = getPos(onElm);
elm.style.position = "absolute";
elm.style.left = pos.x+dX+"px";
elm.style.top = pos.y+dY+"px";
}

window.onload = function() {
placeElement(document.getElementById("bld2"),document.getElementById("bld1"),5,10);
}
</script>

<body>
<h1>Overskrift</h1>
<img src="storebillede.png" id="bld1">
<img src="lillebillede" id="bld2">
</body>

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.

Synes godt om

dragonbook Nybegynder

05. december 2005 - 17:17 #2

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.

Kan det laves uden dette sker ?

Synes godt om

truelz Nybegynder

05. december 2005 - 17:21 #3

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>

Synes godt om

skovenborg Nybegynder

05. december 2005 - 17:35 #4

<img src="xx.jpg"> skulle der vist stå ;-)

Synes godt om

skovenborg Nybegynder

05. december 2005 - 17:42 #5

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?

Synes godt om

truelz Nybegynder

05. december 2005 - 17:52 #6

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.

Synes godt om

dragonbook Nybegynder

05. december 2005 - 17:53 #7

truelz --> samme problem som ved det andet script

skovenborg --> Hvis jeg tilføjer det du skrev, bliver mit billede bare placeret nederst på siden.

Synes godt om

truelz Nybegynder

05. december 2005 - 17:57 #8

Andet script? Nu er jeg sat af

Synes godt om

dragonbook Nybegynder

05. december 2005 - 18:00 #9

Ja det script skovenborg skrev

Synes godt om

dragonbook Nybegynder

05. december 2005 - 18:09 #10

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:

<div style="position:relative; left:925px; top:0px; width:165px; height:0px;z-index:1;"><img src="images/img.gif"></div>

Synes godt om

truelz Nybegynder

05. december 2005 - 18:30 #11

Å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.

Synes godt om

skovenborg Nybegynder

05. december 2005 - 19:11 #12

Du kunne også vælge en helt tredje løsning:

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">

Synes godt om

dragonbook Nybegynder

05. december 2005 - 19:23 #13

Problemet er at "billedet" består af mange billeder der er sat sammen ved hjælp af tabeller.

Synes godt om

skovenborg Nybegynder

05. december 2005 - 19:30 #14

men hvilken celle skal du have det andet billede placeret i? Og skal det ændres hvis man fx klikker på de enkelte celler?

Synes godt om

dragonbook Nybegynder

05. december 2005 - 19:35 #15

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.

Synes godt om

dragonbook Nybegynder

05. december 2005 - 19:38 #16

kan man ikke på en eller anden måde definerer at billedet skal placeres x antal px fra midt side ? dev ville vel løse problemet.

Synes godt om

skovenborg Nybegynder

05. december 2005 - 19:52 #17

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.

Synes godt om

dragonbook Nybegynder

05. december 2005 - 21:24 #18

Se det var smart...

Jeg kunne faktisk nøjes med at skrive det sådan ud i et.

<div style="width:850px;margin:0px auto;position:relative;">
<img src="/images/img.gif" style="position:absolute;left:785px;top:-25px;">
</div>

Mange tak for hjælpen, smid et svar så er der velfortjente point.

Synes godt om

skovenborg Nybegynder

05. december 2005 - 21:30 #19

okay da :-) Det er også nogen gange mere smart at løse tingene uden alt for megen javascript ;-)

Synes godt om

Ny bruger Nybegynder

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	1	21/05/202417:19	21/05/202417:40
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25
Beregning af sum via PHP og SQL Af dane022 i JavaScript	3	10/02/202421:38	12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript	2	27/12/202321:42	28/12/202314:41
Nogle af mine formularer i PHP er plaget af spam Af Asky i JavaScript	12	19/12/202313:31	10/01/202411:04

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS