Søg
Avatar billede zurekk Nybegynder
06. april 2006 - 17:58 Der er 25 kommentarer og
1 løsning

Picture on Picture

Hej Eksperter!

Meget enkelt, kan jeg placere et billede på et andet?
Ikke så de tilsammen bliver et, men så et billede står på et andet.
"Hvad skal jeg bruge det til?"
Tjohh, jeg skal have lavet en border om et miniature.

På forhånd tak.

("har ikke flere points at give ud af")
Avatar billede mclemens Nybegynder
06. april 2006 - 18:17 #1
hvorfor javascript? her er lidt css...

Opret en div, der er relativt placeret.
- Indsæt første <img... herefter næste <img... men med en class="absolutely"
... så bliver den placeret ovenpå det andet billede.

Bemærk top og left i absolutely skal
sættes til 0px for at den er helt ovenpå...
- brugte div's for at give hurtigt eksempel :)



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

html,body{margin:0px;padding:0px;}

#cont{width:770px;margin:0px auto;}

.absolutely{position:absolute;top:10px;left:10px;}
.relative{position:relative;top:0px;left:0px;}

#img1{width:200px;height:200px;background-color:red;}
#img2{width:200px;height:200px;background-color:green;}
</style></head>


<body><br><br><br><br><br>

<div id="cont">

<div class="relative">
<div id="img1">Erstat<br>div<br>med<br>billede</div>

<div id="img2" class="absolutely">Erstat<br>div<br>med<br>billede</div>
</div>

</div>

</body></html>
Avatar billede zurekk Nybegynder
06. april 2006 - 18:21 #2
Måske bare mig der er dum. Er ikke så hardcore til css endnu.
Men hvor skal billede adresserne være ^^?
Fordi det skal bruges flere gange, og det gøres i php :D
Avatar billede mclemens Nybegynder
06. april 2006 - 19:09 #3
prøv det her:

echo"<div class=\"relative\"><img src=\"".$img[$nr]."\">".
"<img src=\"ramme.gif\" class=\"absolutely\"></div>";


css:
.absolutely{position:absolute;top:0px;left:0px;}
.relative{position:relative;}
Avatar billede mclemens Nybegynder
06. april 2006 - 19:10 #4
(ikke testet)
Avatar billede zurekk Nybegynder
06. april 2006 - 19:23 #5
Nej :(
De ligger sig ved siden af hinanden.
Avatar billede dkshero Nybegynder
06. april 2006 - 19:32 #6
<body><div style="LEFT: 208px; POSITION: absolute; TOP: 82px; HEIGHT: 83px; width: 108px;">&nbsp;&nbsp;<img  height="81" alt="" src="http://kreo.dk/billeder/rev_dkshero.jpg" width="95" border="1" name="Test" /><br />
  <center></center><br /></div><br /><br /><br /><div style="LEFT: 214px; POSITION: absolute; TOP: 43px; HEIGHT: 93px; width: 98px;">
  <div align="right">
    <p><br />
      &nbsp;<img  height="81" alt="" src="http://gallery.artodata.dk/data/brugere/billedgalleri/billeder/19538548.jpg" width="95" border="0" name="Test" /></p>
    </div>
</div>
Avatar billede mclemens Nybegynder
06. april 2006 - 19:38 #7
har du husket css'en?
...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.absolutely{position:absolute;top:0px;left:0px;}
.relative{position:relative;}
</style></head>

<body>
<div class="relative"><img src="1.jpg">
<img src="ramme.gif" class="absolutely"></div>

</body></html>
Avatar billede zurekk Nybegynder
06. april 2006 - 19:56 #8
mcclemens > Det virker sådan halvt =/
Rammen kommer, men der er intet bag =)
Avatar billede zurekk Nybegynder
06. april 2006 - 20:02 #9
<div style="Position: absolute;">
<img src="BILLEDE_BUND" width="50" height="50"><br>
</div>
<div style="Position: absolute;">
<img src="BILLEDE_TOP" height="50" width="50">
</div>

