-
Feb 10th, 2012, 11:43 AM
#1
Thread Starter
Frenzied Member
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" />
-
Feb 12th, 2012, 06:41 AM
#2
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>
~ the original bald headed old fart ~
-
Feb 13th, 2012, 02:23 AM
#3
Re: Change Img function Not working
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...
-
Feb 13th, 2012, 03:03 AM
#4
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|