image maps in javascript?

javascripting

[rudderow]

I'm working on a photo album that advances a photo if the user clicks on the right side of the image and goes back one if clicked on the left. I found how to do this using different pages and calling it through a simple <map> tag.

However, in order for it to work for my site I need to be able to advance through an array. Any way to set it up so that the coordinates of a click are read in by a javascript function?

I'm not sure if I'm even phrasing this right. I have only a basic knowledge of programming but can grasp the concepts and understand what I'm reading pretty well.

[adni18]

You want to get the coordinates that the user clicked on, relative to the top left of the image?

[adni18]

If you're concerned about changing images, and the previous coordinates interfering, you could just change the innerHTML of the map tag.

[rudderow]

the function used to advance the photo is this:

advancePhoto = function(){
// Cycle through to end, then repeat
if(photoId == (photoArray.length - 1)){
photoId = 0;
} else {
photoId++;
}
return photoId;
}

advancePhoto();

Within javascript, I want to be able to call this function only if the user clicks on the right half of the photo. A similar function would get called if the other half were to be clicked.

[adni18]

are all your images the same size?

[rudderow]

No, they're different sizes, but there's an array of all the widths and heights within in the same <script> tags. I was planning on calling from that in order to specify the coordinates. I'm just unsure of commands pertaining to image maps, or even if it's even doable.

[adni18]

you could just change the coord attributes via division of the width and height by 2.

[rudderow]

Exactly what I was planning on doing. So it can be done? What kind of command should I be using here?

[rudderow]

More specifically, here is the code that displays the photo (and of course the link to the next photo).

// Set source, width, and height of new photo
document.getElementById('Photo').src = photoDir + photoArray[photoId];
document.getElementById('Photo').width = wNew;
document.getElementById('Photo').height = hNew;
document.getElementById('NextLink').href = "#" + (photoId+1);
document.getElementById('Caption').innerHTML = captionArray[photoId];
document.getElementById('Counter').innerHTML = (photoId+1)+' of '+photoNum;

How and where would I specify the image coordinates to call

document.getElementById('PrevLink').href = "#" + (photoId-1);

for the left half of the photo instead of the fifth line of code which is currently the only link?