Javascript functions Swapping Images
<p>I am supposed to 
Write and use a JavaScript function to insert content into an HTML element: 
•   Create a function named swapOut that includes the statement: document.imageFlip.src="name of the first image". 
•   Create a function named swapBack that includes the statement: document.imageFlip.src="name of the second image". 
•   Insert a div tag with an id and name of myImage.<br>
•   Inside the div container, insert an image tag with an id and name of imageFlip. Initialize the image tag to display the first image. Set the height and width attributes. Set the alt and title attributes to "Swappable image". 
alt="Swappable image" title="Swappable image" height="" width=""</p>

<p>•   Inside the image tag, add onmouseover="swapOut()" and    onmouseout= "swapBack()". These define events that the image element recognizes. The first calls your swapOut function when you move the mouse over the image; the second calls your swapBack function when you move the mouse off the image.</p>

<p>So far i have done this. 
in my .js form i have </p>

<pre><code>function swapOut() {
    document.imageFlip.src = "firstImage"
}

function swapBack() {
    document.imageFlip.src = "secondImage"
}
</code></pre>

<p>and in my .htm form I have</p>

<pre><code>&lt;div id="myImage" name="myImage"&gt;


&lt;img src="firstImage.png" alt="Swappable image" title="Swappable image" id="imageFlip" 
name="imageFlip" onmouseout="swapBack()" onmouseover="swapOut()" height="200" width="200"/&gt;


&lt;/div&gt;
</code></pre>

<p>I need the images to swap but I get the first image however when i hover over it i only get a box with no picture</p>
