textarea+tömbváltozók kijelzése a monitor egyes részein

HPeti · 2009. Júl. 13. (H), 08.49

Sziasztok!

A következő feladatot szeretném megoldani. Textareába bemásolt 24db számot szeretném kattintásra a képernyő bizonyos pontjaira kidobni. Kérhetek ezzel kapcsolatban segítséget?

■

HTML, CSS, JavaScript, Ajax

csirip

Kérhetsz segítséget

Poetro · 2009. Júl. 13. (H), 11.40

Meddig jutottál, milyen tervvel rendelkezel a végrehajtás tekintetében? Mit jelent az, hogy

a képernyő bizonyos pontjaira kidobni

A hozzászóláshoz regisztráció és belépés szükséges
új téma

HElló!

Közben sikerült megalkotnom, hogy textarea-ból kiolvassa a számokat és a monitorra kidobja bizoynos helyekre.Kódrészlet alapján lehet látni az alapelvet..

"
var myTextField = new Array()
myTextField = document.getElementById('myText');
x=myTextField.value.split("\n");

document.getElementById("elso").innerHTML=x[0];
document.getElementById("masodik").innerHTML=x[1];
document.getElementById("harmadik").innerHTML=x[2]; "

és így tovább...

A kérdés az, hogyan tudom megoldani, hogy monitormérettől függetlenül a számok poziciója mindig ugyanott legyen egy háttérkép adott pontjában. Konkrétan az a feladat, hogy budapest kerületeihez kell számokat rendelni.Azt cisnáltam, hogy css-el csak szépen adtam neki egy relatíve pozicíót, de ez más méretű monitoron eltolja a számokat? hogyan tudnám fixálni?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

mihez képest?

kerzo · 2009. Júl. 13. (H), 17.04

Hüye kérdés, de mi alapján relatív a pozíció? És akkor miért nem abszolút a térképet tartalmazó dobozhoz képest?


<div id="terkep">
  <div id="ker_1"></div>
  <div id="ker_2"></div>
  <div id="ker_3"></div>
...
  <div id="ker_2x"></div>
</div>


#terkep {
  position: relative;
  background: url("terkep_link.jpg") no-repeat;
  ...
}
#ker_1 {
  top: 100px;
  left: 200px;
  position: absolute;
  ...
}
#ker_2 {
  top: 200px;
  left: 100px;
  position: absolute;
  ...
}

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Elvileg a tábla aljához

HPeti · 2009. Júl. 14. (K), 10.32

Elvileg a tábla aljához képest relatív...Itt van, amit eddig cisnáltam: http://pastebin.com/m1d5d3dc6 gondolom, hogy a poziciókkal kell vmit csinálni? százalékosan nem lehet megadni vhogy a kép helyét a monitor széleitől? és a számokat valahogy egy fix ponthoz képest relatív módon pozícionálni?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Az a baj, hogy a táblát el

kerzo · 2009. Júl. 14. (K), 14.31

Az a baj, hogy a táblát el kellene felejteni. Ráadásul a P cimke block típusú elemet jelöl, ami azt jelenti, hogy biztosan külön sorba fogja rakni őket. Ez viszont 23 elemnél elég érdekes eredményt mutat.
Még mindig azt mondom, hogy amit először írtam, az jó lehet. Nekem így működik rendesen:


<html>
<head>
<Meta http-equiv="Content-Type"
  content="text/html; charset=ISO-8859-2">
 
<style>
.alma{font-size:15px}

#szamok {
  width: 800px;
  height: 800px;
  position: relative;
  background: url('budapest2.jpg') no-repeat;
}

#elso{position:absolute;top:0;left:0;}
#masodik{position:absolute;top:-510px;left:300px}
#harmadik {position:absolute;top:-600px;left:400px}
#negyedik{position:absolute;top:-690px;left:500px}
#ot{position:absolute;top:-550px;left:440px}
#hat{position:absolute;left:110px}
#het{position:absolute;left:120px}
#nyolc{position:absolute;right:330px}
#kilenc{position:absolute;right:430px}
#tiz{position:absolute;right:30px}
#tegy{position:absolute;top:-410px;left:270px}
#tketto{position:absolute;top:-460px;left:300px}
#tharom{position:absolute;left:330px}
#tnegy{position:absolute;left:330px}
#tot{position:absolute;left:330px}
#that{position:absolute;left:330px}
#thet{position:absolute;left:330px}
#tnyolc{position:absolute;left:330px}
#tkilenc{position:absolute;top:500px;left:300px}
#thusz{position:absolute;left:330px}
#thuszegy{position:absolute;left:330px}
#thuszketto{position:absolute;top:500px;left:300px}
#thuszharom{position:absolute;left:330px}
#table{size:800px; height:800px}

</style>
 
<script type="text/javascript">
 
function mutasd(){
        
        var myTextField = new Array()
        myTextField = document.getElementById('myText');
        x=myTextField.value.split("\n");
 
        document.getElementById("elso").innerHTML=x[0];
        document.getElementById("masodik").innerHTML=x[1];
        document.getElementById("harmadik").innerHTML=x[2];
        document.getElementById("negyedik").innerHTML=x[3];
        document.getElementById("ot").innerHTML=x[4];
        document.getElementById("hat").innerHTML=x[5];
        document.getElementById("het").innerHTML=x[6];
        document.getElementById("nyolc").innerHTML=x[7];
        document.getElementById("kilenc").innerHTML=x[8];
        document.getElementById("tiz").innerHTML=x[9];
        document.getElementById("tegy").innerHTML=x[10];
        document.getElementById("tketto").innerHTML=x[11];
        document.getElementById("tharom").innerHTML=x[12];
        document.getElementById("tnegy").innerHTML=x[13];
        document.getElementById("tot").innerHTML=x[14];
        document.getElementById("that").innerHTML=x[15];
        document.getElementById("thet").innerHTML=x[16];
        document.getElementById("tnyolc").innerHTML=x[17];
        document.getElementById("tkilenc").innerHTML=x[18];
        document.getElementById("thusz").innerHTML=x[19];
        document.getElementById("thuszegy").innerHTML=x[20];
        document.getElementById("thuszketto").innerHTML=x[21];
        document.getElementById("thuszharom").innerHTML=x[22];
 
 
                        
}
</script>
</head>
<body>
<h1 position:center>Betegforgalom kerületi megoszlása</h1>
<table id="table" border="1">
<tr>
<td>
        <textarea id='myText' rows="23" cols="10"></textarea>
        <input type='button' onclick='mutasd()' value='Mutasd' />
</td>
<td>
<div id="szamok">
  <div id="elso"></div>
  <div id="masodik"></div>
  <div id="harmadik"></div>
  <div id="negyedik"></div>
  <div id="ot"></div>
  <div id="hat"></div>
  <div id="het"></div>
  <div id="nyolc"></div>
  <div id="kilenc"></div>
  <div id="tiz"></div>
  <div id="tegy"></div>
  <div id="tketto"></div>
  <div id="tharom"></div>
  <div id="tnegy"></div>
  <div id="tot"></div>
  <div id="that"></div>
  <div id="thet"></div>
  <div id="tnyolc"></div>
  <div id="tkilenc"></div>
  <div id="thusz"></div>
  <div id="thuszegy"></div>
  <div id="thuszketto"></div>
  <div id="thuszharom"></div>
</div>
</td>
</tr>
</table>

</body>
</html>

A top és left értékeket pedig értelemszerűen a kép alapján be kell állítani.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés