JavaScript question Here is the assignment: Write a JavaScript program that disp
ID: 3676232 • Letter: J
Question
JavaScript question Here is the assignment: Write a JavaScript program that displays three images that each change when the mouse is moved over the image and returns to the original when the mouse is moved off the image.
I'm not going to upload the images I am using, but you can use any images you want as long as they're named the same as in my code.
Here is my code. I've been trying to debug it for a while to no avail.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Rollover</title>
<script type="text/javascript">
var imageName = '';
if(document.images)
{
var dog_on = new Image();
dog_on.src = 'images/mean_dog.gif';
var dog_off = new Image();
dog_off.src = 'images/dog.gif';
var cat_on = new Image();
cat_on.src = 'images/angry_cat.gif';
var cat_off = new Image();
cat_off.src = 'images/happy_cat.gif';
var baby_off = new Image();
baby_off.src = 'images/happy_baby.gif';
var baby_on = new Image();
baby_on.src = 'images/angry_baby.gif';
};
function imageOn(imageName)
{
if(document.images)
{
(imageName == 'happy_baby') ? document.images[0].src = baby_off.src : '';
(imageName == 'dog') ? document.images[1].src = dog_off.src : '';
(imageName == 'happy_cat') ? document.images[2].src = cat_off.src : '';
};
};
function imageOff(imageName)
{
if(document.images)
{
(imageName == 'angry_baby') ? document.images[0].src = baby_on.src : '';
(imageName == 'mean_dog') ? document.images[1].src = dog_on.src : '';
(imageName == 'angry_cat') ? document.images[2].src = cat_on.src : '';
};
};
</script>
</head>
<body>
<h2>Emotional Babies, Dogs, and Cats</h2>
<h3>Image Rollover</h3>
<p><img src="images/happy_baby.gif" width = "500" height = "500";
alt = "Baby here" name="baby"
onMouseOver = "imageOn('angry_baby'); return true;"
onMouseOut = "imageOff('happy_baby'); return true;">
</p>
<p><img src="images/dog.gif" width = "500" height = "250";
alt = "Dog here" name="dog"
onMouseOver = "imageOn('mean_dog'); return true;"
onMouseOut = "imageOff('dog'); return true;">
</p>
<p><img src="images/happy_cat.gif" width = "500" height = "250";
alt = "Cat here" name="cat"
onMouseOver = "imageOn('angry_cat'); return true;"
onMouseOut = "imageOff('happy_cat'); return true;">
</p>
</body>
</html>
Explanation / Answer
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Rollover</title>
<script type="text/javascript">
var imageName = '';
if(document.images)
{
var dog_on = new Image();
dog_on.src = 'images/mean_dog.gif';
var dog_off = new Image();
dog_off.src = 'images/dog.gif';
var cat_on = new Image();
cat_on.src = 'images/angry_cat.gif';
var cat_off = new Image();
cat_off.src = 'images/happy_cat.gif';
var baby_off = new Image();
baby_off.src = 'images/happy_baby.gif';
var baby_on = new Image();
baby_on.src = 'images/angry_baby.gif';
};
function imageOn(imageName)
{
if(imageName == 'baby')
{
document.getElementById(imageName).src = "prgoutput.png";
}
if(imageName == 'dog')
{
document.getElementById(imageName).src = "prgoutput.png";
}
if(imageName == 'cat')
{
document.getElementById(imageName).src = "prgoutput.png";
}
};
function imageOff(imageName)
{
if(imageName == 'baby')
{
document.getElementById(imageName).src = "Capture.png";
}
if(imageName == 'dog')
{
document.getElementById(imageName).src = "Capture1.png";
}
if(imageName == 'cat')
{
document.getElementById(imageName).src = "prg.png";
}
};
</script>
</head>
<body>
<h2>Emotional Babies, Dogs, and Cats</h2>
<h3>Image Rollover</h3>
<p><img src="Capture.png" width = "500" height = "500"; id = "baby" alt = "Baby here" name="baby"
>
</p>
<p><img src="Capture1.png" width = "500" height = "250"; id = "dog" alt = "Dog here" name="dog"
>
</p>
<p><img src="prg.png" width = "500" height = "250"; id = "cat" alt = "Cat here" name="cat"
>
</p>
</body>
</html>
please change the name of image inside the function and in src of image tab
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.