PDA

View Full Version : Detecting image files??


BDT
03-22-2003, 03:37 PM
My page needs to detect which image is at a specific location. I suppose that I could assign a variable, but I thought that I could test for it with something like:

if (document.images[i-1].src=="right.gif") msg="right"

However. when I try to use the variable msg , my test alert says it is unassigned.

As a test< I have even simplified it to:

if (document.images[1].src=="right.gif") msg="right"

But it still isn't working. Here is what I get from the alert I have added to the move() function:

this is image 2 and it points to the undefined

So I added another alert in the testIMG() function which runs from an onLoad to check for the image:

alert(document.images[1].src);

This alert gives the following when I click on the second image, for example (image[1], which is my image2):

file:///C:WINDOWS/desktop/JumpGame/right.gif

This IS the file I'm looking for and it is in the same directory as the html file. Is there something wrong in the way I'm defining the src of the file in my conditional statement? I've tried including the whole path, but that didn't do it. I know the html can't be tested without the image files, but I suspect I'm overlooking something pretty simple.

Where am I getting off track? Here is the code that I am working with:

thanks

<html>
<head>
<title>Jump</title>
<script LANGUAGE="JavaScript" type="text/javascript">
var msg
function testIMG() { // it returns the image file name
alert(document.images[1].src);
}
function move(i) {
if (document.images[1].src=="right.gif") { // it returns 'undefined'
msg="right";
}
window.alert("this is image " + i + " and it points to the " + msg);
}
</script>
</head>
<body onLoad="testIMG();">
<h1>Jump</h1>
<hr>
<tr>
<td> <a href="#" onClick="move(1);">
<img border=0 src="blank.gif" height=65 width=72></a>
<td> <a href="#" onClick="move(2);">
<img border=0 src="right.gif" height=65 width=72></a>
<td> <a href="#" onClick="move(3);">
<img border=0 src="right.gif" height=65 width=72></a>
</tr
</html>

cheesebagpipe
03-22-2003, 10:21 PM
When you read out the Image.src property (onload) it came back with the full (absolute) url. That should have tipped you off as to why this:

if (document.images[1].src=="right.gif")

...was evaluating to false. Nothing mysterious happening here - the scripting engine is reading the same data as you are, and comparing it as well. Try this:

function move(i) {
var sImgSrc = document.images[i].src;
if (sImgSrc.substring(sImgSrc.lastIndexOf('/') + 1) == "right.gif") {
msg="right";
}
window.alert("this is image " + i + " and it points to the " + msg);
}

The .substring() method slices off the unneeded part of the url, leaving the part after (+1) the final slash (lastIndexOf()).

JS counts from zero, btw...(document.images[0]) ;)

BDT
03-23-2003, 02:23 PM
I shoulda thought of that. I had a similar idea and tried a conditional based on the entire path, but it didn't work so I moved in another direction.

Your solution hits the nail on the head.

Even thought I know that images are numbered starting with sero, I had my graphics named 1 thru 9. To reduce confusion, I have renamed them 0 thru 8.

thanks again.