Posted by Jeff North on 11/15/99 11:26

On 12 Sep 2005 07:43:45 -0700, in comp.lang.php sygsix@gmail.com
wrote:

>| Yea, I realized after posting that PHP is rather beside the point. I am
>| using PHP to save the info in my database.
>|
>| But obviously what I need here is some kind of sh*t-hot DHTML tool that
>| lets me draw rectangles (table cells or DIVs or what have you) on a
>| grid, stretch, drag and drop them, and then somehow round up all this
>| info and submit it to the server to be saved -- coordinates so I can
>| re-draw them using the info from the database, and whatever other info
>| I want to save along with these recangles -- company name, status of
>| the booth, etc.
>|
>| So I more or less posted the same question on a DHTML newsgroup. I
>| know, it's a no-no but I shoud have only posted there to begin with.

If I understand you correctly you will need an image map editor
http://www.boutell.com/mapedit/
This is the first one I found using google. I've never used it so I
can't vouch for the app.

A little tutorial here:
http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479741

You'll end up with HTML code that looks something like:
--------------------------------------------------------------------
<IMG SRC="images/Dev.jpg" ALT="this is the images ALT tag info"
WIDTH="800" HEIGHT="600" BORDER="0" USEMAP="#imap">
<MAP NAME="imap">
<AREA SHAPE="RECT" COORDS="17,217,548,345" ALT="box 1">
<AREA SHAPE="RECT" COORDS="69,372,196,518" ALT="box 2">
<AREA SHAPE="RECT" COORDS="205,366,515,519" ALT="box 3">
<AREA SHAPE="CIRCLE" COORDS="687,303,62" ALT="circ1">
COORDS="631,333,606,332,590,349,592,362,600,368,602,370,605,393,626,449,
622,466,596,510,608,521,630,548,639,537,639,516,646,502,656,520,
689,561,676,488,702,497,713,505,722,522,731,524,737,514,743,490,
740,465,711,428,723,402,744,401,768,389,773,359,762,347,764,324,
737,363,716,357,686,364,665,361,649,354" ALT="poly 1">
</MAP>
--------------------------------------------------------------------
In the Area tags you will need to add the Title and onClick
attributes.

The Title attribute is required because only IE displays the ALT tag
information on mouseover, all other browsers use the Title attribute.

The onClick function will point to a javascript function to tell the
browser what information you want to display.

The Area items will look something like:
--------------------------------------------------------------------
<IMG SRC="images/Development10A.jpg" ALT="this is the images ALT tag
info" WIDTH="800" HEIGHT="600" BORDER="0" USEMAP="#imap">
<MAP NAME="imap">
<AREA SHAPE="RECT" COORDS="17,217,548,345" ALT="box 1" title="box
1" onClick="abc(1)">
<AREA SHAPE="RECT" COORDS="69,372,196,518" ALT="box 2" title="box
2" onClick="abc(2)">
<AREA SHAPE="RECT" COORDS="205,366,515,519" ALT="box 3" title="box
3" onClick="abc(3)">
<AREA SHAPE="CIRCLE" COORDS="687,303,62" ALT="circ1"
title="circ1" onClick="abc(4)">
<AREA SHAPE="POLY"
COORDS="631,333,606,332,590,349,592,362,600,368,602,370,605,393,626,449,
622,466,596,510,608,521,630,548,639,537,639,516,646,502,656,520,
689,561,676,488,702,497,713,505,722,522,731,524,737,514,743,490,
740,465,711,428,723,402,744,401,768,389,773,359,762,347,764,324,
737,363,716,357,686,364,665,361,649,354" ALT="poly 1">
</MAP>
--------------------------------------------------------------------

The javascript area will look something like:

<script type="text/javascript">
var iMapArr = ["","item1","item2","item3","item4","item5"];

function abc(itm)
{
alert( iMapArr[itm] );
}
</script>


Caveats:
If the user is using a text only browser then the page is unusable -
no image no map.
If the user has javascripting turned off then the above will not work.
Although you could change the onClick to point to another file that
will do the processing.

HTH
---------------------------------------------------------------
jnorthau@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

[Back to original message]