Avanceret Imagemap

Tags:    html css

Hej

Jeg skal til lave et bookingsystem for et lokalt kræmmermarked, hvor folk kan booke en stand på markedet. Da jeg lovede at lave det, troede jeg det ville være forholdsvist simpelt, men det er det ikke lige umiddelbart.

Jeg har et kort over hele pladsen, hvor hver stand er markeret ind. Jeg skal have gjort det muligt at man kan klikke på en stand og derefter blive videresendt til en booking side. Min første tanke er, at lave et imagemap vha. f.eks. Gimp, så jeg kan markere alle stande ind og lave dem til links. Det er ikke noget problem.

Mit problem er, at jeg gerne vil vise hvilke stande der er booket ved f.eks. at markere dem med en rød farve så det tydeligt fremgår.
Er det muligt på en eller anden måde at farve et <area>-tag og det område den dækker? Eller er der nogen, der har en anden god idé?

På forhånd tak
Mvh. Emilbp



8 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 8 karma
Sorter efter stemmer Sorter efter dato
Hvis jeg skulle lave det ville jeg bruge Flash AS3. Ved hjælp af en database kan din flashfil så finde ud af om pladsen er booket, eller stadig ledig, og hvad den skal vise og linke til i de enkelte situationer. Men bare mig... Har aldrig gidet at bruge tid på imagemap...



Afhængigt af hvor kringlet kortet er, kunne overveje at billedet bliver genereret/modificeret serverside med noget asp/php/ ..

Ellers er Flash nok den foretrukne løsning.



Er det ikke noget i den stil man kan lave med det der .svg format google snakker så meget om.
Er ikke sikker på du kan bruge det, men du kan da kigge på det.



Er det ikke noget i den stil man kan lave med det der .svg format google snakker så meget om.
Er ikke sikker på du kan bruge det, men du kan da kigge på det.

Det kan lade sig gøre, og det er smart!

SVG er XML, så det er ret enkelt at sætte sig ind i, hvis du allerede kan XML, det er ihf. nemt at lave røde rektangler over de forskellige steder. Men hvis du allerede har kortet og ikke skal tegne det først, så er det nemmeste nok, at bruge et serverside-sprog (JSP, PHP, ASP, ASP.NET, etc.) til, at tegne røde rektangler eller lignende over stederne.
MVH Jeppe.



Der er da også mange andre sjove foreslag.

brug standebillede og absolute placere reserveret stand billeder over det.

brug reserveret standbilleder og absolute placeret standebilleder over dem med standfelterne transparante.

brug HTML canvas kan man sikker også....på en eller anden måde.

Opdel dit stand billed i mindre stand billeder og lav versioner af de mindre stand billeder med samtlige kombinationer af reserveret, serveren skal så skrive den rigtige sti.
et billed med 8 stande har 256 kombinationer så altså 256 billeder, men 2 billeder med 4 stande har kun 16*2 kombinationer altså kun 32 billeder. Stien kunne så være billed1_0000.jpg hvor de 0000 er tilstanden for hver stand ikke reserveret og 0001 er den ene stand reserveret.

Kan desværer ikke komme på flerer vanvittige ideer.







Kan desværer ikke komme på flerer vanvittige ideer.


Man kan også bare få brugerne, til at sætte en ring om det sted de vil booke med en sort sprittusch direkte på skærmen, og så få dem til at tage et billede med deres kamera og sende det ind...:lol:

Undskyld for off-topic, jeg kunne bare ikke lade vær'.



Tak for det mange gode bud. Jeg tror jeg vil forsøge at bruge JavaScript til at tegne farvede rektangler de konkrete steder på skærmen. Har luret, at jeg bør kunne bruge mootools til at finde positionen af et <area>-tag, men jeg kan bare ikke få det til at virke. Er der nogen der kan komme med et eksempel?



Mange tak for de gode bud. Jeg har selv fået lavet en løsning nu, ved at bruge javascript (mootools). Jeg regner positionen af <area>-tagget ud, og indsætter en rød div-boks hen over det. Samtidig deaktiverer jeg linket for det area-tag. Kildekoden til min funktion kan ses her:

Fold kodeboks ind/udKode 




t