using document.title to change an image?

[jamas]

hello. I'm trying to use the information in the document.title to change a navigation image. For example if the word "Research" is in the title, I want "bluetabs_01.gif" to change to "greentabs_01.gif". If the word Information is in the title, a different image would change, and so on, for a total of 8 different title options. I really have no idea how to properly use javascript, so this is probably messy. Any help is appreciated.

//get the title of the page
var title = document.title;
if (title == 'Research'){
//display the green selected container
document.bluetabs_01.src='greentabs_01.gif';
}else{
(title == 'Information'){
document.bluetabs_02.src='greentabs_02.gif';
}

[glenngv]

If the title and the image names don't make a "pattern", then you really have to do those ifs.

[brothercake]

You could always put the image objects and their containers in a matrix index by name, with the names corresponding to the titles:

var imgs = [];
imgs["Research"] = ["bluetabs_01",new Image];
imgs["Research"][1].src = "greentabs_01.gif";
imgs["Information"] = ["bluetabs_02",new Image];
imgs["Information"][1].src = "greentabs_02.gif";

Then you can go like this:

var title = document.title;
document.images[imgs[title][0]].src = imgs[title][1].src;

But really it would be easier if you established a naming convention like glenngv suggested, so that "Research" was also contained in the name of the image and its container, or something.

[jamas]

thanks for the replies. If I rename my images, that means I don't the matrix index?

Either way, I'm just happy that it seems to be something that can work with a little finessing.

[jamas]

oops, ran across a problem. what if my titles end up having more than one word in them? Say "Research Conferences" or "Special Research". As long as they key word "Research" is in there, I want the same image to swap. would I use indexOf somehow?

thanks again.

[glenngv]

You can't loop using that "hash array" (matrix index)
So I used the "index-based" array.

var imgs = new Array();

imgs[0] = new Array();
imgs[0][0] = "Research";
imgs[0][1] = "bluetabs_01";
imgs[0][2] = "greentabs_01.gif";

imgs[1] = new Array();
imgs[1][0] = "Information"
imgs[1][1] = "bluetabs_02";
imgs[1][2] = "greentabs_02.gif";

Then you can go like this:

var title = document.title;
for (var i=0;i<imgs.length;i++){
if (title.indexOf(imgs[i][0])!=-1){
document.images[imgs[i][1]].src = imgs[i][2];
break;
}
}

[brothercake]

Originally posted by glenngv
You can't loop using that "hash array" (matrix index)
Yeah you can:

for(var i in imgs) { ... }

But your way's definitely easier for indexing by substring.

[adios]

This might be a foolish question, but...as long as you're coding in the title of the document, why not just insert the appropriate image name for that page as well?

[glenngv]

Originally posted by brothercake
Yeah you can:

for(var i in imgs) { ... }

But your way's definitely easier for indexing by substring.

Yeah I tried that but it said "Object doesn't support this action"

for (item in imgs) alert(item + "=" + imgs)

And I found out just now that the error occurred because I didn't use the keyword [i]var. The error only happens in IE5.5. Or is it true for IE6 as well? Doesn't happen in Moz

[adios]

Odd.

IE:

alert(item) // [object]
alert(typeof item) // 'string'
alert(item.constructor) // function String {....[constructor]
alert(item.valueOf()) // [object]

item is not on the JScript reserved words list; it is a method of a large number of objects (not the window afaik). Not sure what all this means.

[glenngv]

ahh, I didn't know that.

[whammy]

I guess it means we're learning stuff. :p

Man, it's amazing what you can accomplish and how deep you can get into a language, even like javascript.

I'm amazed. :p

Anyway, regarding using the "title" of the page, I'd probably prefer using "window.location" instead. Then you can also use querystring values to further modify your display. Just an idea, but I don't really see a problem using either one. I think perhaps the current approach is a bit too complicated for something that should be simple - but I could be wrong.

[whammy]

Hi Glenn! :)

P.S. I always use "var" to declare local or global variables in JavaScript, just because from experience I've learned it's importance. It's just like using "Option Explicit" in VBScript, really, and dimensioning variables.

That way there's no question whether the variable is local or global. You just know.

[glenngv]

You learn things everyday :)

I always use the var keyword too. It was just when testing that for-in loop that I wanted to post here as a solution to this thread, I left it out and didn't fixed it right away and just proceeded to another easier solution.

[whammy]

Amen.

[brothercake]

The iterator doesn't always need to be declared - if you've already declared "i" within that scope, declaring it again will produce a strict warning.

As for item, since IE puts every object with a name or ID in the global scope, I wouldn't be surprised if it reserves item as a property of window

window.item(0)

being equivalent to the first element with a name or ID.

That's justa guess though.