Gossamer Forum
Home : General : Internet Technologies :

How do I associate a javascript file(.js) with javascript contained in an image tag?

Quote Reply
How do I associate a javascript file(.js) with javascript contained in an image tag?
Hello,

I need to know how to load 3 different javascript files
(.js) on a page, and then I need to know how to, in a
"simple way", to associate those .js files with some
javascript I have in 3 different image tags on my page.

One of the exact image tags with the javascript and an
example message to be displayed when the user does a
mouseover is,

Code:
<img src="images/tip.gif" width="148" height="20" onmouseover="return escape(' The message that is displayed goes where this text your reading is. If you want quotation marks you have to do the following \'\'. Actually you need those backslashes if you want to type a word like... It\'s ')">


The Author who hasn't responded to any of my requests,
suggested on his page that, the <script> tag below

Code:
<script language="JavaScript" type="text/javascript" src="tip_tooltip.js"></script>


be placed just before the closing </body> tag.

I would like to Thank You Vey Much for any assistance you could provide.
"Helping others is life's best reward !"

With Regards,
Chris Perron
Computer Commandos TV Show
Website:
Computer Commandos TV Show
E-Mail: host@computercommandos.com
Quote Reply
Re: [TVHostChris] How do I associate a javascript file(.js) with javascript contained in an image tag? In reply to
Quote:
The Author who hasn't responded to any of my requests,
suggested on his page that

That's correct - just include the three files as the author suggested - although I would have put the tags in the <head>

Then just call the functions as normal - you don't have to "associate" the files with your functions.
Quote Reply
Re: [Paul] How do I associate a javascript file(.js) with javascript contained in an image tag? In reply to
Ok Paul ! Sorry about that.
I'm probably screwing up again by replying to you in my original question link area. I guess you call it a Thread ! Is that right?

Ya know I was wondering why I saw buttons that had " Thread" on them. I'm surprised they don't have a FAQ's area somewhere around here. Anyway I do apologize and will ask questions before I meander outside this area again.

Oh... Bye the way ! was able to get what I'm trying to do down to a succint format.
Paul... that "beezly" stuff , that I had put inside the image tag example! I had tried that but it didn't work. I had it in my HTML editor and forgot to remove it before I copied and pasted it in the Post but, buy that time I was so tired I'm surprised I didn't make more mistakes.
Paul, for the first time since I've been on the Net ('94) I joined this BB as well as 5 other Javascript oriented BB's. I did this because it's the first time I had not been able to figure something out on my own in a relatively short period of time.
And to top it off ! It's taken me 3 days of typing to figure out how to word what I need.
So... I'll tell you what ! I've been avoiding mentioning where I got the script from... even though it's free ! But I'm gonna mention it know so you can go get it and maybe then you'll understand.
You were right when you mentioned "beezly" being inside the .js file.
I put it there ! The "beezly" was originally "wz" in the script.

Now for the story ! I got the script from http://www.walterzorn.com/tooltip/tooltip_e.htm .

I e-mailed Walter Zorn with this issue and "no reply". I've e-mailed him 3 times with "no reply".

So anyway, I liked the script and figured I could modify/customize it. The script has got a Copyright notice on it but, the Copyright say that the script "can be modified so long as the Copyright stay's intact". That's cool ! I got no problem with that.

Now... I'm going to type just the code of concern again with out all the other code that was never part of the original coding on my page so you know "exactly" how it layed out on the page... ok ! I think then you'll be able to figure this out.

------- Begin ------------------

1.) Description of Code
2.) Prelude to Question
3.) Question

1. ) DESCRIPTION: (I'm giving you just the code on the page I'm concerned with)

First, I made a page and it works perfectly well with only one .js file loading and associated with all designated images.

The page lay out looks like the following:

<HTML>
<HEAD>
<TITLE>Page Name</TITLE>

<HEAD>
<BODY>

<img src="images/tip1_image.gif" width="148" height="20" onmouseover="return escape('TEXT MESSAGE DISPLAYED FROM HERE WHEN MOUSEOVER OCCURS')">

<img src="images/tip2_image.gif" width="118" height="36" onmouseover="return escape('TEXT MESSAGE DISPLAYED FROM HERE WHEN MOUSEOVER OCCURS')">

<img src="images/tip3_image.gif" width="103" height="168" onmouseover="return escape('TEXT MESSAGE DISPLAYED FROM HERE WHEN MOUSEOVER OCCURS')">

<!----- Just above closing Body tag---->
<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>
</BODY>
</HTML>

All those images above use that one wz_tooltips.js file.
All the mouseover displays "are the same" width and color.

2.) PRELUDE:

I intially changed the name of the wz_tooltips.js file to tip1_tooltips.js and tested it and "It didn;t work!" so... I opened the .js file and found every reference to "wz" and replaced the reference to "wz" with "tip1" and... low and behold. It worked !
I then figured out how to change the width and color in the mouseover tooltips display for the image mouseovers and... I So...then I said to myself "hay, if I can rename it and I can change the width and color. Then I should be able to copy the .js file several times. Then open it. Change the reference to it so it corresponds to my image's names. Then I'll be good to rock and roll on changing the widths and colors for a bunch of images on a single page. Instead of having them all look the same.

Now... base on this guys instructions on his page. The background colors, widths etcetera "can be changed" using
<a href="index.htm" onmouseover="this.T_WIDTH=200;this.T_FONTCOLOR='#003399';return escape('Mouse over messages go in here for display when image is mousedover')"> Homepage</a>

So I could actually change the width and colors now using the commands that are listed at the site but... Here is why I need to be able to use multiple .js files and have them all load on the same page.
I figured out that I could draft full HTML in an <IMG> tag so that's what I did. I drafted inside onre of those image tags above a "whole Table" with columns and rows and <font>s with different colors and sizes and images and it's quite extensive and it's all on one runon line. I had to draft the HTML code outside the tag and then copy it into the tag and hit my "back" key until it was all one runon line for it to work.

I'd have to figure out how to incorporate all that "this.T_WIDTH=200;" crap into it. Noooo Thank You !, LOL. It was big enough b**ch just to figure out how to get what I got to display.

So...hopefully you can understand whay I want to use multiple ;js files that are assoicated to their own image mouseover.

tip1_image.gif associated with tip1_tooltips.js and
tip2_image.gif associated with tip2_tooltips.js and
tip3_image.gif associated with tip3_tooltips.js all on the same page.

Ok ! I'm done with the Prelude to the Question, LOL! That was some typing.
I only type at about 15-20 a minute including typos and redrafts. No lie!

3.) QUESTION:

Ok... Thank God the actual question will be short.

How would each single .js file be associated with it's corresponding image?
and please keep in mind that I'm not a programmer so please be include an "example" please.

That's pretty much it... I guess that's enough huh?, lol

"Thanks" in advance Paul ! "You the Man ! "

I'll be looking forward either to your reply or an a*s chewing Frown for typing such a long message or both but either way I'll be looking forward to it. Wink
"Helping others is life's best reward !"

With Regards,
Chris Perron
Computer Commandos TV Show
Website:
Computer Commandos TV Show
E-Mail: host@computercommandos.com