writing different images from external .js file

[jockm]

I am in process of replacing a frames navbar with an external javascript file (navbar.js) consisting of anchors and text links enclosed in document.write() statements.

So far I have succeeded in creating a list of links which are displayed on the page and work okay.

Now I want to pass an image to a function located in that navbar.js external file and have that passed image written out to (displazed on) the page with a document.write() statement.

I figure I should easily be able to do with with an OnLoad event handler (the image I want to pass is different for the different pages that call the navbar.js file) but I am at a bit of a loss exactly how to do it, and would appreciate suggestions.

Thanks!

 

[starway]

Something like this?

function writeImage(imageName, w, h, descr) {
document.write(&quot;<image src='images/&quot; + imageName + &quot;' width=&quot; + w + &quot; height=&quot; + h + &quot; border=0 alt='&quot; + descr + &quot;'>&quot;
}

Call is as
writeImage('something.jpg', 60, 40, txt[2]);

where txt[] is an array of ALT descriptions.
You can create an array for image names also, or multidimentional array for images with all attributes.
You can also avoid it by writing an ALT directly in the function call:
writeImage('small.jpg', 600,400, 'image description');

 

[jockm]

Thanks Starway

I will go away and try it out. Those single and double quotes together make it look kinda hairy.

Also, the function call is in the main pages, not in the navbar.js file. Shouldnt the call have quotes not apostrophes?

Or doesnt it matter?

jockm

 

[starway]

It doesn't matter where the function reside or being called from.
The reason for multiple nested quotes is that you have to keep the structure where quotes of the same type (single or double) are not intersected and are nested one inside another:

event_handler=&quot;funct_name('arg1', ... 'argN')&quot;

The same is for document.write:

document.write(&quot;string1&quot; + ... + &quot;stringN&quot
where &quot;stringN&quot; should contain the same quotes structure as above.

 

[jockm]

Well, the code you gave does not seem to work as it should, rather the calling text is written out on the page.

I think the function needs to have a starting image, say &quot;title1.gif&quot;, when it first loads. Then, whenever it is called it brings in whatever image (say, &quot;title2.gif&quot;, or &quot;title3.gif&quot; etc is passed it.

The various title images are located in the images/ directory. Each page has its particular title image, so when the page loads, it should display it up in the top.js, external javascript file.

Lets, for a moment, go back to square 1. The following code works fine in my external javascript file, top.js:

document write('src=&quot;images/title1.gif&quot; width=&quot;385&quot; height=&quot;85>')

What I want, however, is for title.gif to be replaceed with a variable image which I pass to this external top.js file when the page loads.

I'd appreciate further suggestiions. Thanks!

jockm

 

[starway]

>>What I want, however, is for title.gif to be replaceed with a variable image which I pass to this external top.js file when the page loads.
This is completely different story.

function writeImage()
{
imageName = document.location.search;
imageName = imageName.substring(5, imageName.length);

document.write(&quot;<image src='images/&quot; + imageName + &quot;'>&quot;
}

You have to pass the parameter like this:
<a href=&quot;[tt]other_page.html?img=title.gif&quot;[/tt]>other page</a>

 

[jockm]

Thank you starway. I see that part of my problem with javascript is being able to state my problems!

Anyway, I am glad I finally did (or hope I did). I will now go away (I have to work from internet cafes) and try it and see, however I have 2 queeries about your code:

(1) what is the meaning of the substring (5
Where does that 5 come from?

(2) the calling of the function seems to be from a link, however I have to have it called from the onLoading of the actual page, as this top.js is the banner head of the page, and needs its image up there immediately. It cant wait for anybody to click anything.

Or did I misunderstand?

jockm

 

[starway]

ok, the answers are:

1) There's a way to pass a parameter/value via URL string. The general syntax is this:
sitename/page.html?varialble=value

and this:
substring(5, imageName.length)
is used to extract the value of [tt]img[/tt] variable, because [tt]?img=[/tt] is 5 chars exactly.
If you want to change the var name, don't forget to change &quot;5&quot; to nubmer of a new var name chars + 2 (for &quot;?&quot; and &quot;=&quot; chars).

2) I just gave an example how you can activate an action. You have to do it using URL string - that's the way to pass the values between the pages.

You have to pass the image name via URL somehow anyway (so some function of the new loading page can read it and load suitable image).
This is an example how to do it from a page that is prior to the current one.

<a href=&quot;other_page.html?img=title.gif&quot;>other page</a>

And the loading page has to have the following:

<html>
<head>
<script>
function writeImage()
{
imageName = document.location.search;
imageName = imageName.substring(5, imageName.length);
document.write(&quot;<image src='images/&quot; + imageName + &quot;'>&quot;
}
</script>
</head>
<body>
. . .
<script>writeImage();</script>
. . .
</body></html>

Place it where you want to show an image. Just imagine that you have an ordinary <img> tag, and replace it with that string above.
The function will be activated when browser will render page's body, so upon it's completion an image will be loaded as well.

I hope this is what you wanted finally.

 

[jockm]

Thanks very much for the comprehensive explanation. I'll copy it and study it.

I went home and realised when I got there that I didnt know how to call the function (you have explained it in your latest post). So I sat and thought about the problem, and it occurred to me suddenly &quot;Why do I need javascript at all? Since each page has its own unique image, I should be able to simply declare the image in the page and position it up in the top navbar with a CSS ID. An absolute position command shouldnt care what else my top.js file is writing up at the top of the window, it will place the image exactly where I want it.&quot;

And, it worked. Well, it worked for Explorer 5 for Mac. I havent been able to see if it works for p.c. versions, and it definitely does not work for Netscape 4.7. But at least I have got it working more or less. Now I just have to test for browser and figure out how to make Netscape position it, since it seems to ignore my absolute position command altogether.

So if you have a suggestion for that, I'd be most grateful, and thanks again.

jock

 

[starway]

>>So I sat and thought about the problem, and it occurred to me suddenly &quot;Why do I need javascript at all?
That's a good question. Everybody should think about it before starting doing something.

What do you need CSS positioning for? Why not just to place an image? Don't look for additional troubles.
Absolute positioning works good in all browsers - of course, if you follow the rules. That's all I can tell.

<div id=&quot;topimage&quot; style=&quot;position:absolute; left:__px; top:__px; width:__px; height:__px; z-index:0; visibility: visible;&quot;>
<img src=&quot;title.gif&quot; border=&quot;0&quot; width=&quot;&quot; height=&quot;&quot; alt=&quot;&quot;>
</div>

Make sure that [tt]width:[/tt] and [tt]height:[/tt] of style definition are the same as image dimentions.
This example works in all browsers.

 

[jockm]

Starway, thanks

>>What do you need CSS positioning for? Why not just to place an image? Don't look for additional troubles.
Absolute positioning works good in all browsers - of course, if you follow the rules.<<

Well, this is part of the problem of teaching oneself something like css and js. I didnt know that absolute positiong WASNT css! So by putting the same thing in an external .css file and assigning it an ID, have I gone beyond the capabilities of some browsers?

Anyway, I go and try your statement inline and see what happens with Netscape 4.7.

Something else I discovered to my consternation in trying to eliminate frames in favour of external javascript files is that Netscape 4.7 interprets the <BASE> command different to Explorer. When I write <BASE ../index> in my pages that live a folder down, Explorer quite nicely finds all the images up there in the image/ folder. But not Netscape 4.7.

Discouraging really. I seem to have created a site that works perfectly nicely with Explorer 5 for the Mac. So far none of the other browsers I have tried (admittedly all Mac ones since I dont have access at the moment to a PC) produce anything like what I want.

Fallout of the browser wars of the last decade

jock