Avatar billede nicklasb Nybegynder
27. januar 2003 - 22:12 Der er 36 kommentarer og
1 løsning

GDlib, skriv på billede

Hej eksperter

Så har jeg brug for noget assistance.

Der kommer her en lang forklaring af mit problem.. Men håber i vil hænge på, og læse det, hvis I skulle vide hovrdan man kan løse det.. :)

Jeg er i gang med et svømme-tilmeldings-system, og havde tænkt mig at dette skulle ske ved at klikke på et svømme-bassin, alt efter hvilket hold man ønskede at gå på.
Jeg har derfor fået lavet et billede af de tre omtalte bassiner. Dette kan ses her : http://www.bornstein.dk/swom/images/site/tilmeld/swomnorm.png
Som før nævnt, er det meningen at man skal klikke på kortet for at komme videre, men hertil ville jeg jo gerne have en indikering af hvor holdene er henne. Dette skulle være noget der godt kunne ændre sig, så jeg havde tænkt mig at den skulle tage det ud fra den allerede oprettede database. (det kunne jeg jo lige så godt, når resten af informationerne står deri)
Det er dog ikke her problemet ligger.

Jeg havde tænkt mig at disse info skulle skrives i en hvid kasse, og dette skulle ske via GDlib, da jeg har adgang til dette på min side.
Havde tænkt mig at det skulle se ud, nogen lunde således: http://www.bornstein.dk/swomme.PNG

Jeg læste først et par spørgsmål her på eksperten, og fandt nogle scripts der kunne sætte billeder på, efter et bestemt antal koordinater.
Men hvis jeg prøver disse script, kan den slet ikke vise siden.. Den skriver bare at siden ikke kunne findes.

Jeg prøvede så noget med at skrive på billedet.. Men jeg kan tilsyneladende kun skive med Hvid skrift.. Skønt jeg har valgt farven 0,0,0, som da gerne skulle være sort.
Og da der samtidig er en sort border på alle bogstaverne, bliver jeg nød til at skrive det med en ALT for tyg skrifttype.. Prøv at se hvad jeg kom frem til her : http://www.bornstein.dk/swom/images/site/tilmeld/sabi.php

Så det jeg gerne ville have hjælp til var at, få lavet et script der automatisk ud fra følgende variabler kunne lave noget lignende dette : http://www.bornstein.dk/swomme.PNG, og gemme det i en anden fil;

- Koordinater for venstre øverste hjørne.
- Startbillede
- Teksten i kassen
- og navnet på den fil den skal ligges ned i.

Der kan selvfølgelig også skaffes oplysninger om længder og bredder på de det store billede.. Men dette er vel ikke relevant??

Håber i er kommet helt her ned til, og håber i gider prøve at hjælpe..

Jeg takker mange tusinde gange på forhånd og glæder mig til at se et supert resultat! :)

/Nicklas B.
Avatar billede ztyxx Nybegynder
28. januar 2003 - 11:38 #1
Avatar billede nicklasb Nybegynder
28. januar 2003 - 14:53 #2
ja.. det er rigtigt.. ;) Det er den jeg bruger på http://www.bornstein.dk/swom/images/site/tilmeld/sabi.php
og så var sprøgsmålet hvordan det kommer til at være med sort skrift, når den ikke gidder ved at skrive 0,0,0 i farven.. Og hvordan jeg kunne på den til at stå skarpt i en lille fontstørrelse..
og hvordan jeg kunne få en ramme på lige som på http://www.bornstein.dk/swomme.PNG
Det der har jeg prøvet.. og har også prøvet bare at tegne billedet og så prøvet at ligge de to oven på hinanden.. men så kan den slet ikke vise siden..

Er der nogle der kan hjælpe med det??
Avatar billede avminarm Juniormester
29. januar 2003 - 10:00 #3
hmm hvad med alternativt at sætte billedet som baggrund i en tabel og så opdele tabellen i mange celler og så skrive i en celle, evt. bruge css til at sætte position
Avatar billede nicklasb Nybegynder
30. januar 2003 - 07:52 #4
vil du give et eksempel??

Jeg har prøvet noget med noget div i forskellige z-layers. Men der bliver jeg nød til at lave den absolute, så den måler det ud fra browserens kant og top.. Og det er ikke optimalt, da man derved ikke kan ændre teksten på siden, eller have forskellige browser-størrelser.. Og det er der jo desværre..
I kan prøve at se det her.. http://www.bornstein.dk/swom/tilmeld.php

Det der så var meningen var at jeg ville have det tegnet på billedet, og så lave Imagemap derpå, lige som i kan se den er nu..

