Image Timer [Archive] - CodingForums.com

View Full Version : Image Timer

craig

11-25-2002, 05:08 PM

I am trying to make an image show then stop showing.
I am trying to use:
document.image.src
This is the code.

<HTML>
<HEAD>


<script language="javascript">

</script>
</HEAD>

<BODY onload="setTimeout('blkhlpntr()',5000)" BGCOLOR="#FFFFFF">


<DIV id="blkhlpntr" STYLE="position:absolute; top:70px; left:840px; width:90px; border-width:0; visibility:visible; z-index:1">
<img src="http://www.proamrodeo.com/gif/menu/blackholepointer.gif" width="15" height="48">
</DIV>

</BODY>
</HTML>

This should load two(2) of the images to test it anyway.
I keep getting an error message that document.image.src is null.

Mr J

11-25-2002, 07:29 PM

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="javascript">

</script>
</HEAD>

<BODY onload="setTimeout('blkhlpntr()',5000)" BGCOLOR="#FFFFFF">


<DIV id="blkhlpntr" STYLE="position:absolute; top:70px; left:640px; width:90px; visibility:visible; z-index:1">
<img src="http://www.proamrodeo.com/gif/menu/blackholepointer.gif" width="15" height="48">
</DIV>

</BODY>
</HTML>

guzman

02-02-2010, 03:03 AM

Hi MrJ,
Your answer to Craig was a great help to me so thanks to you both.
I was wanting to make an image appear on a page after 20 seconds or so and then disappear after a while.
Your code allowed me to do that by inverting the hidden / visible attributes.
Now I'd like to to this with several images appearing in different places on the page. I thought of duplicating the script and renaming blkhlpntr to blkhlpntr2 in the second one, and changing position and timeout values.
My problem is that my Html editor cannot accept two body onload codes at thee same time such as :
<BODY onload="setTimeout('blkhlpntr()',40000)" BGCOLOR="#FFFFFF">
and <BODY onload="setTimeout('blkhlpntr2()',50000)" BGCOLOR="#FFFFFF">
so this doesn't work...
Can I combine several setTimeout instructions into one BODY onload line?
I expect there's a way to do this but am a poor coder and haven't found how...
Can you help ?
Thx
Guzman

gusblake

02-02-2010, 01:08 PM

The best way is to put all the setTimeout calls in a function, which you then call onload.

It's more sensible in this case though to use setInterval, because there's no need for another call within the function itself.

Have a look at this example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var imageIntervals={};

function toggleImage(id) {
var img=document.getElementById(id);
var vis=img.style.visibility;
img.style.visibility=(vis=="hidden"?"visible":"hidden");
}

function setImageInterval(id, ms) {
//id is the id of an element (doesn't even have to be an image)
imageIntervals[id]=setInterval("toggleImage('"+id+"')", ms);
}

window.onload=function() {
setImageInterval("a", 10000);
setImageInterval("b", 500);
setImageInterval("c", 6000);
setImageInterval("d", 17000);
setImageInterval("e", 1000);
//add all the ones you want in here
//you can also put anything else you need onload in here, such as
//loadDropDownMenu();
}

//to stop an interval use
//clearInterval(imageIntervals.id);
//eg. clearInterval(imageIntervals.a);
//or clearInterval(imageIntervals["d"]);
</script>
</head>
<body>
<img id="a" src="images/img01.gif" alt="a">
<img id="b" src="images/img02.gif" alt="b">
<img id="c" src="images/img03.gif" alt="c" style="visibility:hidden">
<img id="d" src="images/img04.gif" alt="d">
<div id="e">text</div>
</body>
</html>

Edit - a quick modification to setImageInterval. It now accepts a limit parameter:
negative or undefined: never stops
0: never starts
positive: stops at limit

var imageIntervals={};
var imageLimit={};
var imageCount={};

function toggleImage(id) {
if(imageCount[id]<imageLimit[id]||imageLimit[id]<0) {
var img=document.getElementById(id);
var vis=img.style.visibility;
img.style.visibility=(vis=="hidden"?"visible":"hidden");
imageCount[id]++;
}

else {
clearInterval(imageIntervals[id]);
}
}

function setImageInterval(id, ms, limit) {
imageIntervals[id]=setInterval("toggleImage('"+id+"')", ms);
imageLimit[id]=(limit!==undefined?limit:-1);
imageCount[id]=0;
}

window.onload=function() {
setImageInterval("a", 10000, 5);
setImageInterval("b", 500, 10);
setImageInterval("c", 600, 0);
setImageInterval("d", 17000);
setImageInterval("e", 1000);
}

PS. how did you even find an 8 year old thread?

guzman

02-03-2010, 02:55 AM

Thanks a lot!
Exactly what I was looking for:)

PS. how did you even find an 8 year old thread?
I typed "HTML image timer" in Google...
have a nice day
Guzman

guzman

03-11-2010, 09:07 AM

Hi all and thanks again for your previous help.
I've used gusblake's code to achieve the image effect I wanted. Gusblake , You say you can also put anything else you need onload in here, such as
//loadDropDownMenu();
Can I also put sound? I am trying to add sound that starts in sync with the images. I've tried "set SoundInterval" and sound id= ... or using the usual embed tag in a div id= ... but can't get it to work... The sound always starts immediately at page load... Your help would once again be greatly appreciated...
Thanks

TinyScript

03-11-2010, 09:50 AM

what you have to do is load the sound into an element (I've used iframes) that's positioned offscreen or sized 0px 0px

Load each sound you want into its own iframe each time you want to hear it, but it takes a few seconds to load, so rapid sounds are no good. You can do it using embed tags

For rapid sounds, the soundmanger2 is better.
have a look at the test I did to learn it.

It's pretty simple-- working with soundmanager2, that is

http://www.hardwoodfloorspdx.com/misc/javascript/canvas/test/sound/