XY Coords and so much more

I have a project where I need to be able to control four things onClick. I have a set of 12 arrows (3 colors, 4 directions) and I need to specify the XY coordinate of the arrow tip and I need to call the arrow by color and direction (instead of by src). Is this something that I can do with a 2d array?

My Java looks like this:

function ixycoord(i,x,y) {

document.images["baseimage"].src = i;

if (document.getElementById)
{document.getElementById("baseimage").style.top = y;
document.getElementById("baseimage").style.left = x} else

if (document.layers)
{document.baseimage.top = y; document.baseimage.left = x} else
{document.all.baseimage.style.top = y; document.all.baseimage.style.left = x}
}


And the HTML looks like this:

<div id="baseimage">
<img id="baseimage" src="/arrowred.png">
</div>

<p>This is a the <a href="#n" onClick="ixycoord('whiteup.png',49,57)"> aorta</a>. This is the <a href="#n" onClick="ixycoord('blueleft.png',145,144)"> ventricle </a> and this is the <a href="#n" onClick="ixycoord('redright.png',220,230)">pericardium</a>. </p>


I have to be able to make it *NOT* have the the image source in the onClick. Thanks in advance for any help you can give me!

did you notice the id for the div and the img is the same??
id is supposed to be unique

change your div id to

<div id="baseimagediv">

and you're all set

@jack_wookie

Could you provide a link to the images so we could see the final product in action?

document.layers relates to Netscape4, which is one with Nineveh and Tyre. :eek:

My Java looks like this:


Java and Javascript are entirely different programming languages, in spite of the confusingly similar names. Rather like Austria and Australia!

That's fairly straight forward, but need to see the images so we can see the location of the arrow tip.

I apparently wasn't clear enough. All of the arrows point to the correct spot. The code works just fine, everything does exactly as it is supposed to. The alternate arrows are stored in a folder and are successfully called and put in the correct place based on the XY coordinates. The code is fine.

My problem is:

My boss thinks it is too cumbersome to have to write the image name each time. That is he thinks, IXYcoords ("image.png", 345, 454) etc. is too cumbersome. Instead he wants four points (color, direction, x, y).

So let's say we have 12 arrows labeled by (3) color and (4) direction.
whiteup.png, bluedown.png, etc.

I need to have the arrows called by (white, down, 384, 472). Can I do this with an array of some sort?

Not sure I understand the need of an array...:confused:
Add to JS

function pic(iColor, iDirection) { return iColor+iDirection+'.png'; }

Change HTML

<p>
This is a the <a href="#n" onClick="ixycoord(pic('white','up'),49,57)"> aorta</a>.
This is the <a href="#n" onClick="ixycoord(pic('blue','left'),145,144)"> ventricle </a> and
this is the <a href="#n" onClick="ixycoord(pic('red','right'),220,230)">pericardium</a>.
</p>