Image name comparison???

[Punkcrib]

I am a Java guy, so I get javascript, but not completely.

I have a menu made of image "buttons", and I have it set so onMouseOver changes the image to a "highlighted" one (home.gif becomes home_on.gif), and viseversa onMouseOut.

I also implemented a similar function for onClick, to temperarily hold the image as "home_on.gif" when clicked. The new image stays on until another menu item is clicked, then that new menu item is changed, and any others that were "highlighted" are replaced to the original. (Keep the current page "highlighted").

I am having problems when I click a menu item, when I mouseOut, the image reverts to the original. So I want to know what is the correct syntax for comparing two images (to check if the "onClick" image has been activated, and if it has the onMouseOut event will not change the image).

I am using document.getElementById(''+name+'').src = "+image+"; to swap the images.

This is what I tried:
function swapover(this1, that1, other1){
if (''+that1+'' != document.getElementById(''+this1'').src)
document.getElementById(''+this1+'').src=''+that1+'';
}
</script>

I know this is wrong, but that is what I am asking. What is the correct syntax for doing this?

Thanks!

[david_kw]

I've never seen the code that adds an empty string '' before and after each variable so I'm not sure why that is but there is a small syntax error that may (or may not) be your problem


function swapover(this1, that1, other1){
if (''+that1+'' != document.getElementById(''+this1+'').src)
document.getElementById(''+this1+'').src=''+that1+'';
}


You are missing the + that is highlighted in red.

david_kw

[Punkcrib]

Yea that was just a typo in the post. Thanks though. To be honest I got that syntax off the web, so I'm not even sure why the plus sign or the '' was there, but it was so I just used it the same. I will probably remove it in my code, but still, any ideas on how to compare filenames? Do I need to use a String comparison, and if so how would I do that in JS?

Thanks

[david_kw]

A string comparison is just == for the most part. Can you post a link to a page with the problem you are seeing? I don't see anything obviously wrong with the code you posted other than the + sign. The other possibility is a problem with the parameters being passed in.

david_kw

[Punkcrib]

Ok here ya go. It isnt the whole page by any means, but just a few snippets to show the problem.

http://eclipse.nicholls.edu/~mmeyers/sue/menu.html

I didn't preload the images in this demo so it might be a little slow. But you'll get the idea.

The top menu set is calling both onMouseOver/Out and OnClick. The 2nd set is only calling the onClick. The third and forth sets are described below.

As you can see in the 1st set, the onMouseOver/Out is working fine. But when you click on one of them, it should stay beige, but it doesnt. On the second set, you can see that the onClick (by itself) is working as it should (when clicked, it stays beige until the other is clicked). But together (in the 1st), they dont work. I just don't get it.

The 3rd set calls both the onMouseOver/Out, and the onClick, however i've referenced the onClick to the 1st menu set. You'll notice if you click on one of the 3rd menu items, it will change the corresponding item in the 1st set. But then if you go and mouseover the changed image in the 1st set, when you mouseout it changed back to the original. It is supposed to stay until the other is clicked. So my guess is that it is something with the onMouseOut function (which is the same as the onMouseOver function, just passing different images).

In the 4th set you can see that the onMouseOver function (swapover) is not functioning correctly. I have the base image set to be 'home_on1.gif' and 'about_on1.gif', and then when you rollover, it should check to see if those are the current images, and if they are (which they are), then it should not do anything. But instead it changes the images to the rollover image anyway.


Like I said, I am stumped. Thanks for taking a look at it.

[david_kw]

I'm not sure I understand all the issues here so let's start with swapover


function swapover(this1,that1,other1){
if (document.getElementById(this1).src != other1)
{ document.getElementById(this1).src = that1;}
}


The problem here is that when you set the src property of an image to a relative URL it will then expand it to the full URL. So when you read it back the values will no longer compare.

In otherwords,

img.src = 'graphic.jpg';
alert(img.src); // says http://localhost/images/graphic.jpg

I believe that is why your compare is failing. One way to make it work in most cases is just to check to see if the src property ends in the name (will fail if there is a graphic with the same name in a different directory) like this


function swapover(this1,that1,other1){
var re = RegExp("\/" + other1 + "$");
if (!re.test(document.getElementById(this1).src)) {
{ document.getElementById(this1).src = that1;}
}


Hopefully that helps.

david_kw

[Punkcrib]

Ahhh. I never thought of that.


However, I tried the method you posted, and my rollovers no longer functioned. Is there a typo or something? I'm not too familiar with some of those functions you call in there (like RegExp or the ''$'', so I don't know where the problem could be.

But since you said the relative URL could be the problem, I added the full path to my parameter passes, and sure enough the function I was using worked fine. But the only problem with doing this is obviously having to type out those long paths, which really clutters up the code.

So is there another way to do it, or is your way supposed to work as is? Should I need to change something in it?

Thanks again!

EDIT:

Ok, well I noticed there was an extra '{' in your code, so I removed it, and now it WORKS! (I think...)
Thanks alot david_kw! You're a lifesaver. I'm going to throw the function into my working site and see how it holds up!

Thanks again!

[david_kw]

Welcome. Sorry about the typo. :)

As for RegExp that stands for regular expression. I wrote it that way since it is dynamically created. You might have seen as something like

/term$/

which means test a string to see if it ends in "term" (the $ means at the end). It is handy for more complex string compares and such.

david_kw