Registered: Jul 2001
Location: Norfolk, VA
Posts: 4691

Hey all...

This afternoon I set about to learn me JavaScript. This is not so difficult as it seems because I have learned how to do scripting by trial-and-error playing with the simple scripting language on my TI-85 in junior high and high school. So I am familiar with logical operators, if/then/else statements, declaring variables, all that stuff they teach in intro programming courses.

What I DON'T know is the specific syntax of JavaScript. So, my first question is, can anyone recommend a good guide for this?

And now on to my problem...
On my page-in-progress (not on the web yet...as soon as I get my reply back from the hosting service it will be up), I want to have an image and the text beneath it change when you move the mouse over certain links. I figured out the mouseover fine by examining existing scripts: The onMouseover command passes several attributes back to the script, which then chooses the appropriate image based on the attributes given to it, and then changes the image with a "document" function. I still don't know the exact syntax of the document functions...like document.wite and all that other stuff.

This is giving me a hard time right now. I got document.write to write what I want it to based on which link you move the mouse over...but it does this by wiping the entire page clean and writing ONLY that string to the screen. How do I control where the text will appear?

Also, on the TI I got used to using matrices to store large amounts of repetetive, related data. I'm looking at using arrays but they are not the same; they are more like ordered lists, it seems. I would like to have an array to store all the values for the image and text changes associate with a specific set of links..for example...


var movr= new Array(8);
movr[0]="images/pic-1.jpg";
movr[1]="This is picture #1";
movr[2]="images/pic-2.jpg";
movr[3]="This is picture #2";
movr[4]="images/pic-3.jpg";
movr[5]="This is picture #3";
movr[6]="images/pic-4.jpg";
movr[7]="This is picture #4";


Then I figure that the script which changes the image and text would just have to use the attributes given it by the onMouseover and onMouseout commnds:

<a href="1.html" onMouseover="changescript(2,3)" onMouseout="changescript(0,1)">
<a href="2.html" onMouseover="changescript(4,5)" onMouseout="changescript(0,1)">
<a href="3.html" onMouseover="changescript(6,7)" onMouseout="changescript(0,1)">


Then, the script itself would use, for example, movr[2] as the new image, and movr[3] as the new text.

However I don't think this will work because preloading the images seems to want a name and a source for each image...so I'm confused again...I guess knowing the syntax would help me but I hope someone here can as well...thanks...

Report this post to a moderator | IP: Logged

Registered: Jul 2000
Location: Montreal
Posts: 2992

http://simplythebest.net/info/dhtml_scripts.html

__________________

[Ignore Sig]

"Please pardon my levity, I don't see how to take death seriously. It seems absurd." R A Wilson (R.I.P)

Report this post to a moderator | IP: Logged

Registered: Jul 2001
Location: Norfolk, VA
Posts: 4691

Eh...yeah...ready-made scripts are cool and all...but not so much if you're looking to learn it yrself...

Report this post to a moderator | IP: Logged

Registered: Jul 2000
Location: Minneapolis, MN
Posts: 10229

heres a quick example of changing text with a link:

code:

<A HREF="java script:void(0)" 
	onMOUSEOVER="document.getElementById('mytext').innerHTML='changed text'"
	onMOUSEOUT="document.getElementById('mytext').innerHTML='back to normal'">link</A>
<P><SPAN ID="mytext">this is my text</SPAN>

Report this post to a moderator | IP: Logged

Registered: Jul 2000
Location: Minneapolis, MN
Posts: 10229

as far as your other question, simply doing this should work fine:

code:

var movr= new Array(8);
movr[0]=new Image();
movr[0].src="images/pic-1.jpg";
movr[1]="This is picture #1";
movr[2]=new Image();
movr[2].src="images/pic-2.jpg";
movr[3]="This is picture #2";
... etc

Report this post to a moderator | IP: Logged

Registered: Oct 2000
Location:
Posts: 9331

Something you might find useful.
http://www.intranetjournal.com/faq/js-faq.shtml

Report this post to a moderator | IP: Logged