Men hvis det kommer til at virke med en baggrund i en tabel, vil jeg da gerne prøve det..
Det er omkring en 25-30 der skal ligge oven på billedet..
Avatar billede avminarm Juniormester
30. januar 2003 - 08:01 #5
25-30 hvad? hold?

jeg tænkte på at simpelt hen tagen en ganske alm HTML tabel (eller 3) og som bg i tabellen bruges så hvert enkelt billede. - opdel tabellen i en masse celler evt. med angivet størrelse på hver enkelt celle. så kan man vel "putte" de enkelte hold ind i cellerne.

er det klart nok?
Avatar billede nicklasb Nybegynder
30. januar 2003 - 08:37 #6
jeg har prøvet.. Altså hvis jeg forstår det rigtigt..
Jeg har lavet en tabel.. Og har så lavet en masse celler på hver 16px høj.. Og har så sat dem derind i..
Men for det første var det meningen at det skulle være efter et koordinat.. Og det ved jeg ikke lige hvordan jeg skal få placeret rigtigt..
Og så ved jeg heller ikke lige hvordan jeg skal få dem placeret forskudt af hinanden.. og ikke kun på linie?? Men hvis man kunne gøre et eller andet, så man målte divene ud fra billedet sider kunne jeg jo godt bruge den med divene.. Et alternativ..

Men hvis du mener det det gøres som beskrevet med tabellen må du gerne lige give et eksempel.. For jeg kan ikke lige få det til at virke..
Avatar billede avminarm Juniormester
30. januar 2003 - 10:31 #7
hmmm - nej det kan jeg godt se så virker det nok ikke med en tabel, men kan mna ikke sætte position via CSS, det mener jeg
Avatar billede nicklasb Nybegynder
30. januar 2003 - 18:55 #8
jo.. det kan man saktens..

på  bruger jeg lige nu en der ser således ud:

<div style="position: absolute; left: 370px; top: 750px; width: 40px; height: 16px; background-color: #ffffff; text-align: center; border: solid 1px #999999; z-index: 2;"><a href="side1.htm" onmouseover="popup(1)" onmouseout="popout()">Hold 2</a></div>

Men det der er galt med den, er at den måler det ud fra browserens kant. Og jeg kan derfor ikke ændre i indholdet eller noget..
Men hvis det er, ville det selvfølgelig være godt nok, hvis der var en der havde en løsning, hvorpå jeg i stedet kunne placere disse divs, ud fra billedets kant.
Avatar billede olebole Juniormester
31. januar 2003 - 03:51 #9
<ole>

Du finder positionen på et HTML-element med:

function getPos(elm){
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy}
}


<img src="bla.gif" id="bla">

<script type="text/JavaScript">
var dim = getPos( document.getElementById("bla") );
alert("x= "+dim.x);
alert("y= "+dim.y);
</script>

Så skulle det vist ikke være svært at positionere resten  :)

/mvh
</bole>
Avatar billede nicklasb Nybegynder
31. januar 2003 - 15:08 #10
Det virker meget godt.. Nu bliver jeg så bare lige nød til at være lidt irreterende og sprøge om noget mere..

hvordan ligger jeg det ind i en variabel?? Og den variabel skal allerede sættes oppe i
<script language="JavaScript" 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}
}
</script>

og hvad sker der hvis jeg så ændre på browser-vinduets størrelse uden at opdatere?? Skridder det hele så ikke?? Eller man man også gøre så den opdatere siden, hvis dette bliver lavet om??
Avatar billede nicklasb Nybegynder
31. januar 2003 - 15:09 #11
nej.. det er selvfølgelig lige meget om variablen bliver sat først eller sidst.. Jeg tænkte lige på noget andet :) Men det andet må du gerne lige svare på hvis du har et bud.. :)
Avatar billede olebole Juniormester
31. januar 2003 - 18:02 #12
Et eksempel på brugen:

<html>
<head>
<script type="text/JavaScript">
var d=document;
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 placeElms() {
    var dim = getPos( d.getElementById("bla") );
    var elm = d.getElementById("tekst");
    elm.style.left = dim.x+30;
    elm.style.top = dim.y+50;
    elm.style.visibility = "visible";
}

window.onload = window.onresize = function() {
    placeElms();
}
</script>
</head>
<body>
<div id="tekst" style="position:absolute;visibility:hidden">Noget tekst</div>
<div align="center">

<img src="dit_pic.gif" id="bla">

</div>
</body>
</html>

/mvh
Avatar billede olebole Juniormester
31. januar 2003 - 18:04 #13
Disse linier er lidt overkill:
window.onload = window.onresize = function() {
    placeElms();
}

Kan blot skrives:
window.onload = window.onresize = placeElms;
Avatar billede nicklasb Nybegynder
31. januar 2003 - 19:06 #14
ja.. men så er problemet, når de besøgende så trækker i deres browsere.. Så rykker den..
Jeg tror altså ikke at det kan blive helt 100% optimalt, med div -s med position: absolute;..

