when mouse over image slide is start as gif image - javascript

I have 5 images in a same folder.
1.jpg,2.jpg,3.jpg,4.jpg,5.jpg
I will be show only one image on my webpage.
example
<body>
<img src="1.jpg">
</body>
when visitor is mouse over on image, image will be change to 2.jpg and,3.jpg and....will be stop at 5.jpg.Slideshow is similar as a gif image.
Please How to write javascript or jquery .
Please tell me simplest way.
Thank my dear friend.
I found simalor question in this website.But I can't found complete answer for me.
If this question is duplicate, so sorry
please forgive me for my poor english useage.

You can use jQuery's hover event and pass in the onenter and onout methods. On enter you can call and setup an interval to increment the number of your image, and on out you want to stop it by clearing your interval.
<!DOCTYPE html>
<html>
<head>
<title>image</title>
</head>
<body>
<img id="img" src="1.jpg" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var interval = null;
function changeImage(){
var nextNum = parseInt($('#img').attr('src').replace('.jpg',''), 10) + 1;
// If you want it to repeat back to 1 after 5
nextNum = nextNum > 5 ? 1 : nextNum;
$('#img').attr('src', nextNum+'.jpg');
}
$('#img').hover(
function(){
// Call change Image every 50ms
interval = setInterval(changeImage, 50);
changeImage();
},
function(){
// Stop the call
interval && clearInterval(interval);
}
);
</script>
</body>
</html>​​​​​​​​​​​​

Related

How to add a timer to one picture out of multiple pics on HTML

