How to make something change when onmouseover a different thing?

[Emeralds]

Um hello everyone. I'm Emeralds and I'm still really new to Javascript, but while I was writing a quick script for something I'm working on, I encountered a problem and I'm not sure at all of what it is and how to fix it.

My script is in an external javascript file in a folder called js. I'm basically trying to get a title, tagline, and image to change (into different things) when the mouse is hovered over a variety of different elements.

For example, when the mouse is hovered over the first thumbnail, then the title, picture, and tagline (in a different element) will change.

This is the code I'm using:

// Pictures are stored in an array
 if (document.images) {
 img00= new Image
 img01=new Image
 img02=new Image
 img03=new Image
 img04=new Image
 img00.src ="../images/start.gif"
 img01.src="../images/1.gif"
 img02.src="../images/2.gif"
 img03.src="../images/3.gif"
 img04.src="../images/4.gif"
 img05.src="../images/5.gif"
 }
 
function MouseOver() 
{
 document.getElementById("lformat-title… ="Changed title";
 document.getElementById("lformat-tagli… = "Tagline Here";
 document.getElementById("lformat-image…
 }
 

function MouseOut() 
{
 document.getElementById("lformat-image… = img00.src;
 document.getElementById("lformat-title… = "default title";
 document.getElementById("lformat-tagli… = "default tagline";
 }

In the HTML, when a <li> is hovered over, it will activate the mouseOver() and mouseOut() events.

 <ul>
 <li onmouseover="mouseOver()" onmouseout="mouseOut()">
 <img src="images/thumbnail1.gif">
 <p>Text here</p>
 </li>
 </ul>

And the thing that will be changed is this:

 <h1 id="lformat-title">Example Title</h1>
 <h2 id="lformat-tagline">Example Tagline</h2>
 <img src="images/start.gif" />

The code isn't working when I load it up. The title and tagline change, but the images don't.

As I said, I'm still really new so I'd appreciate any help greatly!
Thankyou!

~Emeralds

[sunfighter]

You have to watch capitalization.

<li onmouseover="MouseOver()" onmouseout="MouseOut()">

Cap M not m

[Emeralds]

Oh right! Thanks! I didn't see that... D:
Anyway, I fixed it but it still doesn't work...
However, I moved the script out of the js folder and it's working for some reason now though! Do you know what might be causing this? Whenever I move it back into another folder, it just seems to not work?

[sunfighter]

How are you calling it? Here's one way:
<script type="text/javascript" src="xxx.js"></script>

With this way you don't need the <script type="text/javascript"> in the file at all. If you do a require or include you do.

How are you calling it? What does the js file look like. and where is it ( in what folder and where is the folder)?