[DHTML] (Image)maps on-the-fly maken in HTML. Ervaringen?

[Verwijderd]

Denk even mee...

Voor een project wil ik een imagemap maken middels een script in HTML, zonder gebruik te maken van een programma zoals MapDesigner. Hierbij moet on-the-fly op het scherm de lijnen (omleiningen -> area's) komen te staan waar de gebruiker heeft geklikt. Voor mij zijn dan de coordinaten van belang, omdat ik die opsla in een MySQL DB.

Op dit moment heb ik het zo geregeld dat een gebruiker in MapDesigner een map creeerd. Deze moet hij vervolgens ergens opslaan.
Met php lees de html-file in en ontleed ik de coordinaten en de rest van de gegevens. Tevens sla ik het plaatje ergens op het netwerk op!

Als de gegevens in de DB staan moet de gebruiker per gedefineerde Area een omschrijving toevoegen! Dit zorgt voor een dusdanige meerwaarde dat het niet mag ontbreken. Dit tekstveld zorgt gelijk voor het probleem:

Wanneer de gebruiker de imagemap moet aanpassen, exporteerd hij uit de DB de html-file en het plaatje. Dit laadt hij dan weer in MapDesigner en past hij de area's aan. Hij slaat het op en importeerd het weer in de DB.

Het importeren houdt in dat de oude area's worden verwijderd en de nieuwe worden ingevoerd. De tekstvelden worden bij deze actie verwijderd. Wat ik nu wil bereiken is MapDesigner te omzeilen, omdat deze niet die koppeling onthoudt tussen de area's in de geexporteerde html-file en de eigen tekstvelden in de DB.

Na deze laptekst hoop dat mijn probleem duidelijk is geworden. Mijn vraag is nu:
Is er in (D)HTML een script dat imagemaps visueel on-the-fly maakt?
Ik kan dit programmaatje dan vast wel zo aanpassen dat een tekstveld meegenomen wordt!

Graag reacties...

[Verwijderd]

Ik heb ooit voor een project vanuit een JavaScript dataset een imagemap proberen te genereren, maar ben daar na een tijdje vanafgestapt wegens onoplosbare problemen. Het dynamisch genereren van imagemaps is geen sinecure.

Uiteindelijk heb ik het zo gedaan dat ik met JS met een aan de mousemove-event gekoppelde functie de coordinaten uit de dataset controleerde, en zo keek binnen welke area ik hing.

[Verwijderd]

Het genereren vanuit PHP lukt prima, het is het bewerken van de lijsstukken/area's wat ik dynamisch wil laten doen. Het gaat me alleen om de coordinaten van elke area.

Welke problemen heb je toen ondervonden? Misschien, hopelijk, wilde je iets anders bereiken met je script.

Zou je eventueel het scrip willen posten? Of heb je hem ergens draaien?

[Clay]

Een imagemap creator kan je in dhtml op zich prima maken. Je hoeft "alleen maar" een script te bakken waarmee je met je muis een selectie kan maken (divje resizen verplaatsen met een gestippelde border oid), en met de coordinaten die je dan krijgt kan je dan door met wat strings te poken best een imagemap uitpoepen...
Hoe je dat dan opslaat en weer uitleest staat daar dan ook vrij los van; de imagemap heb je dan iig.

[Verwijderd]

juist, zo'n script heb ik nodig. Heeft iemand er één in de aanbieding? Met DHTML ben ik niet echt thuis
Ik heb al wil zitten denken. Ik heb een script nodig dat een lijn kan trekken van één punt naar een ander en van daaruit naar weer een ander. Niet moeilijk lijkt me, maar de functies zijn me onbekend. Tevens kost het veel tijd een goede userinterface te bouwen. Ik hoop dat iemand er toevallig één is tegengekomen, of zelf de moeite heeft genomen om zo'n script te schrijven.

[Clay]

Er zijn hier redelijk recent nog wat dingen gepost met muist-scalable layers, crisp had daar dacht ik een (in combo met php?) image clipper/viewer van gemaakt. moet je ff zoeken.

[Verwijderd]

Kan er niks over vinden. Heb je niet meer informatie?

[pasz]

om lijntjes te trekken kun je dit voorbeeld misschien gebruiken :
http://www.caoxuan.com/cxk/webart/goodies/graphs/graph1.html

[Verwijderd]

Bedankt! Ik ben overigens ook al een en ander tegengekomen op: http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Toch blijf ik het jammer vinden dat er geen tool/script te vinden is die standaard al imagemaps kan maken middels een browser. Alles moet met een windowsprogramma.

[syllaz]

Toch blijf ik het jammer vinden dat er geen tool/script te vinden is die standaard al imagemaps kan maken middels een browser. Alles moet met een windowsprogramma.

Ik vind het niet zo gek hoor. Voor degelijke professionele scripts ben je als developer vaak lang bezig ... en aangezien dit soort zaken voor CMS toepassingen gebruikt worden, kosten ze een hoop geld om te maken. En dan ga je je mooie scrippie natuurlijk niet zomaar voor jan en alleman online gooien

[Clay]

Ik denk dat wat erbij komt kijken best meevalt. Je hebt maar een paar dingen die echt moeten;

- Plaatje instellen in een "working space". da's geen kunst.
- Met je muis een layer kunnen verslepen, en resizen. da's al wat lastiger
- coordinaten uitlezen, en met script de imagemap string bakken. valt ook best mee.

De cms verwerking ervan komt dan misschien wat meer bij kijken, maar als ik het goed begrepen heb hoeft het alleen maar als string weggeschreven te worden, (al zou uitlezen en editen weer lastiger worden in dat geval) en het is idd waar dat je het niet zomaar voor jan en alleman online gaat gooien, maar functioneel is het niet zo uebermoeilijk.
Op mn werk heb ik vergelijkbare dingen gedaan waar dhtml met oa. pdf en image verwerking werd gebruikt. Maar dat kan ik hier moeilijk beschikbaar stellen natuurlijk.

[crisp]

Clay schreef op 20 February 2003 @ 14:48:
Er zijn hier redelijk recent nog wat dingen gepost met muist-scalable layers, crisp had daar dacht ik een (in combo met php?) image clipper/viewer van gemaakt. moet je ff zoeken.

Klopt, en was idd een combo met php om een selectie uit het plaatje te kunnen maken en/of roteren. Staat nog op mijn oude bak, maar ik zal het vanavond weer even online gooien

[Clay]

Daar moet best wel een imagemap creator van te bakken zijn lijkt me.

[crisp]

As promised: http://therealcrisp.xs4all.nl/exp/croppainting.html

[Verwijderd]

Ziet er leuk uit! Wat ik wil komt in de buurt van wat jij hebt gemaakt, maar ipv een rechthoek gebruik ik een polygoon om een gebied te defineren.
Het ziet er naar uit dat ik toch maar moet gaan programmeren, na lang zoeken heb ik nog steeds niet de juiste scripts kunnen vinden die me op weg kunnen helpen.

Enig idee hoe ik polygoon opvul met een bepaalde kleur (transparant gifje)?

[Clay]

pff je hebt wel eisen

Met html lijkt me dat erg moeilijk worden. vml kan het op zich wel mee, maar je zou het dan ook in flash kunnen gaan doen. Toch ga je dan wel erg veel tijd en moeite steken in een dergelijke tool. Afhankelijk van de mate waarin het uiteindelijk gebruikt moet gaan worden dan.

[Verwijderd]

ik heb een tijdje geleden eens dit gemaakt.. vrij brakke code
werkt al wel redelijk...
klik linksboven 't type aan dat je wilt tekenen. Dubbelklikken om vast te zetten, rechtermuisknop om te cancellen

http://www.countertrack.com/imagemap/

[Verwijderd]

superscript! Sorry, ik las het net pas, maar dit precies wat ik zoek!
Met een aantal aanpassingen en uitbreidingen kan ik het compleet maken! Bedankt jongens!