So I have this HTML code to just show pictures on a browser, every click transitions to the next picture. My question is how can i make Slide13 automatically go to Slide14 after 4 seconds then go back to clicking to transition between pictures? Thanks!!
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Slide1.PNG</title>
</head>
<body onclick="step()">
<img id="image_id" src="" style="width:100%;height:100%">
</body>
<script type="text/javascript">
var images=[
"Slide1.PNG",
"Slide2.PNG",
"Slide3.PNG",
"Slide4.PNG",
"Slide5.PNG",
"Slide6.PNG",
"Slide7.PNG",
"Slide8.PNG",
"Slide9.PNG",
"Slide10.PNG",
"Slide11.PNG",
"Slide12.PNG",
"Slide13.GIF",
"Slide14.PNG",
"Slide15.GIF",
"Slide16.PNG",
"Slide17.PNG",
"Slide18.PNG",
"Slide19.PNG",
"Slide20.GIF",
"Slide21.PNG",
"Slide22.PNG",
"Slide23.PNG",
"Slide24.PNG",
"Slide25.PNG",
"Slide26.PNG",
"Slide27.PNG",
"Slide28.PNG",
"Slide29.PNG",
"Slide30.PNG",
"Slide31.PNG",
"Slide32.PNG",
"Slide33.PNG",
"Slide34.PNG"
];
var index=0;
var imageObjects=images.map(function(img){var imgTag=new Image();imgTag.src=img});
function step(){
document.getElementById('image_id').src=images[(index++)%images.length];
}
step();
</script>
</html>
Add this to your step:
var image = document.getElementById("image_id").src;
if (image=="Slide13.GIF") {
setTimeout(function(){
document.getElementById('image_id').click();}, 4000);
}
It will check on every step the source value of image, when it hits Slide13.GIF it will emulate the click on it after 4 seconds and go to next one.
See below demo, on 3ed image it will click it after 2 seconds.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Slide1.PNG</title>
</head>
<body onclick="step()">
<img id="image_id" src="" style="width:100%;height:100%">
</body>
<script type="text/javascript">
var images=[
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.zYTlTH6b_YYEeNCvZsznjgHaD5%26pid%3DApi&f=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.ZJA-xTrw2bHQaUXA6buoGwHaDt%26pid%3DApi&f=1",
"https://media2.giphy.com/media/YmbxC8Bkj9bZ4yu4Le/source.gif",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.qz01j4K29bmGqCy1hIwGswHaFf%26pid%3DApi&f=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fea490bc9d89afaf7d2431a0374aef65c%2Ftenor.gif%3Fitemid%3D15761601&f=1&nofb=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.wae3QtVQ_QQvkeaQ3alxzgHaEY%26pid%3DApi&f=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.xd0rh27OUOrMUw8_ACG0HwHaDt%26pid%3DApi&f=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.adQHsWv9A37aVRLNDLLlkwHaEK%26pid%3DApi&f=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3nRZ72gyQTUakC-ZbhQ_MQHaHa%26pid%3DApi&f=1"
];
var index=0;
var imageObjects=images.map(function(img){var imgTag=new Image();imgTag.src=img});
function step(){
document.getElementById('image_id').src=images[(index++)%images.length];
var image = document.getElementById("image_id").src;
console.log(image);
if (image=="https://media2.giphy.com/media/YmbxC8Bkj9bZ4yu4Le/source.gif" || image=="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fea490bc9d89afaf7d2431a0374aef65c%2Ftenor.gif%3Fitemid%3D15761601&f=1&nofb=1") {
setTimeout(function(){ document.getElementById('image_id').click(); }, 3000);
}
}
step();
</script>
</html>
EDIT:
It does work with gifs, i Just added two of them, on step 3 and 5. Also if you need more conditions in your if statement separate them with || Like so:
if (image=="https://media2.giphy.com/media/YmbxC8Bkj9bZ4yu4Le/source.gif" ||
image=="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fea490bc9d89afaf7d2431a0374aef65c%2Ftenor.gif%3Fitemid%3D15761601&f=1&nofb=1") {
As seen in edited demo now it will do a click on two gifs, number 3 and 5.
You can add console.log(image); below image variable to see correct image source and use that in condition.
If you have problems with finding paths you can use this as your conditions:
if (image.indexOf("Slide13.GIF") >= 0 || image.indexOf(" other pic ") >= 0")
This will check if image variable of source value contains your wanted image title.

JS slideshow - auto-play interrupting manual turn

i just made a simple slideshow which changes images automatically and also has manual option so you can go forward and backward with images when you want.
Here is the problem: Auto function which changes the images is set to every 3 seconds. But if you for example click to change the slide after 2.5 seconds,the slide will change, but after 0.5 seconds auto function will also change to the next slide.
So i other way,auto function is interrupting manual change, is there any way to reset autofunction after the slideshow is changed manually?
here is the html code:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Chapter 11 - HTML Forms and JavaScript</title>
</head>
<body onload="autoRun()">
<img src="slika1.jpg" id="slideshow" width="700px",
height="350px">
<br/>
<p id="caption">slika1</p>
Next Slide<br/>
Previous Slide
<script src="slideshow.js"></script>
</body>
</html>
JS code:
document.getElementById('buttonNext').onclick=function(){
changeImage(1);
return false;
}
document.getElementById('buttonPrevious').onclick=function(){
changeImage(-1);
return false;
}
var images =["slika1.jpg","slika2.jpg", "slika3.jpg" ];
var caption=["slika1", "slika2", "slika3"];
var imageNumber=0;
var imageLength=images.length -1;
function changeImage(x){
imageNumber+=x;
if(imageNumber > imageLength){
imageNumber = 0;
}
if(imageNumber < 0){
imageNumber = imageLength;
}
document.getElementById('slideshow').src=images[imageNumber];
document.getElementById('caption').innerHTML=caption[imageNumber];
return false;
}
function autoRun(){
setInterval("changeImage(1)", 3000);
}
This is quite easy to do.
1) Add a global variable var timer;
2) At the start of your changeImage() function, add this: autoRun();
3) Change your autoRun() function to this:
function autoRun(){
clearTimeout(timer);
timer = setTimeout("changeImage(1)", 3000);
}
This way the autorun-timer is reset everytime changeImage() is invoked, whether that happens because you manually changed the slide or the autorun-function did.

clearInterval() not working on clock timer with JavaScript

