Hi, I am developing a Database , I have designed the layout in Fireworks. Now Export it into Html. Now There are 12 Months from Jan To Dec and for every month there are 3 regions and in each region there are 3 rows. I want to convert all boxes into divs so all boxes become editable as DIV. I have slice the PNG , u can export it into HTML and tell me how I can do it in easy way.
I assume the technology will be Ajax:
1. click the div (or table <td> element) - insert an input box (which can contain a value if a value for that cell already exists) within the div/td as well as an accompanying update button (or image).
2. the button/image has an onclick attribute that calls a js (ajax) function.
3. The js function reads the content of the input box and passes it to a php script. The script processes the info and attempts to store the new data in the DB.
4. If successful - pass success data back to the js script (simple echo or json data) and the input box changes back to a div/td (non-editable). If failed, send this data back to js, which will popup an alert or confirm saying so. A confirm may be better as you can give the user the option of trying again or closing the input (input -> div/td again).
Should be straightforward. I'd suggest using jQuery or prototype for the Ajax bit, if you decide to use this method.
Oh, almost forgot, before changing a div/td into an input, the script should check (e.g. a flag) to see if another div/td is currently in edit mode - if so, don't change it until that cell has been cleaned up.
I don't know if that's what you wanted, but that's how I'd do it.
As for your images. You could use one image and use background-position to choose background images via css. Personally, I'd cut the big image down (still only using one), so that I'd have sprites (no need for all those cells - just one - or none - td elements could give you similar results with uncollapsed borders).
An advantage of having sprites in your image is that you could have really nice rollover or 'active' colours. For example, if you were to click on North-Pro-FEB. Feb could be coloured brown with different colours for North and Pro too.