This assignment is not allowed to use jquery. Here is my code so far: <head> <ti
ID: 3710887 • Letter: T
Question
This assignment is not allowed to use jquery. Here is my code so far:
<head>
<title>Animation</title>
<STYLE>
#sunset {position: absolute; top: 0px; left: 30px}
# {position: absolute; top: 50%; left: 50%; color: "#FF0000"; font-size: "18pt";}
</STYLE>
<script type="text/javascript" language="JavaScript">
//top is a string, so a numeric variable must be used to accumulate position
var fromTop=0;
function Drop() {
if (fromTop <600) {
fromTop +=20;
sunset.style.top = fromTop.toString();
setTimeout("Drop();", 50);
}
else {sunset.style.top = 250+"px";}
}
</script>
</head>
<body>
<div id="sunset">
<img border="0" src="images/thatsall.jpg" width="193" height="178"></p>
</div>
<input type="button">Click
</body>
</html>
(15 pts) Obtain three jpg files of approximately the same size and name them picl.jpg, pic2.jpg, etc. Put the first picture (pic1 jpg) 100 pixels from the left side of the screen via positioning and have a button next to it that is labeled "nex" When the button is clicked upon, the picture will slide across the screen via animation until it is gone. At that time the picture will change to "pic2.jpg." it will be 100 pixels from the left side of the screen, and the process will continue The best way to approach this project is in three steps. First put a button and a picture on the page and position the picture with style. Second, make an animation function that will slide the picture off the screen when the button is clicked on. Third, write the function that will change the SRC of the IMG tag.Explanation / Answer
<head>
<title>Animation</title>
<style>
#image {
margin-left: 100px
}
</style>
<script type="text/javascript" language="JavaScript">
var imgSrcs = ["pic1.jpg", "pic2.jpg", "pic3.jpg"]; // names of all the images
var fromLeft = 100;
var index = 0;
function Slide() {
if (fromLeft < 1000) {
fromLeft += 20;
document.getElementById("image").style.marginLeft = fromLeft.toString() + "px";
setTimeout("Slide();", 50);
}
else {
index++; // Increasing the index to take the next pic once the previous image has gone
index %= imgSrcs.length; // Starting the index again from 0 when it reaches the max
fromLeft = 100;
document.getElementById("image").setAttribute("src", "img/" + imgSrcs[index]);
document.getElementById("image").style.marginLeft = "100px";
}
}
</script>
</head>
<body>
<div>
<img id="image" border="0" src="img/pic1.jpg" width="193" height="178">
</div>
<input type="button" value="Next" />
</body>
</html>