I coded a simple slideshow with Javascript but it isn't working when I place it within my HTML page that I have created. So far I have tried to include it in different areas, different div's and from an external file. Nothing seems to be working. I have tested the code on blank HTML and it works. But when I use it within the page that I have put together, it wont load.
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
images[0] = "gotpic1.jpg";
images[1] = "gotpic2.jpg";
// Change Image
function changeImg(){
document.slide.src = images[i];
// Check If Index Is Under Max
if (i < images.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload = changeImg;
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-repeat:no-repeat;
background-size: cover;
}
.gotlogo{
text-align: center;
}
.slider {
border: solid black 2p
}
.slider{
height: 300px;
width: 500px;
}
<body style=" background-image: url("forest1.jpg");">
<div class="gotlogo">
<img src="gotlogo2.png" alt="GOT">
</div>
<div class="slider">
<img name="slide" height="200" width="400">
</div>
<p>
<br>
</p>
</body>
Although there are a lot to of room for improvements, for now I'm giving you a working prototype of your version of code. Just added an id to the <img/> and how src is manipulated in changeImg()
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body style=" background-image: url("forest1.jpg");">
<div class="gotlogo"> <img src="gotlogo2.png" alt="GOT"> </div>
<div class="slider">
<img name="slide" id="slide" height="200" width="400">
</div>
<p><br>
</p>
<script>
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
images[0] = "http://www.buyersgohappy.com/blog/wp-content/uploads/2017/08/GOT-Kingdom-in-India-11-750x339.jpg";
images[1] = "https://i.kym-cdn.com/entries/icons/mobile/000/010/576/got.jpg";
// Change Image
function changeImg() {
document.getElementById("slide").src = images[i];
// Check If Index Is Under Max
if (i < images.length - 1) {
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload = changeImg;
</script>
<style>
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
}
.gotlogo {
text-align: center;
}
.slider {
border: solid black 2px
}
.slider {
height: 300px;
width: 500px;
}
</style>
</body>
</html>
Having that said, let's see how you can improve your code. Please checkout the changeImg() function:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body style=" background-image: url("forest1.jpg");">
<div class="gotlogo"> <img src="gotlogo2.png" alt="GOT"> </div>
<div class="slider">
<img name="slide" id="slide" height="200" width="400">
</div>
<p><br>
</p>
<script>
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
/*
For local images:
say you have a local folder structure like this:
GOT
|
--> index.html (this file)
|
--> Images
|
--> got1.jpg
|
--> got2.jpg
Now in you can can these images like:
images[0] = "Images/got1.jpg"
images[1] = "Images/got2.jpg"
Let's try another example folder structure:
GOT
|
--> Html
| |
| --> index.html (this file)
|
--> Images
|
--> got1.jpg
|
--> got2.jpg
Now in you can can these images like:
images[0] = "../Images/got1.jpg"
images[1] = "../Images/got2.jpg"
*/
images[0] = "http://www.buyersgohappy.com/blog/wp-content/uploads/2017/08/GOT-Kingdom-in-India-11-750x339.jpg";
images[1] = "https://i.kym-cdn.com/entries/icons/mobile/000/010/576/got.jpg";
// Change Image
function changeImg() {
document.getElementById("slide").src = images[i];
// Keep index under the size of images array
i = (i+1) % images.length;
}
// Run function when page loads
window.onload = function() {
// Run function every x seconds
setInterval(changeImg, time);
}
</script>
<style>
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
}
.gotlogo {
text-align: center;
}
.slider {
border: solid black 2px
}
.slider {
height: 300px;
width: 500px;
}
</style>
</body>
</html>
u are using old fashioned way u maybe be practicing i just changed a bitin code
i used getElementsByName() function to find element
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
images[0] = "https://www.w3schools.com/html/pic_trulli.jpg";
images[1] = "https://www.w3schools.com/html/img_girl.jpg";
// Change Image
function changeImg(){
document.getElementsByName('slide')[0].src = images[i];
// Check If Index Is Under Max
if (i < images.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload = changeImg;
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-repeat:no-repeat;
background-size: cover;
}
.gotlogo{
text-align: center;
}
.slider {
border: solid black 2p
}
.slider{
height: 300px;
width: 500px;
}
<body style=" background-image: url("forest1.jpg");">
<div class="gotlogo">
<img src="gotlogo2.png" alt="GOT">
</div>
<div class="slider" name='w'>
<img name="slide" height="200" width="400">
</div>
<p>
<br>
</p>
</body>
Related
Sorry if this is a duplicate I'm new to JS and HTML and I can't figure out what else to do.
I am trying to make (mostly from JS) a way to upload images onto any background you like, then saving them as one image. For now, I am experimenting by putting an image of the scream onto a canvas and then trying to upload an image of my choosing. Currently when I press save image, it saves ONLY the background. Also the background and uploaded image both overflow out of the card, but removing position:absolute in css stops them from overlaying. I've tried stuff with MarvinJ or even just trying to not use canvas, but can't get it to work.
Sorry for the big question, how do I merge an uploaded image and an image of my choosing onto a card and save them as one file?
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type = "text/css" href="blank.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title> Petra image </title>
</head>
<body>
<div class = "wrap">
<div class = "card-container">
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" class = "Card_Image" alt="Image preview...">
</div>
<div class="card_main">
<div id="picHolder">
<img src="" id = "pic" class = "test" height="300" alt="Image preview2" object-fit: cover;>
<img id="scream" class = "scream" width="300" height="480" src="img_the_scream.jpg" alt="The Scream" object-fit: cover;>
</div>
</div>
</div>
</div>
<script src="blank.js"></script>
</body>
CSS:
html, body {
margin: 0;
width:100%;
padding:0;
}
.wrap {
display: flex;
flex-direction: column;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.card_main {
width: 300px;
height: 420px;
margin: 12px;
background-color: rgb(0, 0, 0);
padding: 10px;
overflow: hidden;
}
.scream{
position: absolute;
opacity: 0.2;
border: 1px solid #000000;
z-index: 1;
}
Javascript:
function previewFile() {
var preview = document.querySelector('img');
var preview2 = document.querySelector('.test')
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
preview2.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("pic");
var img2 = document.getElementById("scream2");
ctx.drawImage(img, 10, 10);
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 10, 10);
}
I am trying to find a way that I can have an image that takes up the whole browser window and is responsive. Every time the page is loaded I would like the background image to change from a select group of photos that I have locally.
I have tried a few solutions on here but nothing is really working. The HTML I have is:
<div id="container">
<img src="Images/IMG_3764.JPG" alt="An island in the middle of the sea in Turkey" id="backgroundImage">
</div>
The CSS I have is:
body {
margin: 0;
}
#container {
width: 100%;
height: 100%;
margin: 0;
}
#backgroundImage {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
html, body {
overflow: none !important;
overflow-x: none !important;
overflow-y: none !important;
}
One of the JS solutions that I have tried is this:
var image = new Array ();
image[0] = "http://placehold.it/20";
image[1] = "http://placehold.it/30";
image[2] = "http://placehold.it/40";
image[3] = "http://placehold.it/50";
var size = image.length
var x = Math.floor(size*Math.random())
$('#backgroundImage').attr('src',image[x]);
Your going to need to have an array of images stored in JavaScript like so:
var picArr = [imageSrc1 ,imageSrc2 ,imageSrc3];
After which you'll need some kind of random number that conforms to the amount of image src's you have in the above array.
http://www.w3schools.com/jsref/jsref_random.asp
You'll be using Math.random() here
Then you'll need to create a function that shall be executed when the document loads that changes the src of your background above.
Your final function might look like this:
var picArr = ['src0', 'src1', 'src2', 'src3', 'src4', 'src5', 'src6', 'src7', 'src8', 'src9', ];
var myNumber = Math.floor((Math.random() * 10) + 1);
$(document).ready(function () {
$("#backgroundImage").attr('src', picArr[myNumber]);
});
With jquery you could do something like this
See jsfiddle here.
var images = ['http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg', 'http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg', 'https://s-media-cache-ak0.pinimg.com/originals/c6/8a/51/c68a5157020c8555ca781839d754a1a0.jpg'];
var randomImage = Math.floor(Math.random() * 3)
$(document).ready(function() {
$("#container").css("background-image", "url('" + images[randomImage] + "')");
})
html, body {
height: 100%;
}
#container {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container"></div>
</body>
I am making matching game that images in left and right are different, and users have to find(I put one more image in left side).
My problem is that I cannot call image on where I want. What should I have to fix? Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#leftside {
float: left;
}
#rightside {
float: right;
left: 500px;
border-left: 1px solid black
}
</style>
<script>
var numberOfFaces(5);
var theLeftSide = document.getElementById("leftSide");
function generateFaces() {
var createElement("img");
var position = Math.floor(Math.random() * 500);
img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
img.id = 'smileImage';
createElement.setAttribute("height", position);
createElement.setAttribute("width", position);
document.getElementById('leftSide').appendChild(img);
}
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftside"></div>
<div id="rightside"></div>
</body>
</html>
You need to set something to the result of createElement('img'). For example, you can change that line to var img = createElement('img');
You never actually use theLeftSide.
createElement is actually document.createElement.
You never defined the variable createElement. Since we called it img earlier, do so now.
leftSide is not the ID of any element, but leftside is. Change it so that all usages are capitalized the same.
After that, you actually need to call generateFaces. Because the page is loaded top-to-bottom, JavaScript doesn't yet know about the div with the ID of leftSide. You have to wait until the page is finished loading to call the Javascript, and you can do that by adding window.onload = generateFaces to the end of your script.
Here's the final result:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#leftside {
float: left;
}
#rightside {
float: right;
left: 500px;
border-left: 1px solid black
}
</style>
<script>
function generateFaces() {
var img = document.createElement('img');
var position = Math.floor(Math.random() * 500);
img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
img.id = 'smileImage';
img.setAttribute('height', position);
img.setAttribute('width', position);
document.getElementById('leftSide').appendChild(img);
}
window.onload = generateFaces;
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
</html>
i am trying to turn the background image of a div into a slideshow but obviously do not know how to, any help would be appreciated.
HTML:
<div class = 'Header'>
<h3>One of the UK's best <br> <span class = 'green'>paintball</span> destinations</h3>
<input type = 'button' class = 'Book_Here' value = 'Book Here'>
</div>
CSS:
.Header {
background-image: url(../IMG/Header.png);
background-size: cover;
width: 100%;
height: 720px;
text-align: center;
}
.Header h3 {
padding-top: 200px;
color: #ffffff;
font-size: 50pt;
font-style: italic;
margin-bottom: 50px;
}
Here's an example of a slideshow using the <img> HTML tag, instead of linking the image through CSS. This will require you to put an <img> tag in your .header <div> and link that tag to the first image in your slideshow img1.jpg
HTML:
<html>
<head>
<script src="slideshow.js" type="text/javascript"></script>
<script>
window.onload = auto;
</script>
</head>
<body>
<h3>One of the UK's best <br> <span class = 'green'>paintball</span> destinations</h3>
<input type = 'button' class = 'Book_Here' value = 'Book Here'>
<img class=".header" src="../IMG/Header.png" name="header">
</body>
</html>
CSS:
.book_here, h3 {
position: absolute;
}
JavaScript:
// Change Slide in Slideshow
var Image_Number = 0;
function change_image (num) {
var image = ["../IMG/Header.png", "../IMG/img2.png", "../IMG/img3.png"];
var Image_Length = image.length - 1;
console.log(Image_Length);
Image_Number = Image_Number + num;
console.log(Image_Number);
if (Image_Number > Image_Length) {
Image_Number = 0;
}
if (Image_Number < 0) {
Image_Number = Image_Length;
}
document.header.src=image[Image_Number];
return false;
}
// Change Slide Automatically - Interval Function
function auto () {
setInterval(function(){
change_image(1);
}, 3000);
}
I have write a JavaScript code to perform a slide show but it's not working onload when i assign it to a <a> it works but not work onload
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide Show</title>
<meta name="author" content="Jenz" />
<!-- Date: 2014-07-18 -->
<script>
var slideImg;
var picNo = 0;
window.onload = function() {
slideImg = document.getElementById('slideShowImage');
images = new Array();
images[0] = new Image();
images[0].src = "Images/image1.jpg";
images[1] = new Image();
images[1].src = "Images/image2.jpg";
images[2] = new Image();
images[2].src = "Images/image3.jpg";
};
function slide() {
slideImg.src = images[picNo].src;
if (picNo < 2) {
picNo++;
} else {
picNo = 0;
}
timer = setTimeout(slide, 1000);
};
</script>
</head>
<body>
<div style="margin-left: auto; margin-right: auto; width: 900px">
<div id="slideShowAndNav" style="margin: auto; width: 700px;">
<img id="slideShowImage" name="slideshow" src="Images/image1.jpg" style="border-radius: 0px 0px 0px 250px; position: absolute; top: -50; left: -50; z-index: 1;" border="1px" />
<a style="display: block; height: 40px; width: 40px; background-color: red; border-radius: 20px; text-align: center; position: absolute; z-index: 2; margin-top: 130px;" href="">Home</a>
</div>
</div>
</body>
</html>
Please look at the code and tell me what should i do and other thing i have a navigation which code is
<a style="display: block; height: 40px; width: 40px; background-color: red; border-radius: 20px; text-align: center; position: absolute; z-index: 2; margin-top: 130px;" href="">Home</a>
i want this <a> in a circle as i did with border-radius and now i want it's
Text in the center like Home in the middle of the circle help me also with this
i want this in a circle as i did with border-radius and now i want it's Text in the center like Home in the middle of the circle help me also with this
For this, use:-
style="border-radius:100px; text-align:center;"
The "xmlns" attribute is invalid in HTML 4.01. (You can change your doctype.)
Also, it is more common practice to create your function.
function blaah(blaah){
blaah
}
And then add an onload event handler, either with an event listener, or add this code to your body tag,
<body onload="blaah('blaah')">
or, you could add this code in your script tags, but outside of the function.
blaah("blaah");
Call slide function.
window.onload = function() {
slideImg = document.getElementById('slideShowImage');
images = new Array();
images[0] = new Image();
images[0].src = "Images/image1.jpg";
images[1] = new Image();
images[1].src = "Images/image2.jpg";
images[2] = new Image();
images[2].src = "Images/image3.jpg";
slide();
};