In: Computer Science
-Insert an h2; you decide the content.
-Below your headings put an image of you and an image of your pet or favorite animal.
-Use a function to swap the positions of the images when the mouse is over either image. (Call the same function in the onmouseover event handler for both images. The function will load images in the appropriate positions.)
-Swap the images back to their original positions when the mouse is moved off of the images (Use the same function and pass different values with the parameters. This function will load both of the original images.)
-YES!! Please Use JavaScript
Please use the appropriate image name or image path for "your image" and "pet image".
In this code mypic.jpg, mypet.jpeg and index.html are saved in the same directory. Read the comments to better understand the code.
index.html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script language="JavaScript">
function setImage(imagePath){
// getElementById() method returns the element that has the ID attribute with the specified value
imageView = document.getElementById("imageView");
// we set the src of this img tag with imagePath
imageView.src=imagePath;
}
</script>
</head>
<body>
<h2>INSERT YOUR CONTENT</h2>
<!-- mypet.jpeg is the image of my pet and is placed in the same folder where the HTML file is saved -->
<!-- mypic.jpeg is my image and is placed in the same folder where the HTML file is saved -->
<!-- when onMouseOver event is triggered "mypet" image is set as src by the function setImage -->
<!-- when onMouseOut event is triggered "mypic" image is set as src by the function setImage -->
<img src="mypic.jpg"
id="imageView"
height="300px"
onMouseOver="setImage('./mypet.jpeg');"
onMouseOut="setImage('./mypic.jpg');">
</body>
</html>