OK this is what im trying to do here:
I simply want to randomize the image under dv id splash and i have images placed in the root folder. I tried to randomize the code using function randomImg() here but the output is empty.
Any ideas?
<!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>HTML</title>
<meta name="author" content="blahblahblah" />
<!-- Date: 2014-03-06 -->
<script type="text/javascript">
function randomImg()
{
var images = new Array();
images[0] = "img06.jpg";
images[1] = "img07.jpg";
images[4] = "img08.jpg";
images[5] = "img09.jpg";
images[6] = "img10.jpg";
var random = Math.ceil(Math.random()* images.length);
if (random == 0) { random =1; }
document.write('<img src="images[random]">');
}
</script>
</head>
<body>
<div id="header">
<div id="logo">
<h1>Welcome</h1>
<h2>Flower of the day</h2>
</div>
<div id="splash"><img src="virus.jpg" alt="random images"/></div>
<script type="text/javascript">
document.getElementById('splash').firstElementChild.src = 'img09.jpg';
randomImg();
</script>
</div>
</body>
</html>
Update this html:
<div id="splash"><img id='image' src="virus.jpg" alt="random images"/></div>
Instead of document.write('<img src="images[random]">'); put
document.getElementById('image').src=images[random];
Else
Simply replace document.write('<img src="images[random]">'); with
document.getElementById('splash').firstElementChild.src =images[random];
Related
I would like to transform this Javascript below that show randomly 3 images each page refresh, to an ordered sequences of images, for example first image1.jpg, second image2.jpg etc..
<script type="text/javascript">
jQuery(document).ready(function($){
var image = new Array ();
image[0] = "image1.jpg";
image[1] = "image2.jpg";
image[2] = "image3.jpg";
var hasard = Math.floor(Math.random() * image.length);
$('#css-id span img').attr('src', 'http://url..' + image[hasard]);
});
</script>
there is a way? MANY THANKS!
If you want to show all three images in order, then what you need to do is select the 3 image (I hope there are three elements for showing 3 images) element using the query selector.
As you have not posted the html you want to manipulate, we can only assume its something like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="css-id">
<span>
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</span>
</div>
</body>
<script>
$(document).ready(function($){
var image = new Array ();
image[0] = "https://images.unsplash.com/photo-1622495894307-93143fc57155?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60";
image[1] = "https://images.unsplash.com/photo-1624377149599-65e4b8cd6fa0?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60";
image[2] = "https://images.unsplash.com/photo-1624129126429-0775cd4ea284?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60";
image.forEach((i, index) => {
$('#css-id span img').eq(index).attr('src', i);
});
});
</script>
</html>
This will give you the desired result, you can change the query selector as per your actual html.
I know this question is asked frequently but I can not copy a code. I want the image to change after a time. I think I made a lot of wrong coding errors. Below is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image=document.getElementById("image");
function volgendefoto() {
if (images==0) {
image.src="foto2";
}
if (images==1) {
image.src="foto2";
}
if (images==3) {
image.src="foto1";
}
}
function timer(){
setInterval(volgendefoto, 3000);
}
var images= [], x = -1;
image[0]="foto1.jpg";
image[1]="foto2.jpg";
image[2]="foto3.jpg";
</script>
</body>
</html>
Thanks in advance for help,
Jasper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["foto1.jpg", "foto2.jpg", "foto3.jpg"]
function volgendefoto() {
if (++currentPos >= images.length)
currentPos = 0;
image.src = images[currentPos];
}
setInterval(volgendefoto, 3000);
</script>
</body>
</html>
You're not creating your interval, timer is never executed. Here's one that will loop your pictures, assuming that your first image is images is the one preloaded (eg: images[0] === image.src on page load) :
const image=document.getElementById("image");
let images= ["foto1.jpg","foto2.jpg","foto3.jpg"], i = 0;
function volgendefoto() {
i<images.length?i+=1:i=0;
image.src=images[i];
}
setInterval(volgendefoto, 3000);
I'm making a header for my site, and I want to have it like a slideshow.
The problem is that the images won't change. It shows only 1 images, and the rest won't show up.
Code:
//Array with the paths to the images
var image = new Array("img/header/header1.png", "img/header/header2.png", "img/header/header3.png");
//imageNumber to change the image, and imageLenght for the array lenght - 1
var imageNumber = 0;
var imageLength = image.length -1;
//Call changeImage()
changeImage();
//Function to change the image
function changeImage() {
//use strict because I use dreamweaver and it needs that(I don't know why)
"use strict";
//Add 1 to imageNumber for choosing a image(in "document.slideshow.src = image[imageNumber];")
imageNumber++;
//Check if image number is not below 0 or above the array index
if(imageNumber < 0) {
imageNumber = imageLength;
} else if(imageNumber > imageLength) {
imageNumber = 0;
}
//Change the image
document.header.src = image[imageNumber];
//recalling every second
setTimeout(changeImage, 1000);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tommie's HOME</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/header_slideshow.js"></script>
</head>
<body>
<div id="big_wrapper">
<nav>
<ul id="n1">
<li><img src="img/logo.png" width="100px"/></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<ul id="n2">
<li>About</li>
<li>Shop</li>
</ul>
</nav>
<div id="content">
<header>
<img src="img/header/header1.png" name="header" />
</header>
</div>
</div>
</body>
</html>
If you know the problem, feel free to reply.
Kind regards,
Tom
Just beginning to learn HTML & Javascript.
I have the following code, which works. however, because I have have an img tag in my body it is trying to show a place holder for an image before I click the button. How can I stop this.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
<script type="text/javascript">
function picture(){
var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
}
</script>
</head>
<body>
<img id="bigpic" src="bigpic" />
<button onclick="picture()">Enlarge</button>
</body>
</html>
Best wishes.
Add style "display:none" to picture tag
<img id="bigpic" src="bigpic" style="display:none;"/>
And in function picture change it for show image
document.getElementById('bigpic').style.display='block';
There is demo: http://jsfiddle.net/eX5kx/
Use display property in css, try this:
javascript:
function showPicture() {
var sourceOfPicture = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg";
var img = document.getElementById('bigpic')
img.src = sourceOfPicture.replace('90x90', '225x225');
img.style.display = "block";
}
html:
<img style="display:none;" id="bigpic" src="bigpic" />
<button onclick="showPicture()">Enlarge</button>
I like shin solution, i would do the same thing myself. However theres a lot of way to do that, another option is to put a tiny trasparent image as default and then replace like you did to the other one. like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
<script type="text/javascript">
function picture(){
var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
}
</script>
</head>
<body>
// tiny trasparent image
<img id="bigpic" src="https://maps.gstatic.com/mapfiles/markers2/dd-via-transparent.png" alt="" />
<button onclick="picture()">Enlarge</button>
</body>
</html>
this way no css is needed but like i said before i prefer Shin's solution.
I'm messing around with JavaScript and I want to have a coloured square with 3 links and depending on the link I click, the square will change colours. I can't get it to work and I'm not sure where I went wrong..
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
<script src="switch.js" type='text/javascript'></script>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
</body>
</html>
switch.js
var switch = (function() {
var red = document.body.getElementById('red');
var square = document.body.getElementById('square');
red.onclick = function() {
square.src = 'img/red.png';
}
})();
You're running your code before the elements exist.
Move the <script> element to the bottom of the <body> (so that it runs after they exist), or run the code in the load event.
You have two issues.
First you are using a variable called switch, that is a no no. Switch is a reserved word because it is a switch statement. Rename it.
var xswitch = (function() {
Second, It is because you are runnnig the code before the element exists on the page. It needs to be executed onload, document dom loaded [ready], or the script needs to be added at the bottom of the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
<script src="switch.js" type='text/javascript'></script>
</body>
</html>
Make the following changes in order to ensure that the DOM has loaded.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
<script src="switch.js" type='text/javascript'></script>
<script type="text/javascript">
window.onload = function () {
switchFn();
};
</script>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
</body>
</html>
JavaScript (switch.js)
var switchFn = function () {
var red = document.getElementById('red');
var square = document.getElementById('square');
red.onclick = function () {
square.src = 'img/red.png';
}
};