Png to html div issue

[ayesha789]

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.

Looks really nice, but I don't understand what you're trying to do. If you want to create editable boxes (dropdowns or textareas or text inputs) when you click on a box, then you need javascript. There are quite a few of these on the market (and free). Search for "editable tables". Unfortunately, many of them come 'entwined' with their own css, and changing the style can be a bit of a fiddle.

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.

Just a thought.

[ayesha789]

I want to write PHP query in the box. when u export it into html these white box are just box. we can not type any thing in it until we make it editable.

I want to write PHP query in the box. when u export it into html these white box are just box. we can not type any thing in it until we make it editable.

I don't understand any of the above? Anybody?

[ayesha789]

In North Jan Pro I want to make white square editable or want to make it div?

Which one? Are you asking which one it should be?

I mentioned previously that you load the page with NO editable cell. It's the onclick function that changes the tag contents to an input box + update (+ cancel?) button.

[ayesha789]

Which one? Are you asking which one it should be?

I mentioned previously that you load the page with NO editable cell. It's the onclick function that changes the tag contents to an input box + update (+ cancel?) button.

Is there any way to convert all the slices to html editable regions(DIVs)?

Show the slice markup and we'll see.

[ayesha789]

I got it. I just delete images and make them editable . i used div inside and write query