I am using the following code and tried many other codes to display images in slide. but all in vain.. no error is in my code but not a single image is displaying on web page.. my code is:
<html>
<head>
<style>
body{
background-color: black;
padding:0;
margin:0;
width:320px;
height:480px;
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
width:320px;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<img src = "Slide1.JPEG";/>
<img src = "Slide2.JPEG";/>
<img src = "Slide3.JPEG";/>
<img src = "Slide4.JPEG";/>
var interval = 4 * 20;
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current =0;
var randomize = funtion() {
return ( Math.round(Math.random() * 3 - 1.5 ));
}
for(var i=0; i<imageCount; i++) {
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount) {
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade,interval * 100);
};
fade();
</script>
}
</body>
</html>
Please guide me where is the error.
Thanks
First error:
Yor aur using file type in caps (.JPEG) it should be .jpeg / .jpg
Second error:
You forget to type the <script> tag at the starting of JavaScript code.
Third error:
You are using invalid function keyword (funtion)
var randomize = "funtion"() {
return ( Math.round(Math.random() * 3 - 1.5 ));
}
Now put this code and it should work...
<html>
<head>
<style>
body{
background-color: black;
padding:0;
margin:0;
width:320px;
height:480px;
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
width:320px;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<img src = "Slide1.jpg" />
<img src = "Slide2.jpg" />
<img src = "Slide3.jpg" />
<img src = "Slide4.jpg" />
<script>
var interval = 4 * 20;
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current =0;
var randomize = function(){
return ( Math.round(Math.random() * 3 - 1.5 ));
}
for(var i=0; i<imageCount; i++) {
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount) {
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade,interval * 100);
};
fade();
</script>
</body>
</html>
Related
I tried few different things with no luck. I want the current image to slowly fade out and fade into the next image.
HTML
<div class="TestRotator " , style="text-align: center; padding-top: 20px; padding-bottom: 50px;">
<img
src="/Users/loh/Documents/app1/images/0.png"
,
height="130"
id="rotator"
,
class="img-fluid, rounded image-hover"
alt="Responsive image"
/>
</div>
<script src="js_src/imagechanger.js"></script>
JS
(function () {
var rotator = document.getElementById("rotator"); // change to match image ID
var imageDir =
"/Users/loh/Documents/app1/images/";
var delayInSeconds = 3;
var num = 0;
let currentIndex = 0;
const totalImages = 16;
const changeImage = function () {
var incre = Math.floor(Math.random() * (totalImages-1) ) + 1;
num += incre;
num = num % totalImages;
rotator.src = imageDir + num + ".png";
};
setInterval(changeImage, delayInSeconds * 1000);
})();
The trick I used is to use a background image instead of a real image. This allows to use some simple CSS to animate everything. For a JS only solution I suggest using jQuery, tho.
<html>
<head>
<style>
#view {
background-image: url("/pictures/0.png");
transition: background-image 1s;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="view"></div>
<script>
const view = document.getElementById("view");
const imageDir = "/pictures/";
const delayInSeconds = 2; //more then #view transition timing
const totalImages = 4; //0.png; 1.png; ...; 4.png;
var i = 0;
const changeImage = () => {
i += Math.floor(Math.random() * (totalImages-1) ) + 1;;
i %= totalImages;
view.style["background-image"] = `url(${imageDir}${i}.png)`;
};
changeImage(); //call immediately without having to wait for delayInSeconds
setInterval(changeImage, delayInSeconds * 1000);
</script>
</body>
If you want to do animation, then I recommend looking into a library to help with that. Here I'm using jQuery, and all I need are basically delay() and fadeOut(), though equivalents should be found in most other popular libraries.
In addition: I am setting the z-index of the images, so that the first image to show has the highest z-index, the second image the second-highest, and so on. Working code example...
$('#image1').delay(1000).fadeOut(500);
$('#image2').delay(2000).fadeOut(500);
$('#image3').delay(3000).fadeOut(500);
$('#image4').delay(4000).fadeOut(500);
$('#image5').delay(5000).fadeOut(500);
$('#image6').delay(6000).fadeOut(500);
div {
position:fixed;
background-color:white;
font-size:500%;
}
#image1 {
z-index:10;
}
#image2 {
z-index:9;
}
#image3 {
z-index:8;
}
#image4 {
z-index:7;
}
#image5 {
z-index:6;
}
#image6 {
z-index:5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image1">😀</div>
<div id="image2">🤖</div>
<div id="image3">🎃</div>
<div id="image4">😺</div>
<div id="image5">🐶</div>
<div id="image6">🐵</div>
I want to generate five image imgs first in left side, then remove the lastchild of it and copy the rest to the right side. If user clicks the extra img in left side, then clear all and generate more 5(10) img in left and copy 9 to the right side, and so on. If user clicks the wrong place, alert ("game over").Here is my code:
<html>
<head>
<style>
img{
position: absolute;
}
div{
position: absolute;
width: 500px;
height: 500px;
}
#rightSide { left: 500px;
border-left: 1px solid black;
}
</style>
<script>
var numberOfFaces = 5;
function generateFaces(){
var theLeftSide = document.getElementById("leftSide");
for (var i = 0; i < numberOfFaces; i++){
var img = document.createElement("img");
img.src = "smile.png";
var randomTop = Math.random() * 400;
var randomLeft = Math.random() * 400;
img.style.top = randomTop + "px";
img.style.left = randomLeft + "px";
theLeftSide.appendChild(img);
}
var theRightSide = document.getElementById("rightSide");
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
document.getElementById("rightSide").appendChild(leftSideImages);
var theBody = document.getElementByTagName("body")[0];
theLeftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
while (theBody.firstChild){
theBody.removeChild(theBody.firstChild);
}
numberOfFaces += 5;
generateFaces();
}
theBody.onclick = function gameover(){
alert("Game Over");
thBody.onclick = null;
theLeftSide.lastChild.onclick = null;
}
}
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 could generate and clone at first time, but when I click, nothing happens, so what is the problem?
This may be a typing error.
var theBody = document.getElementsByTagName("body")[0];
your code: var theBody = document.getElementByTagName("body")[0];
I suggest to use a good editor for html. I fixed the error with Jetbrain phpStorm but better ones may exist.
Bellow is a modified version that worked for me. Notice that in this version I added the events on all children instead of the whole document body. I don't know but for me it feels more accurate not to end the game on a user clicks on a white space for example.
<html>
<head>
<style>
img{
position: absolute;
}
div{
position: absolute;
width: 500px;
height: 500px;
}
#rightSide { left: 500px;
border-left: 1px solid black;
}
</style>
<script>
var numberOfFaces = 5;
var theBody;
var theLeftSide;
var theRightSide;
function generateFaces(){
theBody = document.getElementsByTagName("body")[0];
theLeftSide = document.getElementById("leftSide");
theRightSide = document.getElementById("rightSide");
for (var i = 0; i < numberOfFaces; i++){
var img = document.createElement("img");
img.src = "smile.png";
var randomTop = Math.random() * 400;
var randomLeft = Math.random() * 400;
img.style.top = randomTop + "px";
img.style.left = randomLeft + "px";
if(theLeftSide != null)
theLeftSide.appendChild(img);
else
{
alert("Game Over");
return;
}
}
var leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
document.getElementById("rightSide").appendChild(leftSideImages);
addEvents();
}
function addEvents(){
for(var i=0; i < theLeftSide.childNodes.length; i++){
theLeftSide.childNodes[i].onclick = nextLevel;
}
}
function removeEvents(){
for(var i=0; i < theLeftSide.childNodes.length; i++){
theLeftSide.childNodes[i].onclick = null;
}
}
function nextLevel(event){
if(this == theLeftSide.lastChild){
event.stopPropagation();
theLeftSide.innerHTML = "";
theRightSide.innerHTML = "";
numberOfFaces += 5;
generateFaces();
}
else
{
alert("Game Over");
removeEvents();
}
}
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>
The code is supposed to generate 5 elements one by one so that when the page is downloaded all we`ll see 5 elements (newFace) in random places.
This code generates all 5 elements but they are staying aligned one by one instead of appearing in random position as wished
function generate_faces() {
var theLeftSide = document.getElementById("leftSide");
var number_of_faces = 0;
while (number_of_faces < 5){
var top_position = Math.floor(Math.random()*300);
var left_position = Math.floor(Math.random()*300);
newFace = document.createElement("img");
newFace.setAttribute(
"src",
"http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"
);
newFace.style.top = top_position+"px";
newFace.style.left = left_position+"px";
theLeftSide.appendChild(newFace);
number_of_faces = number_of_faces + 1;
}
}
Try this.
<!DOCTYPE html>
<html>
<head></head>
<style>
html, body, leftSide {
width: 100%;
height: 100%;
position: relative;
}
#leftSide {
position: relative;
}
#leftSide img {
position: absolute;
}
</style>
<body onclick="generate_faces()">
<div id="leftSide">
</div>
</body>
</html>
<script>
function generate_faces() {
var theLeftSide = document.getElementById("leftSide");
var number_of_faces = 0;
while (number_of_faces < 5){
var top_position = Math.floor(Math.random()*300);
var left_position = Math.floor(Math.random()*300);
newFace = document.createElement("img");
newFace.setAttribute(
"src",
"http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"
);
newFace.style.top = top_position+"px";
newFace.style.left = left_position+"px";
theLeftSide.appendChild(newFace);
number_of_faces = number_of_faces + 1;
}
}
</script>
I want to change 2 pictures while mouseover. #E.G. once i will mouseover the image will change...it will not change until I mouseover again. how can I do it. Here's my code
function updatePic(){
if(document.getElementById("dpic").src == "images/h1.jpg"){
document.getElementById("dpic").src = "images/h.jpg";
}
if(document.getElementById("dpic").src == "images/h.jpg"){
document.getElementById("dpic").src = "images/h1.jpg";
}
}
UPDATED: I think onmouseenter is the mouse event that you're looking for:
function change() {
var current = document.getElementById("image").getAttribute("src");
if (current == "http://i.imgur.com/HNj6tRD.jpg") {
document.getElementById("image").setAttribute("src", "http://i.imgur.com/3jxqrKP.jpg");
} else {
document.getElementById("image").setAttribute("src", "http://i.imgur.com/HNj6tRD.jpg");
}
}
#image {
width:550px;
height:150px;
position:relative;
background-repeat: no-repeat;
background-size:100% 100%;
}
<img id="image" alt=image src="http://i.imgur.com/HNj6tRD.jpg" onmouseenter="change()">
The may well be a more efficient way but if you just want it to work try your JS like this.
var x = 0;
function rollOver() {
var image1 = "url(images/RIOBtn1.gif)";
var image2 = "url(images/RIO2Rollover.gif)";
var image3 = "url(images/RIO1Rollover.gif)";
var array11 = [image1,image2,image3];
if (x == 0){
document.getElementById("myButton").style.backgroundImage = array11[x];
x++;
} else if (x == 1) {
document.getElementById("myButton").style.backgroundImage = array11[x];
x++;
} else if (x == 2) {
document.getElementById("myButton").style.backgroundImage = array11[x];
x = 0;
}
}
All this does is puts the url's into an array and will continue to loop through them. I done this as a quick so it is a little messy.
In the HTML it is just:
<button id="myButton" onmouseover="rollOver()"></button>
EDIT ***********************************
As you want the src to change, the code is almost the same but changing the source.
var x = 0;
function rollOver() {
var image1 = "images/RIOBtn1.gif";
var image2 = "images/RIO2Rollover.gif";
var image3 = "images/RIO1Rollover.gif";
var array11 = [image1,image2,image3];
if (x == 0){
document.getElementById("myButton").src = array11[x];
x++;
} else if (x == 1) {
document.getElementById("myButton").src = array11[x];
x++;
} else if (x == 2) {
document.getElementById("myButton").src = array11[x];
x = 0;
}
}
<img src="images/HomeBtn1.gif" id="myButton" onmouseover="rollOver()">
$(document).ready(function () {
var strImgSrc1 = "http://virtualrailfan.com/wp-content/uploads/2014/10/200_200_sample.jpg";
var strImgSrc2 = "http://www.eminenstore.com/wp-content/uploads/2012/04/samples.jpg";
$("img").mouseover(function () {
if ($(this).attr("src") === strImgSrc1)
{
$(this).attr("src", strImgSrc2);
}
else
{
$(this).attr("src", strImgSrc1);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img border="1" src="http://www.eminenstore.com/wp-content/uploads/2012/04/samples.jpg" height="300" width="300"/>
J.Hasan, there are easier ways. Can you set one of the images as a background image to a div?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
div {
width:100px;
height:100px;
background: url(image1.jpg);
background-repeat: no-repeat;
background-size:100% 100%;
}
img {
width:100%;
height:100%;
opacity:0;
}
img:hover {opacity:1;}
</style>
</head>
<body>
<div>
<img src="image2.jpg">
</div>
</body>
</html>
If it's a slideshow you want, try this. The beauty of this slideshow is that it does not load all the images when the page loads. Just make a white image (img0.jpg) to set the size of the slideshow in the "slideshowWrap" div.
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="_/js/slides.js"></script>
<script>
function showSlides(){
// SETTINGS
var rotation = 5000; // set rotation speed (milliseconds)
var transition = 1000; // set transition speed (milliseconds)
var path = "_/images/banners/"; // the path to the slides (images)
// SLIDES
var slides = [ // add slides (images) to the slideshow (no comma after last slide)
"img1.jpg",
"img2.jpg",
"img3.jpg",
"img4.jpg"
];
// SLIDESHOW
var slideAmt = slides.length -1;
slideTrn ++;
slideTrn = (slideTrn > 2)?1:slideTrn;
if(firstSlide == true){
// slideCnt = 0
slideCnt ++;
$("#slide1").attr("src", path + slides[slideCnt]); // slide 0
$("#slide1").css({"z-index":"1","opacity":"1"});
slideCnt ++;
slideCnt = (slideCnt > slideAmt)?0:slideCnt;
$("#slide2").attr("src", path + slides[slideCnt]); // slide 1
$("#slide2").css({"z-index":"2",});
firstSlide = false;
}
else{
if(slideTrn == 2){
// slideCnt = 1
$("#slide2").animate({opacity:"1"}, transition, function(){ // slide 1 fades in
$("#slide1").css({"opacity":"0"}); // slide 0
$("#slide2").css({"z-index":"1"}); // slide 1
$("#slide1").css({"z-index":"2"});
slideCnt ++;
slideCnt = (slideCnt > slideAmt)?0:slideCnt;
$("#slide1").attr("src", path + slides[slideCnt]); // slide 2
});
}
else{
// slideCnt = 2
$("#slide1").animate({opacity:"1"}, transition, function(){
$("#slide2").css({"opacity":"0"});
$("#slide1").css({"z-index":"1"});
$("#slide2").css({"z-index":"2"});
slideCnt ++;
slideCnt = (slideCnt > slideAmt)?0:slideCnt;
$("#slide2").attr("src", path + slides[slideCnt]);
});
}
}
var t = setTimeout(showSlides, rotation);
}
function setValues(){
firstSlide = true;
slideCnt = -1;
slideTrn = 0;
manSlide = 0;
}
window.addEventListener("load", setValues);
window.addEventListener("load", showSlides);
</script>
<style>
#slideshowWrap {
width:100%;
min-height:1px;
overflow:auto;
</style>
</head>
<body>
<div id="slideshowWrap" style="position:relative;overflow:hidden;">
<img alt="" class="blank" src="img0.jpg"> <!-- set white image just to set the size of div "slideshowWrap" -->
<img alt="" class="slide" src="_/" id="slide1">
<img alt="" class="slide" src="_/" id="slide2">
</div>
</body>
</html>
Well...i am making a webpage (a pretend e-shop),and i want to put a slideshow with some text beneath each picture..so far i made the code for the picture slideshow
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Slide Show</title>
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}
#imageContainer {
<img id="imgreal" src="pics\bg.jpg" />
min-height: 550px;
document.getElementByID("imgreal").style.backgroundImage = string;
}
a {
text-decoration: none;
padding: 5px;
color: #cccc00;
}
</style>
<script type="text/javascript">
var imgSlide;
var pic = 0;
window.onload = function ()
{
imgSlide = document.getElementById('img');
// preload images
images = new Array();
images[0] = new Image();
images[0].src = "images/img1.jpg" ;
images[1] = new Image();
images[1].src = "images/img2.jpg";
images[2] = new Image();
images[2].src = "images/img3.jpg";
images[3] = new Image();
images[3].src = "images/img4.jpg";
images[4] = new Image();
images[4].src = "images/img5.jpg";
images[5] = new Image();
images[5].src = "images/img6.jpg";
}
function slide()
{
imgSlide.src = images[pic].src;
if(pic < images.length-1) // images.length - 1 can be used here
{
pic++;
}
else
{
pic = 0
}
}
function prev()
{
if(pic == 0)
{
pic = 3;
imgSlide.src = images[pic].src;
}
else
{
pic--;
imgSlide.src = images[pic].src;
}
}
function next()
{
if(pic == images.length)
{
pic = 0;
imgSlide.src = images[pic].src;
}
else
{
pic++;
imgSlide.src = images[pic].src;
}
}
</script>
<DIV ID="SLIDESTEXT"> </DIV>
</head>
<body background="pics\bg.jpg">
<div id="imageContainer"><img id="img" src="images/img1.jpg" alt="image" title="image"/></div>
Previous Next
</body>
</html>
but i can not insert text to slide along with each picture...I'd appreciate some help very much
<div id="imageContainer"><img id="img" src="images/img1.jpg" alt="image" title="image"/></div>
<div><caption>hello</caption></div>
Just put another div under the images, using some kind of tag. You could assign values to it within the JS.