I am very new to JavaScript and programming in general. I am currently in a little pickle with some code that I am playing around with, and I am wondering if anyone can give me some advice.
Background:
The code I am working with is rather simple; There is a clock with the current time running on setInterval to update by the second.
Below the clock there is a button that reads “Stop,” and when pressed, it will clear the Interval and the button will then read “Start.” If the button, which reads “Start” is pressed again, it will continue the clock timer in its current time. So basically this one button toggles the interval of the clock, and depending on which state it is, the button will read “Start” or “Stop.”
W3Schools: JS Timing is where I am originally referencing when creating the code I am working with. This is where I am learning about how setInterval and clearInterval works. I also took some of the code in the examples and adjusted it so I can try to make the clock timer toggle off and on.
Code:
var clock09 = window.setInterval(myTimer09, 1000);
function myTimer09() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("req09").innerHTML =
"<h1>" + t + "</h1>";
}
function toggle10() {
var button = document.getElementById("button10").innerHTML;
if (button == "Stop") {
window.clearInterval(clock09);
document.getElementById("button10").innerHTML = "Start";
} else {
clock09 = window.setInterval(myTimer09, 1000);
document.getElementById("button10").innerHTML = "Stop";
}
}
<span class="center" id="req09"></span>
<button type="button" id="button10" onclick="toggle10()" class="button">Stop</button>
https://jsfiddle.net/dtc84d78/
Problem:
So my problem with the code is that the button toggles from a “Stop” button to a “Start” button, but the clearInterval is not applying to the Variable with the setInterval.
I have googled similar problems in SO, such as this one, and I followed their advice, and still nothing. After hours of trying to figure out, I decided to just copy and paste some example from W3Schools straight to jsFiddle, and that didn’t even work (included in jsfiddle link)?
I am really just going crazy on why anything with clearInterval() is not working with me? Could it be my computer, browser or anything else? I am coming to SO as my last resource, so if anyone can give me some guidance to this problem, I will name my first child after you.
Thank you in advance.
Extra Info:
I am currently working on a Mac desktop, using Komodo to write the code, and I am using Google Chrome to preview the code.
UPDATE:
I mentioned this in the comments, but coming in the code was in an external .js file. The .js file was then linked in between the head tags, and right before the end body tag.
<head>
<meta charset="utf-8" />
<title>Program</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/program-05.css">
<script type="text/javascript" src="scripts/program-05.js">
/* <![CDATA[ */
/* ]]> */
</script>
</head>
<body onload="checkCookies(); setTimeout(function() { func11() }, 5000);">
. . . code for stuff
. . . code for clock timer
. . . code for other stuff
<script type="text/javascript" src="scripts/program-05.js">
/* <![CDATA[ */
/* ]]> */
</script>
</body>
After #Matz mentioned to stick the clock timer js code in the head section, the code worked great! This is what it looks like so far in the head section.
<head>
<meta charset="utf-8" />
<title>Program</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/program-05.css">
<script type="text/javascript" src="scripts/program-05.js">
/* <![CDATA[ */
/* ]]> */
</script>
<script>
///*
var clock09 = window.setInterval(myTimer09, 1000);
function myTimer09() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("req09").innerHTML =
"<h1>" + t + "</h1>";
}
function toggle10() {
var button = document.getElementById("button10").innerHTML;
if (button == "Stop") {
window.clearInterval(clock09);
document.getElementById("button10").innerHTML = "Start";
} else {
clock09 = window.setInterval(myTimer09, 1000);
document.getElementById("button10").innerHTML = "Stop";
}
}
//*/
</script>
</head>
Though this works great, I now want to figure out as to why the clock timer js code works when it is directly in the head section as compared to keeping it in the external .js file (with the external file being linked in the doc)? What can I do to make it work within the external file?
Problem:
This is because the default Load Type is set to onLoad which is wrapping your javascript code in window.onload = function() {} hence the scope of your function was getting limited to the onload function and it wasn't available outside:
Solution:
Click on the Javascript setting in the Javascript section of the Fiddle, change it to No wrap - in body and it will work since this will now place your Javascript code in the body tag.
Additional Note:
Your code is also working via StackOverflow snippet:
/*My Problem*/
var clock09 = window.setInterval(myTimer09, 1000);
function myTimer09() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("req09").innerHTML =
"<h1>" + t + "</h1>";
}
function toggle10() {
var button = document.getElementById("button10").innerHTML;
if (button == "Stop") {
window.clearInterval(clock09);
document.getElementById("button10").innerHTML = "Start";
} else {
clock09 = window.setInterval(myTimer09, 1000);
document.getElementById("button10").innerHTML = "Stop";
}
}
/*W3S Problem*/
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML =
d.toLocaleTimeString();
}
<!-- My Problem -->
<span class="center" id="req09"></span>
<button type="button" id="button10" onclick="toggle10()" class="button">Stop</button>
<hr>
<hr>
<!-- W3S Problem -->
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
Recommendation
Separation of concerns
I'll recommend you moving your javascript code in the external file and later include them in your HTML using script tag. So for example, you moved your code in app.js then include that in your HTML as:
<!-- make sure the path here is relative to the current HTML -->
<script src="./app.js"></script>
One way to fix the timer starting and stopping is to move the javascript in between the HEAD tags so the functions are declared by the time the html loads. I made this work:
<html>
<head>
<title>Stuff</title>
<script >
var clock09 = window.setInterval(myTimer09, 1000);
.... your code
</script>
</head>
<body>
<span class="center" id="req09"></span>
<button type="button" id="button10" onclick="toggle10()" class="button">Stop</button>
</body>
</html>
You are declaring a new date variable in the myTimer09 function, so every time it is called, it shows the current time. You should declare the time outside the function, then pass it to the function. When you stop the timer, you should save the time value so that you can restart with that value.
This seems to be an issue with JSFiddle.
The onclick handler is looking for window.toggle10 which isn't actually defined (check for the error in the console).
It seems that this is something others have seen with JSFiddle
I've C&Ped your code in to a JSbin and it works as described!

