Hi All,

I've recently been getting familiar with the Zencart shopping cart system. I find that the system works well for off-the-shelf products, but our website will be selling bottles of wine and spirits with personalised labels.

I'd like to create a slick solution where the user can choose a label design, and then it will open a new page where they can choose the text on their label. The text should update realtime. I was thinking some sort of javascript would be capable of this? ie: displaying an image the user clicks on, and laying text with a particular font over the top. Much like THIS: Website

Can anyone recommend the best way to do this? I'm comfortable with creating a table showing all the images, but how do I make it clickable so it loads up in an Interactive window?

Ideas on a postcard! thanks

I would go about it like this:

First, position the label image absolutely with CSS.

Then absolutely position some DIVs across the image, like for the custom title, date, etc. Use CSS to create the right font in each DIV. Also, make them the exact width of the label image and use text-align:center so that the text stays centered within.

Then use javascript to dynamically print the text into each DIV as the person types into the form.

(Also, the javascript on the page you linked to is visible in the page source, although it's a little messy. I don't think you'd need nearly as much code as that.)