Tror altså jeg skal have fat i noget painting på billede..
Avatar billede olebole Juniormester
31. januar 2003 - 19:10 #15
Det aller mindste, du kan gøre, når andre hjælper dig, er at teste svarernes eksempler. Ellers er det jo ren spild af tid at hjælpe dig.
Al respekt for, at du ikke magter at overskue en kode (det kommer nok med øvelsen), men du bliver nødt til at teste svar, når du ikke kan læse, hvad koden gør.

Koden gør, hvad den skal  :)
/mvh
Avatar billede nicklasb Nybegynder
31. januar 2003 - 19:16 #16
hva mener du?? Det har jeg gjordt.. Men mine divs bliver placeret via de mål jeg får ud + de opgivne mål i databasen..
Og det bliver så målt ud fra kanten.. Mit billede er centreret.. Hvordan skal jeg så få diven til at følge med??
Avatar billede olebole Juniormester
31. januar 2003 - 19:23 #17
Hvis du har testet mit eksempel, som det er, vil du vide, at teksten fint følger billedet - uanset, hvor det er placeret og hvordan.
Kan du ikke få det til at virke i din kontekst, er det fordi, du blander noget ind i det, du ikke skal. Hvad er det for tal, du får fra databasen og hvor blander du dem ind i scriptet?
/mvh
Avatar billede nicklasb Nybegynder
31. januar 2003 - 23:09 #18
jeg kan godt se at din virker.. men det er jo ikke godt nok når jeg ikke selv kan.. men jeg prøver lige at se om jeg selv kan se hvad jeg har gjordt galt, og vender så straks tilbage :)
Avatar billede nicklasb Nybegynder
02. februar 2003 - 13:37 #19
ok.. nu har jeg fået det til at virke.. men kun med en div oven på.. Og så ved jeg heller ikke hvordan jeg skal få sat mine mål på.. Altås bredde og højde.. De skal vel pludses et eller andet sted. Men så er problemet bare, at der skal være omkring en 30 div's på billedet.. Og den kan jeg ikke lige gennemskue..
Avatar billede nicklasb Nybegynder
02. februar 2003 - 14:44 #20
hvis det hjælper på det, kan du se siden i funktion her : http://www.bornstein.dk/swom/tilmeld.php

Det er lige omkring 30 stykker der skal være ..
og de skal placeres efter et hver deres koordinater. Men jeg kan ikke gennemskue hvordan scriptet så skal se ud.. altså lige bortset fra hvis jeg bare lod den lave 30 scripts med hver deres navne på tekst-felterne mv..
men det er vel ikke den optimale løsning.. der er vel noget lettere??
Avatar billede olebole Juniormester
02. februar 2003 - 18:35 #21
Du kan vel udskrive et array med data og så bladre array'et igennem i en for-løkke og kalde placeElms() med nogle parametre - men det er ikke noget, jeg orker at løse gennem E. Det kræver, jeg sidder med projektet og databaserne  :)
/mvh
Avatar billede nicklasb Nybegynder
02. februar 2003 - 19:13 #22
det med databasen skal jeg nok selv klare.. Problemet er hvordan scriptet skal se ud, hvis der skal være flere divs, med forksellige koodinatsæt.

jeg har prøvet at leje lidt med det.. og det ser da ud til at dette virker..

<script type="text/JavaScript">
var d=document;
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 placeElms() {
    var dim = getPos( d.getElementById("bla") );
    var elm = d.getElementById("tekst");
    elm.style.left = dim.x+45;
    elm.style.top = dim.y+570;
    elm.style.visibility = "visible";

    var dim = getPos( d.getElementById("bla") );
    var elm = d.getElementById("tekst2");
    elm.style.left = dim.x+45;
    elm.style.top = dim.y+370;
    elm.style.visibility = "visible";
}

window.onload = window.onresize = function() {
    placeElms();
}
</script>

men vil lige hører, om det skal se sådan ud?? For min viden til JS, er ikke lige frem på et særlig højt nevau..
Avatar billede olebole Juniormester
02. februar 2003 - 20:04 #23
På den måde bliver det et kanon omfattende script. Skal det skrives slankt og 'sexy', kan jeg ikke gøre det uden at sidde med projektet foran mig
Avatar billede nicklasb Nybegynder
02. februar 2003 - 20:28 #24
der kan du jo bare se.. Så ER det en ubruglig løsning.. Jeg skal jo ikke have løsninger jeg egentligt i sidste ende ikke kan bruge.. Så det jeg skal bruge er vel noget GD-lib..
Så tilbage til starten.
Er der nogle der kan hjælpe med et script til at tegne på billedet?
Avatar billede olebole Juniormester
02. februar 2003 - 20:50 #25
*LoooooL* Problemet er ikke løsningen. Problemet er, du ikke magter opgaven, du har påtaget dig. Du må sætte dig noget bedre ind i scripting, inden du kaster dig ud i den slags.

Er du ikke i stand til at løse opgaven med de perler, der er blevet kastet for dine fødder, tvivler jeg svært på, du overhovedet kan løse den.
/mvh
Avatar billede olebole Juniormester
02. februar 2003 - 20:52 #26
PS: Bruger du GD-Lib til denne løsning, får du lavet noget, der bliver helt unødvendig tungt
Avatar billede nicklasb Nybegynder
02. februar 2003 - 21:45 #27
jeg kan ikke JS. Og det har jeg heller ikke sagt noget som helst om. Det var først da du kom med et forslag i JS jeg prøvede det. Jeg ville MEGET gerne, og har som du kan se, har jeg også prøvet.

Men jeg kan godt finde ud af GDlib. Derfor jeg valgte det. Jeg forstår bare ikke hvorfor tekten bliver hvid og utydelig..
Avatar billede nicklasb Nybegynder
02. februar 2003 - 21:46 #28
og lad være at grine af mig.. Det er da noget underligt noget at gøre. Det er ikke os alle der er eksperter til JS. Også derfor denne side er her?
Avatar billede olebole Juniormester
02. februar 2003 - 23:39 #29
Jeg griner ikke af, du ikke kan JS. Det synes jeg skam ikke er morsomt ... tværtimod. Jeg morede mig over din måde at udtrykke dig på.

Hvis man vil lave frontend-kodning, er man nød til at være rigtig god i HTML, CSS og JS.
Hvis man vil lave backend-scripting, skal man som absolut minimum være rigtig god i sit backend-sprog og HTML.
Vil man lave både frontend-kodning og backend-scripting, er det must at være rigtig god i backend-sproget, HTML, CSS og JS.

Én ting er at lave siden om husets kat eller mors bageopskrifter, men når man arbejder for andre, har man pligt til at kunne sit kram - ellers må man sige nej.
/mvh
Avatar billede nicklasb Nybegynder
06. februar 2003 - 17:54 #30
olebole-> Det er ikke noget jeg får noget videre for. Det er min side, og jeg arbejder derfor selv på den. :)
Jeg har set fordele i at vise det via JS. Men har dog fundet ud af at det tager en evighed, hver gang man besøger den, hvis der kommer over en ti stykker.
Så jeg opretter nok et spørgsmål om lidt, om hvordan man kunne gøre scriptet lettere, og håber da du vil hjælpe til der ;)
Men du skal selvfølgelig have pointene for det du har hjulpet mig med.. :)
Avatar billede olebole Juniormester
06. februar 2003 - 18:16 #31
Du kan sgtens få svar på, hvordan du laver det tungere - men nok ikke væsentlig lettere.
Hvormange hundrede skal du placere?
Avatar billede nicklasb Nybegynder
06. februar 2003 - 18:36 #32
hehe.. lille skrivefejl.. :)

Jeg skal placere omkring 30 stykker.
De kommer så fra en database. Men hvis scriptet bliver lettere, skal jeg nok selv få noget PHP til at smide dataene ind de rigtige steder.
Avatar billede nicklasb Nybegynder
06. februar 2003 - 18:38 #33
nåå.. forstod ikke lige.. Det kan altså ikke blive lettere end jeg har gjordt det på : http://www.bornstein.dk/swom/tilmeld.php ??
Der har jeg bare gentaget

    var elm = d.getElementById("tekst2");
    elm.style.left = dim.x+45;
    elm.style.top = dim.y+370;
    elm.style.visibility = "visible";

ti gange..
Avatar billede olebole Juniormester
06. februar 2003 - 18:58 #34
Ja, netop ... det gør det jo betydelig tungere. Både i server-arbejde, i download og i klient-udførsel.
30 punkter tager ikke over 1,5 sekund at pacere - selv på en _meget_ gammel og overbelastet maskine  :)
/mvh
Avatar billede nicklasb Nybegynder
06. februar 2003 - 19:32 #35
ok.. hvis det ikke kan gøres lettere end det jeg har gjordt lige nu, bliver det bare sådan.. og så må de besøgende bare vente.. :)

Men du skal have tak for hjælpen.. :)
Avatar billede olebole Juniormester
06. februar 2003 - 19:49 #36
... anytime  ;o)
Avatar billede macintosse Nybegynder
29. oktober 2003 - 15:45 #37
Lige et link ang. GDlib
http://phpwizard.dk/gdlib.php
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