Avatar billede Slettet bruger
02. oktober 2002 - 16:15 Der er 15 kommentarer og
1 løsning

Lidt sjov med <div> ovenpå et billede

Hej!

Jeg vil gerne placere 14 <div>'s med tekst ovenpå et billede.

Jeg forsøger således :

<div style="width:400px; height:464px; background-color:#D0E6F4">
<div style="z-index:99; position: relative; top: 200px; left: 4px">khkj</div>
<div style="z-index:99; position: relative; top: 100px; left: 4px">khkj</div>
<div style="z-index:99; position: relative; top: 150px; left: 4px">khkj</div>
<div style="z-index:99; position: relative; top: 50px; left: 4px">khkj</div>
<div style="z-index:99; position: relative; top: 80px; left: 30px">khkj</div>
<img src="billeder/danmark.gif" width="400" height="464" alt="" border="0" usemap="#amter"></div>

Alle 14 er ikke med, men pointen er at billedet rykkes ned alt efter hvor mange <div>'s der er.

Ideen er at jeg i de 14 amter i DK kan skrive noget statistik på billedet.
Avatar billede jakoba Nybegynder
02. oktober 2002 - 16:23 #1
dine div-s skal laves med  position:absolute;
og så placeres i relation til billededs position.
    http://hjem.get2net.dk/Jakob.Aggernaes/temp/exp93955.html
det lille script her er tæt på det du har brug for. men du skal nok udvide 'placer'-funktionen med et par parametre til at fortælle hvor de enkelte tekster skal placeres i forhold til billedets placering.

mvh JakobA
Avatar billede Slettet bruger
02. oktober 2002 - 16:28 #2
Jamen...det var da en god sjat kode for den smule...

Man må da kunne skrive tekst ovenpå et billede uden at lave det absolute?

Det gør ikke noget at gamle browsere ikke fatter relative.
Avatar billede jakoba Nybegynder
02. oktober 2002 - 16:32 #3
du kan også lægge billedet ind som baggrund i en tabelcelle, og så skrive teksten som forgrund.
Avatar billede Slettet bruger
02. oktober 2002 - 16:35 #4
Problemet er at det skal fungere som et image-map...
Avatar billede jakoba Nybegynder
02. oktober 2002 - 16:47 #5
Gaah. den var værre. for hvis det lykkes os at lægge teksten som divs ovenpå dit billede skal du enten sørge for at de divs aldrig overlapper dine aktive områder, eller også lave tildvarende aktive områder på <div-erne

hvad med at skrive teksten ind i billedet i en paintprogram?
Avatar billede nikolajdu Nybegynder
02. oktober 2002 - 16:49 #6
elller lave det som en slags "tooltip" i stedet...
Avatar billede Slettet bruger
02. oktober 2002 - 16:52 #7
hehe...teksten er nogel dynamisk % udregninger...Jeg kan leve med denne løsning:

<table cellspacing="0" cellpadding="0" border="0"><tr><td style="background-color:#D0E6F4">
<img src="billeder/danmark.gif" width="400" height="464" alt="" border="0" usemap="#amter"><br>

</td></tr>
<tr><td>
<span style="z-index:99; position: relative; top: 100px; left: 168px"><b>bh %</b></span>
<span style="z-index:99; position: relative; top: 130px; left: -20px"><b>33 %</b></span>
<span style="z-index:99; position: relative; top: 100px; left: 4px"><b>vb</b></span>
<span style="z-index:99; position: relative; top: 150px; left: 4px"><b>aar</b></span>
<span style="z-index:99; position: relative; top: 50px; left: 4px"><b>rin</b></span>
<span style="z-index:99; position: relative; top: 80px; left: 30px"><b>vejl</b></span>
</td></tr>
</table>

Den giver en smule luft i bunden, men ikke mere end det er til at leve med...
Avatar billede jakoba Nybegynder
02. oktober 2002 - 16:56 #8
giver det ikke en masse luft under billedet? især når du fylder mere tekst i dine spans.
Avatar billede nikolajdu Nybegynder
02. oktober 2002 - 17:21 #9
Hvad med den her stil...

