[jonnekke]

Hi there...

I'm looking for a way to accomplish this...

in the backend of my site where the owner can add, edit or delete items
I want to make an opportunity to set the align of a background image.

I the attached image you see an example of how it should look.
The nine squares are buttons and should "select" the align type
I set as value as a radiobutton would do.

I could make a table with nine square cells en place a radiobutton in each
but that's not the way I like it to look.

The value that is set should be processed with php and stored in mysql.


Does anybody know how to get there?..

_j

[End User]

Make a table with nine square cells and place an arrow image in each cell. Attach an onClick event to each image and process the input that way. You could do the same thing with one image and an image map, but ewwwwwww, that would be sleazy.

[jonnekke]

I want to make it 9 images...

but can it keep the value "in memory" tlll the form is submitted?
Or determine it on submit like a radio button?

[Nico]

When one of the images is being clicked, call a Javascript function (onclick) which saves the value of the clicked image in a hidden input field. Then it'll automatically submit when the form submits.

[End User]

Originally Posted by jonnekke

I want to make it 9 images...

Like I said: "Make a table with nine square cells and place an arrow image in each cell."

[wirehopper]

You could use an image map.

HTML map tag

HTML Code:

<img src="align_square.gif" width="81" height="81" alt="Alignment" usemap="#align_map" />
<map name="align_map">
<area shape="rect" coords="0,0,26,26" href="?align=tl" alt="topleft" />
<area shape="rect" coords="27,0,53,26" href="?align=tc" alt="topcenter" />
<area shape="rect" coords="54,0,82,26" href="?align=tr" alt="topright" />
...
</map>

You can also put an onclick on the area tags. HTML area tag

HTML Code:

<input type="hidden" id="alignment" value="default" />
...
<area shape="rect" coords="0,0,26,26" alt="topleft" nohref onclick="document.getElementById('alignment').value='topleft';" />
...

Untested, hope this helps.