Graphical selection

[Bob Bedford]

I've to create a theater seat plan, where people may book online their
seats. It' there any way to "draw" seats with javascript (of different
colors, as closer your are to the scene, more you pay) and then select the
seats (so they change color when selected) and on the same page, change the
total price when changes are done ???? This should be on a FORM that I will
use to save the selected seats in a database.

Any idea ???? any close script I may use ????

Thanks for help

BoB

 

[Martin Honnen]

I've to create a theater seat plan, where people may book online their
seats. It' there any way to "draw" seats with javascript (of different
colors, as closer your are to the scene, more you pay) and then select the
seats (so they change color when selected) and on the same page, change the
total price when changes are done ???? This should be on a FORM that I will
use to save the selected seats in a database.

Drawing seats can be done by SVG which can be manipulated by JavaScript,
Adobe has a demo of that at
http://www.adobe.com/svg/demos/devtrack/theater.html

 

[Grant Wagner]

I've to create a theater seat plan, where people may book online their
seats. It' there any way to "draw" seats with javascript (of different
colors, as closer your are to the scene, more you pay) and then select the
seats (so they change color when selected) and on the same page, change the
total price when changes are done ???? This should be on a FORM that I will
use to save the selected seats in a database.

Any idea ???? any close script I may use ????

Thanks for help

BoB

My first thought would be to produce two images with a floorplan of the
theatre, using different colors for selected and unselected, then chop it up
into thousands(?) of images, one for each seat. Use a table to reassemble the
image, then add Javascript to detect the clicks, swap images and keep track of
everything. Using an image map might seem like a viable solution, but support
for mouse events on image maps is worse then Javascript support in general, and
you'd have the problem of not being able to change the color of selected seats.

Using a thousand (?) image solution would result in a _huge_ amount of HTML
being delivered to the client's browser and would be dependant on the user
having Javascript enabled. So you'd be telling dialup users or those who have
choosen to disable Javascript that you aren't interested in their business.

Whatever solution you finally arrive at, I'd think you should consider people
with slower connections and those without Javascript available/enabled.

And no, it's highly unlikely there is any sort of pre-written script to do what
you want, although examples the individual bits you need to make it all work
(handling image swaps, managing form data, etc) are available (with various
levels of Javascript authoring competence) all over the Internet.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html

 

[Bob Bedford]

Thanks Martin,

I need something without installing any plugin !!!! but this can be done in
pure Javascript and also in server side script (PHP/ASP), without the need
for a plugin.

I am wrong saying this ??? OnMouseOver and OnMouseClick can be used to
switch the image type of a certain place ??? I've never worked with it, so I
don't know if it works.

Please tell me if it can be done with Javascript and PHP !

BoB

 

[Randy Webb]

Bob Bedford wrote:




My first thought would be to produce two images with a floorplan of the
theatre, using different colors for selected and unselected, then chop it up
into thousands(?) of images, one for each seat. Use a table to reassemble the
image, then add Javascript to detect the clicks, swap images and keep track of
everything. Using an image map might seem like a viable solution, but support
for mouse events on image maps is worse then Javascript support in general, and
you'd have the problem of not being able to change the color of selected seats.

Each "seat image" would be a transparent gif that you could, onclick,
change its background color. Then, you only need one image. Perhaps 4
images if the stage is centered with chairs/seats on all 4 sides.

 

[Jim Ley]

I need something without installing any plugin !!!! but this can be done in
pure Javascript and also in server side script (PHP/ASP), without the need
for a plugin.

Since you're relying on javascript for the enhanced functionality, you
might aswell rely on a plugin too, and just leave the other folk with
the simple view (a static image and a form saying "which seats")

I am wrong saying this ??? OnMouseOver and OnMouseClick can be used to
switch the image type of a certain place ??? I've never worked with it, so I
don't know if it works.

Not in a remotely efficient way.

Jim.