Image Map Generator - Bit By Bit

[chibineku]

I am writing an image map generator and so far it's coming on nicely, but for some reason this:

document.getElementById("coords").innerHTML="Coords: "+x[x.length-1]+","+y[y.length-1]+" / "+x[x.length]+","+y[y.length]

returns:

Coords: 31,50 / undefined,undefined

Just an example, but the first coordinate is correct, the second comes back undefined,undefined. I tried adding an alert that showed me that x.length and y.length are defined and returning the right length for the array. It boggles the mind, it does, and if anyone can unboggle it I shall be most grateful!

[chibineku]

*bump*

[Ingolme]

The last element of an array will always be one less than the length. If you want to obtain the last two elements of an array, you would search for length-2 and length-1Here's an array with length 4:

a = new Array();a[0] = 1;a[1] = 2;a[2] = 3;a[3] = 4;

So your code should look like this:

document.getElementById("coords").innerHTML="Coords: "+x[x.length-2]+","+y[y.length-2]+" / "+x[x.length-1]+","+y[y.length-1];

[chibineku]

Thank you...I can't believe I missed that!

[chibineku]

New problem: This:

document.getElementById("coords").innerHTML='<area shape="rect" coords="'+x[x.length-2]+','+y[y.length-2]+','+x[x.length-1]+','+y[y.length-1]+'" href="'+document.getElementById('imgHolder').src+'" />'

Has the effect of clearing the element 'coords' (a span) without replacing it with the string it should. I've tried retyping it, swapping the single quotes for double quotes (which shouldn't make a blind bit of difference), and I can't see anything wrong with it. Perhaps someone with eagle eyes can see an issue with it. I sure can't.

[Ingolme]

Do you want this code to appear as text, or to be parsed as real HTML?

[chibineku]

Ah you're a genius! Or I'm just getting stupider... vote now! Muchos gracias, again.

[chibineku]

Another one!I want to erase all previous clicks (and therefore coordinates) from my x and y arrays, and I thought the easiest way would be simply to delete them from the output. This is easy enough for the circle and rectangle maps, because I just display the last 1 or 2 coordinates respectively. But for the polygon shape, you can have as many coordinates as you like. Here's the code:

if (choice=="3") {polyStringOld=polyStringfor (j=0;j<x.length;j++) {polyString+=x[j]+","+y[j]+","document.getElementById("coords").innerHTML='<area shape="poly" coords="'+polyString.substring(polyStringOld.length,polyString.length-1)+'" href="'+document.getElementById('imgHolder').src+'" />'}

I thought the easiest way would be to store the old polyString, which has a record of every coordinate clicked, and then get the substring from the length of it to the end (minus one to remove a stray comma). But it doesn't work, for some reason. Is there a simpler way to do this? I can't think how to reset the x and y arrays in such a way that I can still accumulate the coordinates of the clicks. Any thoughts, anyone?

[Ingolme]

If you just want to reset the array so that it has no elements, you can just write

x = new Array();y = new Array();

I'm not sure if what you're asking is something else.By the way, your for() loop is missing a closing brace, unless you're expecting it to keep changing the innerHTML for each element in the x array.

[chibineku]

Okay, it's all going well, apart from one little niggle that browsers seem to have.I've added a tester image with map, the properties of which are changed depending on the users inputs, so that the map demonstrates exactly what you'll be getting if you use the code generated by the app.I have it working great for rectangles - the href, src image, coordinates, map name, etc. all change and it works.For the circular map, however, FF gives me an error, telling me that the coordinates are not in the left, top, right, bottom format. I am aware of that, because circular maps don't have that format, they use left, top, radius - right? I tried in IE and Chrome and they don't complain, but it doesn't work. Oddly, if I add another coordinate, I do get a map, but it's not the one I want. Here's a link to the page, the source is too bulky to post in here. Ignore the bad image placement. I'll work on the niceties later. Also ignore the longhand code...I may assign all the document.getElementById("blah")s to shorter names later, but again that's aesthetics.Any thoughts?

[Ingolme]

Somewhere or another, you're not creating a "circle" area, you're creating a "rect" area. That's why it won't accept the parameters correctly.Check in your code that you didn't copy and paste the rectangle code and then forgot to change "rect" to "circle" somewhere.Actually, both the circle and the poly have the mistake. You've copied the following line for all three types of area:

document.getElementById("defaultArea").shape="rect"

[chibineku]

That's what I get for copying and pasting, I suppose.Thanks again - your persistance is really appreciated, especially with the little things.

[chibineku]

Okay, so I've decided to rework the circle function a little, so that you click one place where you want the center of the circle to be, and another anywhere on the circumference. The script works out the radius and plugs it into the output and changes the test image so that it demonstrates the shape of image map you've created. The only problem is that for some reason the point you click as the center ends up being the uppermost point of the circle. I thought I had it figured out: I am reading the x and y values from an array, and had been using the last point in the array as the middle point. Of course, that didn't work, because that was the point on the circumference. So I changed it to read the second last point - same problem. Here's a link. Ignore the radius input field. I can't think what else to do. As far as I can see, the second last point in the x and y arrays ought to give you the point you chose as the middle point, and the next one should be used only for calculating the radius. I am aware of a shortcoming of the whole thing, which is that if you don't change shape, you need to click a couple of times to kind of reset the second last points in the arrays. Coming soon: a refresh button!

[justsomeguy]

How do you know if it's working? It prints out an area tag, is that all it does?

[chibineku]

It prints out an area tag, and the right hand image is updated to give you a live preview of the area you've selected. But if you create an area in the left image, it's always offset slightly in the right hand image. Especially in the case of circles, when the point you first click, supposedly the center, becomes a point on the Northern hemisphere. Makes no sense, no sense at all.

[jesh]

I think it has to do with the way that you're marking up and styling the image and it's parent container (the div):

<div id="imgContainer" class="imgContainer">Set coordinates:<br/><img id="imgHolder" onclick="getCoords(event)" src="desk1.gif"/></div>

The div "imgContainer" is styled with an absolute position 250px from the top. When you look at the offsetTop for the "imgHolder" img element, it reports that as being 250 rather than the 270 (or so) that it actually is. I believe this is because of the inline content that is included in the div. If you remove the text and the br element, the code functions as you'd expect it to:

<div id="imgContainer" class="imgContainer"><img id="imgHolder" onclick="getCoords(event)" src="desk1.gif"/></div>

[chibineku]

Ahh, okay. Easy as that. Means I have to independently position the text that is meant to sit above each image, but that's not much of a hardship.I'm pretty much done with this script now anyway. Odd thing: for some reason, this thread wasn't showing up in the New Posts list. Odd. Also, I get logged out a lot as I move around... Another matter for another thread.