Image swapping

[murphyz]

Hello,

I have some javascript for use within a php page.

The script is supposed to display one of two images (in two instance) depending on certain criteria.

1st) If the user is logged out, display an image called 'icon_mini_login.gif', and if they are logged in, show 'icon_mini_login.gif'.

2nd) When logged in, if the user has no new private messages, show 'icon_mini_message.gif', and if they do have new messages show 'icon_mini_messages.gif.

The script is from another template where it works, and the only changes that have been made are with the image names. When I run the script, the page itself says there is an error (via status bar message) and that error is
Char: 2
'Error. 'document.images.navigate0' is null or not an object

The code is as follows, and I was hoping someone may be able to spot a glaringly obvious error I have missed.

<script language="JavaScript" type="text/javascript">
<!--
//declaring variables and arrays
var privmsg_image_path = "{PRIVMSG_IMG}", current_lang = "";

//extract the current language string
current_lang = privmsg_image_path.match(/lang_[a-z]*/);
if (current_lang != ""){

<!-- BEGIN switch_user_logged_out -->

//assign image paths
document.images["navigate0"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_faq.gif"; //faq
document.images["navigate1"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_login.gif"; //login/logout
document.images["navigate2"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_search.gif"; //search
document.images["navigate3"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_search.gif"; //profile
document.images["navigate4"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_members.gif"; //memberlist
document.images["navigate5"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_groups.gif"; //usergroups
document.images["navigate6"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_message.gif"; //private messages/new private messages
document.images["navigate7"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_register.gif"; //register

<!-- END switch_user_logged_out -->

<!-- BEGIN switch_user_logged_in -->

//parse strings
loginlogout = "{U_LOGIN_LOGOUT}";
stringIndex = loginlogout.indexOf("amp");
loginlogout2 = loginlogout.slice(0,stringIndex);
loginlogout2 += loginlogout.slice(stringIndex+4);

//assign image paths
document.images["navigate0"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_faq.gif"; //faq
document.images["navigate1"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_logout.gif"; //login/logout
document.images["navigate2"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_search.gif"; //search
document.images["navigate3"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_profile.gif"; //profile
document.images["navigate4"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_members.gif"; //memberlist
document.images["navigate5"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_groups.gif"; //usergroups
document.images["navigate6"].src = "{PRIVMSG_IMG}"; //private messages/new private messages
document.images["navigate7"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_register.gif"; //register

<!-- END switch_user_logged_in -->

}

//-->
</script>

I have changed the name of all images involved to match that of the code.
Also, this part of the code:
document.images["navigate6"].src = "{PRIVMSG_IMG}";
takes the information from a .cfg file that basically just names the two images involved.

Thanks in advance if anyone can help, or suggest an easier way to do this.

Mxx

[Willy Duitt]

Seems to me you changed more than the image names.

If you are using the document.images array
you can not add a navigate ID to it.

eg:
document.images["navigate0"].src
= "templates/cowandchicken/images/" + current_lang
+ "/icon_mini_faq.gif";

Proper use of the document.images array:
document.images[0].src
= "templates/cowandchicken/images/" + current_lang
+ "/icon_mini_faq.gif";

.....Willy

[adios]

Perfectly OK (and sensible) to reference a host array object by a hash - but the document.images hashtable is keyed by name - not id.

<img......name="navigate0">

Just guessing that's your problem. Otherwise, paste in a more complete example (HTML!).

[murphyz]

Thanks for the responses, I am still having no luck with this.

Getting rid of the ID tags doesn't seem to have gotten rid of the the error that was appearing in the status.

The javascript mentioned above is now as follows, along with an html table and the rest of the code I am having issues with.

<script language="JavaScript" type="text/javascript">
<!--
//declaring variables and arrays
var privmsg_image_path = "{PRIVMSG_IMG}", current_lang = "";

//extract the current language string
current_lang = privmsg_image_path.match(/lang_[a-z]*/);
if (current_lang != ""){

<!-- BEGIN switch_user_logged_out -->

//assign image paths
document.images["image0"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_faq.gif"; //faq
document.images["image1"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_login.gif"; //login/logout
document.images["image2"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_search.gif"; //search
document.images["image3"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_search.gif"; //profile
document.images["image4"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_members.gif"; //memberlist
document.images["image5"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_groups.gif"; //usergroups
document.images["image6"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_message.gif"; //private messages/new private messages
document.images["image7"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_register.gif"; //register

<!-- END switch_user_logged_out -->

<!-- BEGIN switch_user_logged_in -->

//parse strings
loginlogout = "{U_LOGIN_LOGOUT}";
stringIndex = loginlogout.indexOf("amp");
loginlogout2 = loginlogout.slice(0,stringIndex);
loginlogout2 += loginlogout.slice(stringIndex+4);

//assign image paths
document.images["image0"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_faq.gif"; //faq
document.images["image1"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_logout.gif"; //login/logout
document.images["image2"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_search.gif"; //search
document.images["image3"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_profile.gif"; //profile
document.images["image4"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_members.gif"; //memberlist
document.images["image5"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_groups.gif"; //usergroups
document.images["image6"].src = "{PRIVMSG_IMG}"; //private messages/new private messages
document.images["image7"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_register.gif"; //register

<!-- END switch_user_logged_in -->

}

//-->
</script><table width="72%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td align="right"><img src="templates/cowandchicken/images/left-grass.gif" width="39" height="50"></td>
<td background="templates/cowandchicken/images/middle-grass.gif"> <div align="center"><a href="{U_FAQ}" name="navigateurl0" class="mainmenu"><img src="templates/cowandchicken/images/icon_mini_faq.gif" alt="{L_FAQ}" name="image0" width="60" height="50" hspace="3" border="0" /></a></div></td>
<td background="templates/cowandchicken/images/middle-grass.gif"><div align="center"><span class="mainmenu"><a href="{U_SEARCH}" name="navigateurl2" class="mainmenu"><img src="templates/cowandchicken/images/icon_mini_search.gif" alt="{L_SEARCH}" name="image2" width="60" height="50" hspace="3" border="0" /></a></span></div></td>
<td background="templates/cowandchicken/images/middle-grass.gif"><div align="center"><span class="mainmenu"><a href="{U_MEMBERLIST}" name="navigateurl4" class="mainmenu"><img src="templates/cowandchicken/images/icon_mini_members.gif" alt="{L_MEMBERLIST}" name="image4" width="60" height="50" hspace="3" border="0" /></a></span></div></td>
<td background="templates/cowandchicken/images/middle-grass.gif"><div align="center"><span class="mainmenu"><a href="{U_GROUP_CP}" name="navigateurl5" class="mainmenu"><img src="templates/cowandchicken/images/icon_mini_groups.gif" alt="{L_USERGROUPS}" name="image5" width="60" height="50" hspace="3" border="0" /></a></span></div></td>
<td background="templates/cowandchicken/images/middle-grass.gif"><div align="center"><span class="mainmenu">
<!-- BEGIN switch_user_logged_out -->
_<a href="{U_REGISTER}" name="navigateurl7" class="mainmenu"><img src="templates/cowandchicken/images/icon_mini_register.gif" alt="{L_REGISTER}" name="image7" width="60" height="50" hspace="3" border="0" align="absmiddle" /></a></span>
<!-- END switch_user_logged_out -->
</div></td>
<td background="templates/cowandchicken/images/middle-grass.gif"><div align="center"><a href="{U_PROFILE}" name="navigateurl3" class="mainmenu"><img src="templates/cowandchicken/images/icon_mini_profile.gif" alt="{L_PROFILE}" name="image3" width="60" height="50" hspace="3" border="0" /></a></div></td>
<td background="templates/cowandchicken/images/middle-grass.gif"><div align="center"><a href="{U_PRIVATEMSGS}" name="navigateurl6" class="mainmenu"><img src="templates/cowandchicken/images/lang_english/icon_mini_message.gif" alt="{PRIVATE_MESSAGE_INFO}" name="image6" width="60" height="50" border="0" align="absbottom" /></a></div></td>
<td background="templates/cowandchicken/images/middle-grass.gif"><div align="center"><a href="{U_LOGIN_LOGOUT}" name="navigateurl1" class="mainmenu"><img src="templates/cowandchicken/images/icon_mini_logout.gif" alt="{L_LOGIN_LOGOUT}" name="image1" width="60" height="50" hspace="3" border="0" /></a></div></td>
<td align="left"><img src="templates/cowandchicken/images/right-grass.gif" width="39" height="50"></td>
</tr>
</table>

Sorry for the hugeness, and thanks in advance for any light you can shed.

Regards

Mxx

[murphyz]

Still no success with this :o

A quick query though, does the image name have to be the same as the document.images name in the array?

for eacmple, can it read

document.images["image0"].src

and then

name="0"

or does it have to be

name="image0" to match letter for letter the document.images string?

Cheers

Mxx

[adios]

LETTER F:eek:R LETTER!

This: <img name="image0".......>

....causes two new properties to be created:

document.image0

...and

document.images.image0.

Both contain references (JS 'pointer') to the actual Image object, stored in document.images[n], where n is the (HTML) source code order of the <img> tag relative to other <img> tags in the document. Exact matches are mandatory, these are identifiers.

Why are you setting the src twice, one right after the other?

[murphyz]

you mean the two sets of document.images.src twice?

This just indicates which set to be used on screen depending if the user is logged in or out of the site. When logged out of the site it needs to show a 'login' image, and when logged in this image needs to be the 'logout' image.

Also, when logged in, it needs to show a 'messages' or a 'new messages' image depending on if the user has new messages.

Cheers

Mxx

[adios]

Hmm...also, just noticed you've got HTML commenting inside a script block; that's syntactically improper, except as a 'hide this' wrapper. Use JS single-line (//) or multi-line (/*....*/) comments.

[adios]

I must be missing something.

You've got this:

document.images["image0"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_faq.gif";

Then you've got this:

document.images["image0"].src = "templates/cowandchicken/images/" + current_lang + "/icon_mini_faq.gif";

...which does the same thing. And you've compounded the process several times. Why?

You also appear to be calling the script before the HTML which creates the objects. Could you post/link to the entire page? Probably something simple, but it's hard to deal with things like this in a fragmentary manner.

[murphyz]

The <!-- BEGIN switch_user_logged_out --> and <!-- BEGIN switch_user_logged_in --> (and the relevant 'end' instructions) mean that those lines only appear once. The first set appear when the user is logged out, and the second set appear when the user is logged in. Theoretically I can get rid of most lines other than the ones that deal with private messages and logging in and out and just have them on the page as they always remain static.

I see you are saying the javascript needs to be after the html - which I did not realise. I shall try swapping this when I get home and see if it works. Chances are it is that simple.

Cheers

Mxx

[murphyz]

Adios, thank you.

I put the script after the html, then stripped it down to the basics concentrating only on the two images that I needed changing and it worked like a charm.

Cheers for the tips. Yay...now I can sleep :)

Mxx