Change Img function Not working
I am trying to implement this code to get my page to change a picture based on timer.
I am just learning and do not fully understand the whole piece of code, so if any can point me in the right direction i would appreciate it
HTML Code:
<script type="text/javascript">
<!--
if (document.images) { // Preloaded images
demo1 = new Image();
demo1.src = "http://node_charts_production.s3.amazonaws.com/cc9dcdc0389a7ff2c8af40ff6007e51c.png";
demo2 = new Image();
demo2.src = "http://node_charts_production.s3.amazonaws.com/85b6d5036c50481eb6f020372d4765ec.png";
}
function timeimgs(numb) { // Reusable timer
thetimer = setTimeout("imgturn('" +numb+ "')", 1000);
}
function imgturn(numb) { // Reusable image turner
if (document.images) {
if (numb == "2") { // This will loop the image
document["demo"].src = eval("demo2.src");
timeimgs('2');
}
else { document["demo"].src = eval("demo" + numb + ".src");
timeimgs(numb = ++numb);
}
}
}
// -->
</script>
Here is the img I am trying to change
HTML Code:
<img src="http://node_charts_production.s3.amazonaws.com/85b6d5036c50481eb6f020372d4765ec.png"name="demo" alt="Mortgage Rate Chart" />
Re: Change Img function Not working
Hi there billboy,
When you see "<!--", "if(document.images)" and the evil "eval" in a script, you may be pretty sure that it is outdated. ;)
Have a look at this slightly more modern version...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://node_charts_production.s3.amazonaws.com/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>swap image example</title>
<style type="text/css">
body {
background-color:#f0f0f0;
}
#demo {
display:block;
margin:30px auto 0;
box-shadow:#333 5px 5px 10px;
}
</style>
<script type="text/javascript">
/****** these values may be edited ******/
var speed=4000; /* image change rate */
var repeats=4; /* number of changes */
/****************************************/
var count=0;
var preloads=[];
function preload(){
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
preload('85b6d5036c50481eb6f020372d4765ec.png','cc9dcdc0389a7ff2c8af40ff6007e51c.png');
function swapImage(){
obj=document.getElementById('demo');
obj.src=(obj.src==preloads[0].src)?preloads[1].src:preloads[0].src;
if(count++==repeats-1) {
alert("That's it.\n\nTime's up."); /* the alert can, of course, be removed */
return;
}
setTimeout(function(){swapImage();},speed);
}
window.addEventListener?
window.addEventListener('load',function(){setTimeout(function(){swapImage();},speed)},false):
window.attachEvent('onload',function(){setTimeout(function(){swapImage();},speed)});
</script>
</head>
<body>
<div>
<img id="demo" src="85b6d5036c50481eb6f020372d4765ec.png" alt="Mortgage Rate Chart">
</div>
</body>
</html>
Re: Change Img function Not working
Quote:
When you see "<!--", "if(document.images)" and the evil "eval" in a script, you may be pretty sure that it is outdated.
...not necessarily? eval() has valid applications (this is not one of them), comment tags are unnecessary but still appear frequently, and document.images is not obsolete...
Re: Change Img function Not working
Hi there SambaNeko,
what you say is true. ;)
But when you see them collectively in a script, you may be pretty sure that it is outdated. :D