How to make a simple slideshow in JS?

I'm trying to make a simple slideshow with JavaScript.
Here is my index.html
<body>
<h1>Slideshow example</h1>
<button onclick="slideshow.timer()">Next slide</button>
<div id="container"></div>
<script src="slide.js"></script>
</body>
And here is slide.js
var slideshow = {
sliderImages: ["img/img1.png", "img/img2.png"],
timer: function() {
this.sliderImages.forEach(function(img) {
var container = document.getElementById('container');
var image = document.createElement('img');
container.appendChild(image);
image.src= img;
})
}
}
If I click the "next slide" button, I see both of the images. It loops through the whole array. How could I make it loop through the array just once, when clicking the button?
I tried adding container.innerHTML = ''; so that the previous image would be removed when adding the next image, but that resulted it showing immidietly the image in sliderImages[1]. Am I approaching this whole thing wrong?
I updated your code. It is not the best way to write it but I just modified your example to show you the problem. The problem is your timer function which is just going through all the elements in the array at once. Instead what you may want to do is add some delay.
var slideshow = {
sliderImages: ["img/img1.png", "img/img2.png"],
currentImgIndex: 0,
timer: function() {
if (this.currentImgIndex < this.sliderImages.length ) {
var image = document.getElementById('img');
image.src= this.sliderImages[this.currentImgIndex];
this.currentImgIndex++;
setTimeout(function (){ slideshow.timer()}, 2000)
} else {
alert("no more images");
}
}
}
<body>
<h1>Slideshow example</h1>
<img id="img"/>
<button onclick="slideshow.timer()">Next slide</button>
<div id="container"></div>
<script src="slide.js"> </script>
</body>
If you are going to change the images only when the button is clicked, you don't need the forEach loop. If you are going to change images without user interaction then you need the loop but you need setInterval also.

How to change image-background after sometime?

HI everybody
i need to know if there are a way to change the background image after a specific time like 10 sec or 30 sec...etc.
you know like yahoo Login mail "it's changing the background daily!!"
if there is a way using JQuery or CSS or html or any other thing ,please tell me
you can make it with javascript function
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
imageID++;
}else{if(imageID==2){
document.getElementById("myimage").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='300px' height='250px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div>
</body></html>
try this one! :)
You could probably achieve it using CSS3 webkit animations but the trade off is it will only work in the likes of Chrome and Safari but you won't require any JavaScript at all.
The jQuery suggestion above is your best bet here I guess.
You could use javascript's setTimeout or setInterval to do this, or look into JQuery's Timers
EDIT:
With JQuery, this will change the background after 1 sec:
$(window).oneTime(1000, function() {
// change your background image here
});
You could do it with a function and setTimeout:
function changeBG()
{
var body = document.getElementsByTagName("body")[0];
body.style.backgroundImage = "url(myimage.gif)";
setTimeout("changeBG",30000); // Change every 30 seconds
}
window.onload = changeBG;
(untested so it might need a tweak or 2)
If you're using the Prototype library:
var changeBackground = function() {
$$('body').first().setStyle({
backgroundImage: 'newImage.jpg'
});
};
changeBackground.delay(15);

Categories