i tried this code.. but when the image changes it is not displayed properly..
alt image(a small broken image is displayed)..
i tried putting var step=1; before the function as global variable.. But still it does not work.. I even tried document.images.slide.src = "images/pentagg.jpg";
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
function slideit()
{
var step=1;
document.images.slide.src = eval("image"+step+".src")
if(step<2)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
</script>
</body>
There's something wrong you did. You made the step variable available inside slideit() function only by declaring it as a local variable. So everytime the function is being called using setTimeOut a new step variable is created. That causes never to change your initial image.
And I prefer this as the appropriate way to call the slideit function using setTimeOut
setTimeout(function(){slideit()},2500);
That's it. Here's the full code :
HTML :
<img src="http://picpuddle.com/wp-content/uploads/2014/06/cute-cartoons-21.jpg" width="500" height="300" name="slide" />
javaScript :
var step=1;
var image1 = new Image();
image1.src = "http://picpuddle.com/wp-content/uploads/2014/06/cute-cartoons-21.jpg";
var image2 = new Image();
image2.src = "http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg";
function slideit()
{
//This looks better though
//document.getElementsByName("slide")[0].src = eval("image"+step+".src");
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout(function(){slideit()},2500);
}
slideit();
jsFiddle
you can't pass the image variable as an argument like that. it's taking a string called "image1.src".
try putting them in an array then getting the index with your step variable.
Related
I have a javascript loop that changes the image of a specified tag every x seconds, but when I modify it to only run when I click a button, it does nothing.
The javascript code:
<script type="text/javascript">
var step = 1
var image1 = new Image()
image1.src = "img1.jpg"
var image2 = new Image()
image2.src = "img2.jpg"
var image3 = new Image()
image3.src = "img3.jpg"
function slideit() {
if (!document.images) return
document.images.slide.src=eval("images"+step+".src")
if (step < 3)
step++
else
step=1
}
//-->
</script>
The button code:
<input type="button" name="btnnext" value="Next Picture" onclick="slideit" />
I have tried changing to onclick="slideit()" but that states
"Uncaught ReferenceError: images1 is not defined"
I am not sure where to go from here, any help would be appreciated.
It should be onclick='slideit()'
The reason you're getting Uncaught ReferenceError: images1 is not defined is because it's trying to eval('images1.src') and (I don't think) there's such a variable in your code as window.images1, window.images2 or window.images3.
What you probably want instead is to define an array of srcs, and then get srcsArray[step] and use that as your new src for your document.images.slide.
As #patrick-evans said though, you could probably fix it by changing your eval to eval('image' + step + '.src').
I hope this helps.
I need to on the click of the first image, for it to switch to the second image, and then on the click of that to switch to the third image and so on and so on.
I have this so far, and it only goes to the second image and stops there, or goes instantly to the third...
<img id="imgClickAndChange" class="art_shop" name="pic" src="images/edited_images/1.jpg" style="display: none;" onClick="changeImage();changeImageAgain();">
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src = "images/edited_images/1.jpg")
{
document.getElementById("imgClickAndChange").src = "images/edited_images/2.jpg";
}
}
</script>
<script language="javascript">
function changeImageAgain() {
if (document.getElementById("imgClickAndChange").src == "images/edited_images/2.jpg")
{
document.getElementById("imgClickAndChange").src = "images/edited_images/3.jpg";
}
}
</script>
I have also this example, which i pulled from another thing i did a while ago. It's an image slider, with the images already stored in the header, and they load the new image in every X seconds. Is there any way to modify this to load the next image on the click of a button (or the image itself) as opposed to it being timed? Either solution would work. Thanks
<head>
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/edited_images/1.jpg" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/edited_images/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/edited_images/3.jpg"
slideimages[3] = new Image()
slideimages[3].src = "images/edited_images/4.jpg"
</script>
</head>
<img id="imgClickAndChange" class="art_shop" name="pic" src="images/edited_images/1.jpg" style="display: none;" onClick="changeImage();changeImageAgain();">
<script type="text/javascript">
//variable that will incement through the images
var step=0
function slideit(){
if (!document.images)
return
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<1)
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<2)
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<3)
step++
else
step=0
setTimeout("slideit()",1000)
}
slideit()
</script>
You can make it much simpler. Also I would not recommend preloading the images as it slows down your pageload.
Try this:
EDIT: without looping
<img id="imgClickAndChange" class="art_shop" name="pic" onClick="changeImage()">
<script>
// image sources in array. image[0] will have first image src, image[3] will have last src
var images = [
"images/edited_images/1.jpg",
"images/edited_images/2.jpg",
"images/edited_images/3.jpg",
"images/edited_images/4.jpg"
]
var step = 0;
changeImage(); // set first image src after page loads
function changeImage() {
// exit if no images, or step = number of items in array (4)
if (typeof images == "undefined" || step == images.length) return;
document.getElementById('imgClickAndChange').src = images[step];
step++;
}
</script>
I want to put a simple slider on orchard. I have write the code and It is working on my computer. but when I add it to orchard CMS it doesn't work. can any one help me please. the asp version is 4.5 and iis 7.5 windows server 2008. here is the code:
<html>
<head>
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
var slidenum=2
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "emkanat1.JPG" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "emkanat2.JPG"
slideimages[2] = new Image()
slideimages[2].src = "emkanat3.JPG"
</script>
</head>
<body>
<div style="display: block; width:940px; height:356px;">
<img src="emkanat1.JPG" id="slide" width="940px" height="356px" />
<div >
<img style="position:absolute; margin-top: 150px; margin-left: 10px;" src=left.jpg onclick="prev()"/>
<img style="position:absolute; margin-top: 150px; margin-left: 890px;" src=right.jpg onclick="next()"/>
</div>
</div>
<script type="text/javascript">
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<slidenum)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
function next(){
if (!document.images)
return
if (step<slidenum)
step++
else
step=0
document.getElementById('slide').src = slideimages[step].src
}
function prev(){
if (!document.images)
return
if (step>0)
step--
else
step=slidenum
document.getElementById('slide').src = slideimages[step].src
}
slideit()
</script>
</body>
</html>
You are passing "slideit()" as your first parameter to setTimeout, there are two ways this can go, you can have an implied eval where slideit() gets executed and then the result is passed to setTimeout, or you can have the string itself passed to setTimeout, neither are what you want. You should just pass the function as the first parameter of setTimeout.
change
setTimeout("slideit()",2500)
to
setTimeout(slideit,2500)
and you should be fine.
<p align="center">
<button onclick="slideit()">Run the loop</button>
<!-- Start Weather Image Loop -->
<img src="firstcar2.gif" name="slide" width="900" height="500" />
<script type="text/javascript">
<!--
var imagevis1=new Image()
imagevis1.src="http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg"
var imagevis2=new Image()
imagevis2.src="http://www.ssec.wisc.edu/data/us_comp/big/image2.jpg"
var imagevis3=new Image()
imagevis3.src="http://www.ssec.wisc.edu/data/us_comp/big/image3.jpg"
var imagevis4=new Image()
imagevis4.src="http://www.ssec.wisc.edu/data/us_comp/big/image4.jpg"
var imagevis5=new Image()
imagevis5.src="http://www.ssec.wisc.edu/data/us_comp/big/image5.jpg"
var imagevis6=new Image()
imagevis6.src="http://www.ssec.wisc.edu/data/us_comp/big/image6.jpg"
var imagevis7=new Image()
imagevis7.src="http://www.ssec.wisc.edu/data/us_comp/big/image7.jpg"
var imagevis8=new Image()
imagevis8.src="http://www.ssec.wisc.edu/data/us_comp/big/image8.jpg"
var imagevis9=new Image()
imagevis9.src="http://www.ssec.wisc.edu/data/us_comp/big/image9.jpg"
var imagevis10=new Image()
imagevis10.src="http://www.ssec.wisc.edu/data/us_comp/big/image10.jpg"
var imagevis11=new Image()
imagevis11.src="http://www.ssec.wisc.edu/data/us_comp/big/image11.jpg"
var imagevis12=new Image()
imagevis12.src="http://www.ssec.wisc.edu/data/us_comp/big/image12.jpg"
var imagevis13=new Image()
imagevis13.src="http://www.ssec.wisc.edu/data/us_comp/big/image13.jpg"
var imagevis14=new Image()
imagevis14.src="http://www.ssec.wisc.edu/data/us_comp/big/image14.jpg"
var imagevis15=new Image()
imagevis15.src="http://www.ssec.wisc.edu/data/us_comp/big/image15.jpg"
var imagevis16=new Image()
imagevis16.src="http://www.ssec.wisc.edu/data/us_comp/big/image16.jpg"
var imagevis17=new Image()
imagevis17.src="http://www.ssec.wisc.edu/data/us_comp/big/image17.jpg"
var imagevis18=new Image()
imagevis18.src="http://www.ssec.wisc.edu/data/us_comp/big/image18.jpg"
var imagevis19=new Image()
imagevis19.src="http://www.ssec.wisc.edu/data/us_comp/big/image19.jpg"
var imagevis20=new Image()
imagevis20.src="http://www.ssec.wisc.edu/data/us_comp/big/image20.jpg"
var imagevis21=new Image()
imagevis21.src="http://www.ssec.wisc.edu/data/us_comp/big/image21.jpg"
var imagevis22=new Image()
imagevis22.src="http://www.ssec.wisc.edu/data/us_comp/big/image22.jpg"
var imagevis23=new Image()
imagevis23.src="http://www.ssec.wisc.edu/data/us_comp/big/image23.jpg"
var imagevis24=new Image()
imagevis24.src="http://www.ssec.wisc.edu/data/us_comp/big/image24.jpg"
var imagevis25=new Image()
imagevis25.src="http://www.ssec.wisc.edu/data/us_comp/big/image24.jpg"
//-->
</script>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("imagevis"+step+".src")
if (step<25)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
if (step<25)
{
setTimeout("slideit()",100)
}
else
{
setTimeout("slideit()",1500)
}
}
slideit()
//-->
</script>
<!-- End Weather Image Loop -->
</p>
I am trying to load this script with the click of a button, but when I place the lower script in a function, and load it with the button, it does not start the loop. For whatever reason, it sometimes says that slideit() is not defined, or that the first image (imagevis1) is not defined.
Thank you for your help!
The reason why yours is not working is the fact you never removed the slide() call which starts it off. You would need to remove that and the code would work with the button click.
setTimeout("slideit()",1500)
}
}
slideit() <-- REMOVE THIS LINE
//-->
</script>
<!-- End Weather Image Loop -->
But the code has other issues. I wrote this rather quick, but this is a little better than what you have. The preload could be done differently if they are not loading in time.
HTML :
<img src="" id="slideshow" />
<button id="btn">Animate</button>
JavaScript:
(function () {
var srcStart = "http://www.ssec.wisc.edu/data/us_comp/big/image",
srcEnd = ".jpg",
start = 1,
end = 24,
current = start,
shortDelay = 100,
longDelay = 1500,
elem = document.getElementById("slideshow"),
btn = document.getElementById("btn"),
isPreload = true;
function next() {
var delay = shortDelay;
elem.src = srcStart + current + srcEnd;
current++;
if(current!==end) {
var img = new Image();
img.src = srcStart + (current+1) + srcEnd;
}
if(current>end) {
current = start;
delay = longDelay;
}
window.setTimeout(next,delay);
}
btn.onclick = next;
})();
Example:
http://jsfiddle.net/L7qUY/
Make sure you don't have the function slideit() defined inside your wrapper function.
//variable that will increment through the images
var step=1;
function slideit(){
//if browser does not support the image object, exit.
if (!document.images) {
return;
}
document.images.slide.src=eval("imagevis"+step+".src");
if (step<25) {
step++;
} else {
step=1;
}
//call function "slideit()" every 2.5 seconds
if (step<25) {
setTimeout("slideit()",100);
} else {
setTimeout("slideit()",1500);
}
}
var button = document.getElementById("YourButtonID");
button.addEventListener("click", slideit);
You need the image tag named slide because your javascript uses that attribute to target the image tag to update document.images.slide.src=eval("imagevis"+step+".src");.
Also make sure that your setTimeout methods have the times you intend. Your comment says you want to call slideit() every 2.5 seconds but your calls are using 100 and 1500 milliseconds which is .1 and 1.5 seconds respectively.
I'm guessing you are trying to write an animation or something.
html
<img src='http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg' id="weatherImg" width="400" />
<input type="button" id="animate" onclick="animate()" value="tiempo" />
JavaScript
currImg=0;
images = [
"http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image2.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image3.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image4.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image5.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image6.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image7.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image8.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image9.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image10.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image11.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image12.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image13.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image14.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image15.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image16.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image17.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image18.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image19.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image20.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image21.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image22.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image23.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image24.jpg"
//,"http://www.ssec.wisc.edu/data/us_comp/big/image25.jpg"
];
aniClock = 0;
animate = function(){
clearTimeout(aniClock);
if (typeof images[currImg] == "undefined"){
//alert('ho');
//return false;
currImg = 0;
}
document.getElementById("weatherImg").src = images[currImg];
currImg++;
aniClock = setTimeout(function(){animate();},300);
}
Example
http://jsfiddle.net/chepe263/bVye6/
Im trying to build an embedded web server with Nano WiReach SMT
So far i have wrote this code
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function swapImage() {
var val1 = "~Value1~"
val1=Number(val1);
intImage = val1;
switch (intImage) {
case 0:
IMG1.src = "off.jpg";
return(false);
case 1:
IMG1.src = "on.jpg";
return(false);
}
setTimeout("swapImage()",500)
}
swapImage()
</SCRIPT>
</HEAD>
<BODY>
<body onload="swapImage()">
<IMG id="IMG1" name="IMG1" src="on.jpg">
</BODY>
</HTML>
Through some AT+i commands to the Nano WiReach SMT i can change the ~Value1~ content, and by sending "0" and "1" i cant change the images. Now in order to change the image i have to always reload the page through the browser..
I wonder if there is anyway to do that automatic in some specified time period or even better when the Value1 changes without reloading the hole page..
Maybe put it on a div and reload just the div content but i dont know how..
One last thing..searching the web i found something similar with jquery..i cant use jquery cause the libs are very big for my uC..
Thank you
Are you missing the following?
var IMG1 = window.document.getElementById("IMG1");
Also does your function need a name?
!function() {
var val1 = "~Value1~"
val1=Number(val1);
var intImage = val1;
var IMG1 = window.document.getElementById('IMG1');
switch (intImage) {
case 0:
IMG1.src = "off.jpg";
return(false);
case 1:
IMG1.src = "on.jpg";
return(false);
}
setTimeout(arguments.callee, 500);
}();
It's better to send a function to setTimeout instead of a string, otherwise
the string eval is performed on the string in the global context - not always what you want.
I haven't tested this code, and not sure about your platform, but you'll probably want to preload the images and in addition reference the element in the body by id to change it's source.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
var IMG1 = new Image();
IMG1.src = "on.jpg";
var IMG2 = new Image();
IMG2.src = "off.jpg";
function swapImage() {
var oIMG = document.getElementById("IMG1");
var val1 = "~Value1~"
val1=Number(val1);
intImage = val1;
switch (intImage) {
case 0:
oIMG.src = IMG2.src;
return(false);
case 1:
oIMG.src = IMG1.src;
return(false);
}
setTimeout("swapImage()",500)
}
</SCRIPT>
</HEAD>
<BODY>
<body onload="swapImage()">
<IMG id="IMG1" name="IMG1" src="on.jpg">
</BODY>
</HTML>
Before we examine modules and inserting things with ~, etc. Let's make sure we can do a base script that works just fine. The following you can load in a normal browser, and it swaps the image back and forth every 500ms. setInterval causes the function to be called every 500ms, setTimeout will just call it once. Use which ever you want.
See if you can get this base script working, as it should, before trying other stuff. Ask any questions if you have any about it.
<!DOCTYPE html>
<html>
<head>
<title>Image Test</title>
<script language="javascript" type="text/javascript">
var IMG1 = new Image(); // create new image
var IMG2 = new Image(); // crete another new image
function init() {
IMG1.src = "on.jpg"; // preload on.jpg
IMG2.src = "off.jpg"; // preload off.jpg
var oIMG = document.getElementById("oIMG"); // grab a reference to img in doc with id of oIMG
oIMG.src = IMG1.src; // initially set the source of oIMG to IMG1's source
oIMG.toggled = 1; // initially give oIMG a toggled state of 1 (meaning on)
setInterval("swapImage()",500); //start time out for swapping image
}
function swapImage() {
var oIMG = document.getElementById("oIMG"); // grab a reference to img in doc with id of oIMG
switch (oIMG.toggled) { //switch based on the oIMG toggle state
case 0: //if off, turn it on
oIMG.src = IMG1.src;
oIMG.toggled = 1;
break;
case 1: //if on, turn it off
oIMG.src = IMG2.src;
oIMG.toggled = 0;
break;
}
}
window.onload = init;
</script>
</head>
<body>
<img id="oIMG" src="" />
</body>
</html>