Above are the directions to the assignment. I have most of it done but I am havi
ID: 3710951 • Letter: A
Question
Above are the directions to the assignment. I have most of it done but I am having trouble adding the second and third image to the HTML file. How would I incorporate this? Here is my code:
<html>
<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="feb%20birthday.jpg" width="193" height="178">
</div>
<input type="button" value="Next" />
</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
The issue i found in the code is that you are not giving the full page context path while giving the src of image in below line -
document.getElementById("image").setAttribute("src", "img/" + imgSrcs[index]);
<img id="image" border="0" src="feb%20birthday.jpg" width="193" height="178">
full context path is - /your project name/your image folder name/image name
Please make the respective changes in the mentioned area.(As i dont know your project name and image folder name)
I made the respective changes for the code:
<html>
<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;
//give your project name in place of "your project name"
//give your image folder name in place of "image folder name"
document.getElementById("image").setAttribute("src", "/your project name/image folder name/" + imgSrcs[index]);
document.getElementById("image").style.marginLeft = "100px";
}
}
</script>
</head>
<body>
<div>
<!-- give your project name in place of "your project name" -->
<!-- give your image folder name in place of "image folder name" -->
<img id="image" border="0" src="/your project name/image folder name/feb%20birthday.jpg" width="193" height="178">
</div>
<input type="button" value="Next" />
</body>
</html>
Please comment and let me know if it works for you. If not comment the issue and will be glad to help.
P.S - makes sure all the images you are including are in the same folder(or you can change the folder name respectively)
Thanks for posting the question. Glad to help
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.