Background: The purpose of this assignment is to provide you hands-on experience
ID: 3843979 • Letter: B
Question
Background:
The purpose of this assignment is to provide you hands-on experience responding to mouse events. Tasks:
Create a web page that demonstrates the onmouseover and onmouseout events. Refer to the presentation “Advanced Decisions and Loops.pdf” for more details. For this assessment, you will need to select 2 pictures from a source of your choosing. (( THE IMAGES ARE PASTED BELOW AS PNG FILES )) (( YOU CAN USE SNIPPING TOOL TO SAVE THE PICTURES ))
1. HTML Static Content (1 mark) Create a web page that contains an image.
2. JavaScript Event - Mouseover (3 marks) When the user moves the mouse pointer over the image, change the image that is displayed.
3. JavaScript Event - Mouseout (3 marks) When the user moves the mouse pointer off of the new image, change the image that is displayed back to the original.
4. HTML Static Content - Instructions (1 mark) Be sure to explain to the user what your web application is supposed to do. Include details on how to use the application.
5. Programming Style and Standards (1 mark) It is a good idea to practice conforming to a set of programming standards.
Refer to the posted summary of the Programming Standards used by the CP/CPA programs. 1 PROG1800 - Spring 2017
Explanation / Answer
HTML Code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function MouseOver(id)
{
document.getElementById(id).src="dog.PNG";
}
function MouseOut(id)
{
document.getElementById(id).src="owl.png";
}
</script>
</head>
<body>
<h4>move the cursor over and out the image to swap the images</h4>
<a href="#">
<img src="owl.png" width="200" height="200" alt="animal" id="SelctImage" />
</a>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.