<html>
<head>
<script>
x = 30; //Så langt til højre tippet skal være fra cursoren
y = 30; //Så langt nedenunder tippet skal være fra cursoren

var to;

ns4 = (document.layers)? true:false
ie4 = (document.all&& !document.getElementById)? true:false
ie5 =(document.getElementById)? true:false
ns6 = (document.getElementById && !document.all)?true:false;

if(ns4){
alert("dutter ikke her...");
}

function vis(id) {
var styleObj = (ie4)? document.all['tip'].style : document.getElementById('tip').style;
styleObj.visibility = "visible";
var styleObj = (ie4)? document.all[id].style : document.getElementById(id).style;
styleObj.left = event.clientX + 30;
styleObj.top = event.clientY + 30;
styleObj.visibility = "visible";

}

function skjul(id) {
var styleObj = (ie4)? document.all['tip'].style : document.getElementById('tip').style;
styleObj.visibility = "hidden";
var styleObj = (ns4)? document.layers[id] : (ie4)? document.all[id].style : document.getElementById(id).style;
styleObj.visibility = "hidden"
}

</script>

</head>
<body>
<div id="tip" style="position: absolute;">
<div id="lag1" style="z-index:99; position: relative; visibility: hidden;">1 hej hej nikolaj</div>
<div id="lag2" style="z-index:99; position: relative; visibility: hidden;">2 hej hej nikolaj</div>
<div id="lag3" style="z-index:99; position: relative; visibility: hidden;">3 hej hej nikolaj</div>
<div id="lag4" style="z-index:99; position: relative; visibility: hidden;">4 hej hej nikolaj</div>
<div id="lag5" style="z-index:99; position: relative; visibility: hidden;">5 hej hej nikolaj</div>
</div>
<img src="d:/javascript/1.jpg" alt="" width="400" height="500" border="0" usemap="#test">
  <map name="test">
  <area shape="rect" coords="4,4,103,17" id="" alt="" href="#" #onfocus="this.blur()" onMouseOver="vis('lag1');" onMouseOut="skjul('lag1');">
  <area shape="rect" coords="103,4,119,17" alt="" href="#" #onfocus="this.blur()" onMouseOver="vis('lag2');" onMouseOut="skjul('lag2');">
  </map>
</body>
</html>
Avatar billede nikolajdu Nybegynder
02. oktober 2002 - 17:23 #10
hmmm virker ikke i NS 7.... skummelt...
Avatar billede nikolajdu Nybegynder
02. oktober 2002 - 17:27 #11
koger det lige ned...

function vis(id) {
var styleObj = (ie4)? document.all[id].style : document.getElementById(id).style;
styleObj.left = event.clientX + 30;
styleObj.top = event.clientY + 30;
styleObj.visibility = "visible";
}

function skjul(id) {
var styleObj = (ns4)? document.layers[id] : (ie4)? document.all[id].style : document.getElementById(id).style;
styleObj.visibility = "hidden"
}
Avatar billede Slettet bruger
02. oktober 2002 - 17:39 #12
Øhm, ja, men jeg skal ikke skjule dem eller vise dem, de skal være synlige hele tiden.

De skal alle indeholde teksten "xx %" så det med at positionere i forhold til hinanden er OK.

Jeg har brygget lidt sammen, men har kun testet i IE:

http://siterater.dk/demografi.php
Avatar billede Slettet bruger
08. oktober 2002 - 18:06 #13
Det må være godt nok.
Avatar billede hono Nybegynder
08. oktober 2002 - 18:08 #14
jakoba >> Er det tilladt at hugge din javascriptkode (http://hjem.get2net.dk/Jakob.Aggernaes/temp/exp93955.html)?

Hono
Avatar billede jakoba Nybegynder
08. oktober 2002 - 18:13 #15
jada :)
Avatar billede hono Nybegynder
08. oktober 2002 - 18:24 #16
Nice, tak skal du have!
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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