Question

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.
• 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=””

• 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.

So far i have done this.
in my .js form i have

function swapOut() {
    document.imageFlip.src = "firstImage"
}

function swapBack() {
    document.imageFlip.src = "secondImage"
}

and in my .htm form I have

<div id="myImage" name="myImage">


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


</div>

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

Answer 1

Make sure what your assigning to your ‘src’ attribute has the full image path and extension.

For your case it would be

document.imageFlip.src = "firstImage.png"
// or
document.imageFlip.src = "secondImage.png"

Also you can use

document.getElementById('imageFlip').src = "firstImage.png"

If you don’t want to use the name attribute everywhere, this is the common way to do this type of thing, and (I could be wrong on this) but I think the name attribute is deprecated in HTML5.