dynamic image and area creation

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hi- I want to create a dynamic image with areas so that when the user
clicks different areas, the user jumps to those pages.  The problem
is, I can't seem to figure out how to do this efficiently.

Suppose I have a table,items in a database:

itemid  description   count

So, basically, I want to create an image that has 3 ovals,
representing the top 3 occurring items (with the highest count) in
this table.  So, first, I create the image html:

echo "<image src=genimage.php?items=$itemstring...

So, here, I pass genimage a string that encodes the keys for the top 3
occurring items.  And in genimage, a query is created and called to
get the descriptions and counts, and then displays those descriptions
and counts in the ovals.

The problem is, now I have to do this all over again to generate the
area tags and corresponding jump URLs.  Why? because I can only send
the data in a GET string, since the image source has to be a url.  So,
I'm calling the identical query twice-once inside the image
generation, and once in the area generation.

I suppose I *could* get all the data once (the item descriptions and
counts) and encode all of that and send that as a data string, but
there has to be an easier way.

Another suboptimal solution is to generate a temporary image and
create img link to that image, but I'd rather keep these dynamic.

So, is there a way create and then embed an image directly into a
page? Or must I use a URL reference?

In other words, what I'd like to do is something like:


Any ideas on if this can be accomplished?


Re: dynamic image and area creation

Quoted text here. Click to load it

I have read this three times and
(a) I still can't figure out what you are trying to do and
(b) what problems your are having.


Re: dynamic image and area creation

Quoted text here. Click to load it

Thanks for the reply Shelly. I apologize for the confusing wording of
the problem.

Here's what the problem is in a simpler form.

If you want to create an image dynamically, and then create the
corresponding map and area tags, is there a way to somehow save the
spatial calculations that you did to create the image for use in
creating the area tags.

Let's just assume you have a page that you pass 3 strings to via GET,
and all the page does is generate three ovals containing those

That image generation page has to calculate the width of the strings,
etc. and then the size of the ovals so that the strings fit nicely
into the ovals.

Now, you want to go back and create the map to that image so when the
user clicks on the ovals, he is taken to a new page.  It seems to me,
that you now have to do this spatial calculation all over again,
because there's no way to return the locations of the ovals.

Is this clearer?

Thanks again for the response.


Re: dynamic image and area creation

<dino d.>
<Mon, 01 Oct 2007 12:13:43 -0700>

Quoted text here. Click to load it

Easy using GD .

- grab the images and calculate the total width and/or height
- paste the images onto a newly created blank image
- create 'image map' co-ordinates and associate urls with the areas

If you have never used a 'image map' before - then create some image map  
areas in a web authoring app and then have a look at the html code .


Re: dynamic image and area creation

Quoted text here. Click to load it

Thanks for the post.  The problem is not how to do it, the problem is
how to do it efficiently?  Calculating the individual image
coordinates takes n steps, and then you have to re-calculate the exact
same coordinates for the map because there is no way to get them out
of the image, short of saving them to some temp file. I am looking for
a workaround that lets me do the calculations once, render the image,
and somehow pass the calculations back to the calling script.


Re: dynamic image and area creation

<dino d.>
<Mon, 01 Oct 2007 12:46:51 -0700>

Quoted text here. Click to load it


You dont have to generate them again on the same page/script .

<img src=blah width=$batman[0] height=$batman[1] border=0>
<img src=blah width=$boywonder[0] height=$boywonder[1] border=0>
<img src=blah width=$catwoman[0] height=$catwoman[1] border=0>

IMS there is a suitable circle/oval image map <tab> you can use grabbed  
image sizes to calculate these .

It sounds like you only needed examples of getimagesize() .


Re: dynamic image and area creation

Quoted text here. Click to load it

To clarify, I'm generating 1 image and a <map> tag.  The 1 image is a
bunch of images merged together using imagecopy.  So, in your example,
the "src=blah" is pointing to the merged image.  So, my php code looks
like this:

<img src=genimage.php?tags=5*4*3...

and genimage.php basically does this:

generate images for tags 5,4, and 3
stitch them together into one image
send them back as an image stream

So, since the sizes and locations are being generated inside genimage
script, there's no way to get the subimage size and locations.  If I
want to just create a table of individual images, for example, then
your solution works.

Thanks for the reply.


Re: dynamic image and area creation

<dino d.>
<Mon, 01 Oct 2007 13:22:33 -0700>

Quoted text here. Click to load it

The 'stream' is where your going wrong .

The end result your looking for is just a normal .jpg image with a  
suitable image map matched to it .

The end result .jpg and image map being generated via your genimage.php  
script .


Re: dynamic image and area creation

Quoted text here. Click to load it

so you're suggesting saving this to a file, then referencing the file,
rather than referencing a script?

Re: dynamic image and area creation

<dino d.>
<Mon, 01 Oct 2007 13:50:54 -0700>

Quoted text here. Click to load it

Only if you intend to reuse the generated image , A image generated by  
GD doesnt need to be saved to a file .

Either way , You need to process and create everything before using the  
<img> tag to display the .jpg image .

You also need to do everything in a logical step by step fashion .

Step one in your learning curve is how to find out the (width) of the  
text thats passed via GET .

Step two is generating the oval images from the above widths .

Step three is putting the text into the center of the oval .

Step four is counting up the 3 widths to create blank image .

Step five is pasting the 3 oval image onto the blank image .

No point going any further until you can do all the above .

Typing the following string into google would be aq good start .

php tutorial find the text width of a string


Re: dynamic image and area creation

dino d. wrote:
Quoted text here. Click to load it

Hi, Dino,

Yes, this is a problem.

You can do it, but it's not easy.

First of all, remember that your main page (the one containing the <img>  
statement) is processed first.  Once it has been processed and sent to  
the browser, the browser will request the file referenced in the <img>  

With this information, you could do the processing in your main file,  
then save the data in a file or database, then pass the information on  
to the image through a query parameter.

Another option could be to store the info in the $_SESSION array, as  
long as you close the session before the image is requested.  Normally  
this wouldn't be until after your page is completed, but for safety you  
might want to close the session before you issue the <img> statement.

Hope this gives you a couple of ideas.

Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.

Site Timeline