1. Create a web page named BirdGroup.html. This page should contain links to the
ID: 670409 • Letter: 1
Question
1. Create a web page named BirdGroup.html. This page should contain links to the other pages to
manage this table. This page creates a basic image mouseover effect.
a. Create a hyperlinked image in the page that when you place the mouse over the image the
other image pops out in the page and has a bird displayed with the message in a label
“Time for me to fly!”
_______________________________________________________________________________
1. Create a web page named BirdSupplies.html. This page should contain links to the other pages
to manage this table.
a. Create an image in the canvas element that displays a bird on a birdhouse with the
message “Birdhouses on sale for $10 each today only!”
b. You may use an image for the bird, but you must draw and color the birdhouse in
code!
__________________________________________________________________________
2. Create a web page named BirdFlying.html. This page should contain links to the other pages to
manage this table.
a. Create an animated image in the canvas element that displays a bird on a birdhouse.
You may use an image for the bird, but you must draw and color the birdhouse in
code!
Explanation / Answer
question-1. Create a web page named BirdSupplies.html. This page should contain links to the other pages
to manage this table
file name BirdSupplies.html
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="deepak" width="220" height="277" src="http://www.greenleafdollhouses.com/images/bird-houses/bird-house.jpg" alt="Birdhouses on sale for $10 each today only!">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("deepak");
ctx.drawImage(img, 20, 20);
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
Question 2- Create a web page named BirdFlying.html. This page should contain links to the other pages to
manage this table
file BirdFlying.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var pattern= new Image();
function animate(){
pattern.src = 'http://www.greenleafdollhouses.com/images/bird-houses/bird-house.jpg';
setInterval(drawImage, 200);
}
function drawImage(){
var canvas = document.getElementById('deepak');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
var time = new Date();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(pattern,-3.5,-3.5);
ctx.restore();
}
else {
alert('sorry!!');
}
}
</script>
</head>
<body>
<canvas id="deepak" width="400" height="400"></canvas>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.