...

View Full Version : XY Coords and so much more



jack_wookie
03-09-2012, 06:01 PM
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!

swiper
03-09-2012, 07:22 PM
did you notice the id for the div and the img is the same??
id is supposed to be unique

swiper
03-09-2012, 07:26 PM
change your div id to

<div id="baseimagediv">

and you're all set

jmrker
03-10-2012, 04:19 AM
@jack_wookie

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

Philip M
03-10-2012, 07:50 AM
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!

webdev1958
03-10-2012, 08:34 AM
That's fairly straight forward, but need to see the images so we can see the location of the arrow tip.

jack_wookie
03-12-2012, 09:07 PM
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?

jmrker
03-12-2012, 10:47 PM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum