<title>Mouse Events</title> <style> body { font-size: 100%; margin: 1.25em; } im
ID: 3914954 • Letter: #
Question
<title>Mouse Events</title>
<style>
body {
font-size: 100%;
margin: 1.25em;
}
img { margin: 1.25em;}
</style>
<!-- Load the image handler script -->
<script src="./lab6.js"></script>
</head>
<body>
<!-- Do not change anything in this file -->
<h1>Find the Buried Treasure</h1>
<img src="./mapblur.jpg" id="map">
</body>
</html>
// The init function sets the event handler
// functions for the mouseover and mouseout
// events.
function init(){
// Use the image with the id of map
var mapImage = document.getElementById();
//Use the clearImage event
//handler function for the
//mouseover event.
mapImage.onmouseover = ;
//Use the blurImage event
//handler function for the
//mouseout event.
mapImage.onmouseout = ;
}
// mouseover event handler function
// Use the image with the id of map
function clearImage() {
// Use the image with the id of map
var image = document.getElementById();
// Use the map.jpg image for
// the image source.
image.src = ;
}
// mouseout event handler function
function blurImage(){
// Use the image with the id of map
var image = document.getElementById();
// Use the mapblur.jpg image for
// the image source.
image.src = "";
}
// Use the init function for the
// onload event handler to make
// sure the whole page is loaded
// before executing any JavaScript..
Explanation / Answer
Please find the modified code below:
CODE
--------------------
<title>Mouse Events</title>
<style>
body {
font-size: 100%;
margin: 1.25em;
}
img { margin: 1.25em;}
</style>
<!-- Load the image handler script -->
<script src="./lab6.js"></script>
</head>
<body>
<!-- Do not change anything in this file -->
<h1>Find the Buried Treasure</h1>
<img src="./mapblur.jpg" id="map">
</body>
</html>
// The init function sets the event handler
// functions for the mouseover and mouseout
// events.
function init(){
// Use the image with the id of map
var mapImage = document.getElementById("map");
//Use the clearImage event
//handler function for the
//mouseover event.
mapImage.onmouseover = clearImage();
//Use the blurImage event
//handler function for the
//mouseout event.
mapImage.onmouseout = blurImage();
}
// mouseover event handler function
// Use the image with the id of map
function clearImage() {
// Use the image with the id of map
var image = document.getElementById("map");
// Use the map.jpg image for
// the image source.
image.src = "./map.jpg";
}
// mouseout event handler function
function blurImage(){
// Use the image with the id of map
var image = document.getElementById("map");
// Use the mapblur.jpg image for
// the image source.
image.src = "./mapblur.jpg";
}
// Use the init function for the
// onload event handler to make
// sure the whole page is loaded
// before executing any JavaScript..
window.onload = init();
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.