updating javascript function without realoding - javascript

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>

Related

How to click through images stored in var in javascript

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>

slideshow in html using javascript.. image changes but not displayed properly

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.

JavaScript: Function to change images with onClick not working.

I have 6 pictures of the lovely Serena Williams, I've been researching how to change the images every time I click on them. However the code is not working, please help me identify whether I've made a logic or syntax error:
<html>
<head>
<title>SerenaWilliams</title>
</head>
<body>
<img src="http://1.bp.blogspot.com/-hGUyOlpoeB0/UROyeHgMXcI/AAAAAAAAAZ4/L32zLAQvQj0/s1600/Hot-Serena-Williams+_sexy+16.jpg" id="serenaGallery" onclick="changeImage" />
</body>
<script type="text/javascript">
function changeImage() {
var currentImage = document.getElementById("serenaGallery").src;
var image1 = "http://1.bp.blogspot.com/-hGUyOlpoeB0/UROyeHgMXcI/AAAAAAAAAZ4/L32zLAQvQj0/s1600/Hot-Serena-Williams+_sexy+16.jpg";
var image2 = "http://usatthebiglead.files.wordpress.com/2011/04/serena-williams-is-big-boned.jpg";
var image3 = "http://www.strangecosmos.com/images/content/109963.jpg";
var image4 = "http://1.bp.blogspot.com/-HiJxcIjMmFg/UWo9JtbfCEI/AAAAAAAAF1g/aUU42F3V9Ic/s1600/Serena+Williams+Hot+2013+04.jpg";
var image5 = "http://mystarclub.com/wp-content/uploads/2012/11/Serena-Williams-is-a-Bikini-Babe.jpg";
var image6 = "http://1.bp.blogspot.com/-vCsx4sswzeM/UA5GtbEwJ1I/AAAAAAAAACE/tMiP_p-0rB0/s1600/serena+williams+tennis+ball+in+butt.jpg";
if (currentImage==image1){ currentImage=image2; }
if (currentImage==image2){ currentImage=image3; }
if (currentImage==image3){ currentImage=image4; }
if (currentImage==image4){ currentImage=image5; }
if (currentImage==image5){ currentImage=image6; }
else { currentImage=image1; }
}
</script>
</html>
First of all, you need to modify the onclick attribute so it will actually execute the function:
onclick="changeImage()"
The command
var currentImage = document.getElementById("serenaGallery").src;
just stores the source attribute of the image in a variable; it doesn't reference it.
Also, you have to change all if statements to else if or the function will change image1 to image2, then to image3, etc.
This would work:
var currentImage = document.getElementById("serenaGallery");
...
if (currentImage.src == image1){ currentImage.src=image2;}
else if (currentImage.src == image2){ currentImage.src=image3;}
...
Lastly, using an array for the image sources would allow you to condense the if statements into a single for loop. Not really needed for six images, but better if you want to add more.

JavaScript trying to change image

There are four files at the same folder directory
- 1.jpg
- 2.jpg
- index.html
- 1.js
I am hoping to write the code so it will load 1.jpg at first, but it will load 2.jpg next
The JavaScript is
var img = new Image(); // Create new img element
img.src = '2.jpg';
var getElementIMG = document.getElementById("imageid");
getElementIMG.src = img.src;
And the HTML is
<img id="imageid" src="1.jpg">
but when the page finishes loading it still displays 1.jpg
Try this:
<!doctype html>
<html>
<body>
<img id="imageid" src="1.jpg">
<script>
var getElementIMG = document.getElementById("imageid");
getElementIMG.src = '2.jpg';
</script>
</body>
</html>
If your Javascript is on the header you need to specify when do you want the image to be replaced, which is when it exists.
After the window has been loaded:
window.onload = function () {
document.getElementById("imageid").src = "2.jpg";
}
Demo: http://jsfiddle.net/5a6Jx/2/
Or you can just stick the script at the end of the page:
<img id="imageid" src="1.jpg" />
<script type="text/javascript">
document.getElementById("imageid").src = "2.jpg";
</script>
On both ways your image will be there already, so you can manipulate it.
<head> <script type="text/javascript" src="1.js"></script> </head>
The script is loaded in the head and executed immediately. There is no element '#imageid', so document.getElementById returns null. An error is probably thrown on the getElementIMG.src = img.src; line. If something doesn't work, one of the first things you should do is check for errors in the debugger/console. (F12 in most browsers.)
Later on the page, the browser sees an image. It displays it.
What you want to do is load the script after the image. If you put it at the end of the page, the <img> will be seen by the browser, and only after that, its src will be changed.
You will have to make your move when the document and your image are both loaded.
window.onload = function () {
var img = new Image();
img.src = '2.jpg';
img.onload = function() {
var getElementIMG = document.getElementById("imageid");
getElementIMG.src = img.src;
}
}

JavaScript to change images

I have set of images named as img1, img2, img3, img4,......., imgx. So, I want to code a JavaScript to display an image img1 at document.onload() and on first click image to be changed to img2 next on second click the image to be changed at img3 and then same to the next image on every NEXT button click. In this manner I need even PREVIOUS button to go back to the previously viewed images.
How to implement this?
var currentImage = 1;
window.onload = function() {
showImage();
};
document.getElementById("next").onclick = function() {
currentImage++;
showImage();
}
function showImage() {
document.getElementById("image").src = "img" + currentImage + ".jpg";
}
These are the basics and should help you get started. If you need help implementing the rest, ask us what you want to do specificially and what you tried. Hint, you'll need to handle the case where there is no "next" image to show. Do you want it to come back to the beggining or just not work?
<script type="text/javascript">
var images = new Array("img/image1.jpg", "img/image2.jpg", "img/image3.jpg");
var cur_image = 0;
function goNextImage() {
var img = document.getElementById('image');
cur_image++;
if (cur_image == images.length) {
cur_image = 0;
}
img.src = images[cur_image];
}
</script>
<img src="img/image1.jpg" id="image" onclick="goNextImage()" />

Categories