how can i do this [php and js probably]

[Zedzero]

for my new site, i need to let visitors click on an image, and according to the pixel they clicked on, they will be redirected to a new page.

what i tried:
- make a table with the said image as background, and 1x1 td's all over. so it would be easy to add onClick to each td. even on my local server it took like 5 minutes to load. because all of the code was generated serverside.

security is not a concern on this project, so then i tried to create the same thing with javascript:


<script type="text/javascript">
width = 480;
height = 640;
document.write("<table background=a.jpg border=0 width="+width+" height="+height+" cellpadding=0 cellspacing=0>")
for (i = 1; i <= height; i++)
{
document.write("<tr>");
for (j = 1; j <= width; j++)
{
document.write("<td></td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>


this didn't even work. now i'm not into js very much, and i coded this looking at some examples and tutorials. so don't laugh please :)

- what is wrong here?
- do you have any other idea to implement this? (i don't want to use flash)

[Zedzero]

i just tried the same thing with imagemap, it couldn't finish the job in 5 minutes, so i closed it.

any suggestion?

[ravianz]

Hi!
i am not sure whether i understood ur problem comletely or not but what i understood is that you have one big picture and you want many links on the single picture; if so then =>

Suppose your image name is main.gif then your code to display image will be:

<img src="images/main.gif" alt="" width="641" height="21" border="0" usemap="#Map">

and then any where, as you like, you can use the following code:

<map name="Map">
<area shape="rect" coords="68,6,138,15" href="http://www.webappps.com" >
<area shape="rect" coords="168,6,238,15" href="http://www.jokesinn.com" >
<!-- you can use as many <area> tags as you need --!>
</map>


here
coords="left-upper x, left-upper y, right-lower x, right-lower y"


if this was not your problem; i am sorry for misunderstanding;

[ravianz]

Hi!
i am not sure whether i understood ur problem comletely or not but what i understood is that you have one big picture and you want many links on the single picture; if so then =>

Suppose your image name is main.gif then your code to display image will be:

<img src="images/main.gif" alt="" width="641" height="21" border="0" usemap="#Map">

and then any where, as you like, you can use the following code:

<map name="Map">
<area shape="rect" coords="68,6,138,15" href="http://www.webappps.com" >
<area shape="rect" coords="168,6,238,15" href="http://www.jokesinn.com" >
<!-- you can use as many <area> tags as you need --!>
</map>


here
coords="left-upper x, left-upper y, right-lower x, right-lower y"


if this was not your problem; i am sorry for misunderstanding;

[dave487]

Assuming you want to create a page like http://www.milliondollarhomepage.com/ then you would do it with an image map (a very big one).

If you look at this guys source code it is mainly taken up by the image map.

[forkqueue]

input type=image will give you a submit button for a form and additionally the co-ordinates clicked on in the variables x and y

Should be easy enough to work it out from there..

[WhatiFind]

Zedzero if you want to create something like the milliondollarwebsite, you should check this script. It's the complete working script of a pixelwebsite. http://www.milliondollarscript.com/

[ravianz]

It can also be done using Macromedia Fireworks;;