Dette virker :D
I kan evt. dele point?
Avatar billede mclemens Nybegynder
06. april 2006 - 20:09 #10
hvis du retter
.absolutely{position:absolute;top:0px;left:0px;}
til
.absolutely{position:absolute;top:10px;left:10px;}

Og bruger eksemplet som det stå ovenover (det virker her)... og det burde være synligt at billederne ligger oveni hinande... det gør de på min pc både IE og FF...

...men jeg er da med på en deler :)
Avatar billede mclemens Nybegynder
06. april 2006 - 20:17 #11
Det virker se her:
(husk at dit billede skal være transperant)
http://www.dkif.com/users/mclemens/test1/1.html
Avatar billede zurekk Nybegynder
06. april 2006 - 20:26 #12
Vær så god.
Avatar billede mclemens Nybegynder
06. april 2006 - 20:29 #13
- fik du den til at virke?
Avatar billede mclemens Nybegynder
06. april 2006 - 20:29 #14
og tak for point :)
Avatar billede mclemens Nybegynder
06. april 2006 - 20:44 #15
... jeg var jo med på en deler som jeg nævnte, men tak for point...
Hvis det ikke virker for dig hjælper jeg gerne - det er ikke fedt
at skal have 2 divs for hvert billede hvis man kan nøjes med 1...
Avatar billede zurekk Nybegynder
06. april 2006 - 20:50 #16
Yeah..
Har lige fundet ud af at det ikke virker -.-
Avatar billede mclemens Nybegynder
06. april 2006 - 20:53 #17
Har lige fundet ud af at det ikke virker -.-
... har du et link så giver jeg en hånd :)
Avatar billede zurekk Nybegynder
06. april 2006 - 20:53 #18
Har du ikke evt. en MSN?
Avatar billede mclemens Nybegynder
06. april 2006 - 20:57 #19
Har du ikke evt. en MSN?
- nej... og heller ikke e-mail...
fører gerne point tilbage hvis det er
... kan dog ikke se hvorfor det ikke virker for dig?
- du kan også dumpe html og css i en besked herinde :)
Avatar billede zurekk Nybegynder
06. april 2006 - 21:13 #20
Nej =P
Skal ikke have nogle points tilbage.. Så det bare lettere at få hjælp gennem MSN.

Prøver lige igen.
Avatar billede mclemens Nybegynder
06. april 2006 - 21:14 #21
Hvis dkshero's løsning virker for dig istedet så sig lige
til så, åbner jeg lige en tråd, så han får alle 40 point...
Avatar billede mclemens Nybegynder
06. april 2006 - 21:14 #22
hov update :P
Avatar billede zurekk Nybegynder
06. april 2006 - 21:15 #23
Rolig nu :P
Bare behold de points.. Og nej, det er lige netop hans der ikke virker.
Avatar billede mclemens Nybegynder
06. april 2006 - 21:18 #24
nåh ok:
grunden til hans ikke virker er at hvis du f.eks. har en div der er 500px bred samt 5 billeder af 100px bredde + 5 billeder af 100px bredde (rammerne) og du skiftevis placerer dem ovenpå hinanden via absolute lander de alle oven i hinanden - derfor skal vi have dem pakket ind i en relative div hver for sig :)
Avatar billede zurekk Nybegynder
06. april 2006 - 21:36 #25
Jeg brugte ikke hele hans, men kun dette:
<div style="Position: absolute;">
<img src="BILLEDE_BUND" width="50" height="50"><br>
</div>
<div style="Position: absolute;">
<img src="BILLEDE_TOP" height="50" width="50">
</div>

Jeg har lige prøvet med din metode :D Det virker.

Tak for det =D
Avatar billede mclemens Nybegynder
06. april 2006 - 21:37 #26
ok ;)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 09:37 hvilken AI synes I er bedst? Af jcr18 i Andre onlineløsninger
I går 18:51 Pausepil på youtube i chrome Af valby i Browsere
I går 11:42 Mail med endelsen ".lat" Af ErikHg i E-mail
21/0511:48 Nyåbnede sider flimrer på Android tablet, hvorfor Af annam i Andet software
21/0511:03 Bitlocker fordele-ulemper, samt nulstille PC Af Uvanga i Windows
White papers
Flere white papers »