Q: JS: Change Image using Timer

[RBX]

I want to change the source of an image constantly using javascript.
I know the algorithm but am not familiar with javascript.

What I want is to set a timer of about 2000ms which calls the function of changing the state. Each state has a definite image source associated with it and when the end of states occurs, it resets to initial value.

-----

If there is a way which allows overlapping two images and a function which reduces the opacity of top image constantly, then I would like to know it too.

What is to be done is -
There are two images A and B, A is on the top.

Initially both have an image.
Image A loses opacity. (Image B appears)
Image A's source changes and regains opacity (image A appears / Image B's source changes).
Repeat.

 

[RBX]

I asked someone and he suggested me to use CSS transitions. I'm comfortable with that as I'll be using Safari 5.0.2 which supports CSS3 very well.

He illustrated what he wanted using this - Firefox 4 CSS 3 Demo

I could understand what was being done but I still fail at implementing it in what I want due to my lack of knowledge in JS. I was also wondering if -webkit-transition-duration: XXXXms; could be used to give a smooth transition effect, timeout could be extended to accommodate.

 

[RBX]

Sorry, I thought I was at the right place for help.

 

[nims11]

DUDE U R AT THE RIGHT PLACE.
ur problem is not much clear.

you can change the source of the image by
document.getElementById("tagID").src="source of the image"
tagID is value of the 'id' attribute of the <img> tag you want to manipulate.

for that opacity/transition thing.
1> place images in separate layers

<div id="layer1" style="position:absolute;height:100;width:100;left:100;right:100;z-index:0">
<img ................. />
</div>
<div id="layer2" style="position:absolute;height:100;width:100;left:100;right:100;z-index:1">
<img ................. />
</div>

2>z-index is an attribute/rank which decides which layer stays at top. the layer with higher z-index stays at top in case of overlapping.
this attribute can be manipulated in javascript by changing value of

document.getElementById("layer1").style.zIndex

3> use all the above details to build up a function and the use the setInterval() method to call the function in a regular interval.


I hope i have not confused u. If u r still facin probs reply

 

[abhidev]

use arrays to store the src of the images u want to cycle and accordingly assign them based on which one is active.

To call ur function after a specific time interval..u can use this:
setInterval('rotateImg()',2000)

rotateImg() -->function that will rotate the images
2000 --> time between each call

 

[Zangetsu]

@RazorbladeXtreme: The easiest way is to create a .swf file or .gif file of the animated images....& using javascript just use the method abhidev has mentioned.....

 

[RBX]

Thanks for the replies. I, while visiting my school's website today found similar functionality using z-index, so using it seems to be the right option.
What I have already done is -

JScript

<script type="text/javascript">
            var arr_images = new Array (
            "images/tour/sariska/image01.jpg",
            "images/tour/sariska/image02.jpg",
            "images/tour/sariska/image03.jpg",
            "images/tour/sariska/image04.jpg",
            "images/tour/sariska/image05.jpg",
            "images/tour/sariska/image06.jpg"
        );

            var l = arr_images.length;

            function image_change()
            {
                var randomnum = Math.floor(Math.random()*l)
                document.getElementById("imx").src = arr_images[randomnum];
            }

            function timedCount()
            {

                if(document.getElementById("imx").className == "visible")
                {
                    document.getElementById("imx").setAttribute("class", "invisible");
                }
                else
                {
                    document.getElementById("imx").setAttribute("class", "visible");
                    image_change();
                }

                setTimeout("timedCount()",2000);
            }
        </script>

CSS

#imx
{
	transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -webkit-transition: all 1s ease-in-out;
}
  
.invisible
{
	opacity: 0;
}
      
.visible 
{
	opacity: 1;
}

imx holds the image and fade-in/out transitions occur on its contents. The only problem I face is that one image disappears, the background becomes visible and due to slow transition (2000ms), a quick look makes the spot look empty.

 

[abhidev]

cool...if you can use jquery then there are lot of plugins available.

 

[RBX]

jQuery sounds complicated for what level of Javascript has been taught to me (Form validation lol). I although am interested in learning it.

This [Use Safari/Chrome] is the copy of early stages of my work (III sem IP project), the methods discussed in this thread as well as other major changes reside on my hard disk for the moment. I'd not call it bad for a III sem student considering what poor attempts my classmates make even with HTML.
This website was made from scratch and what I've learnt trying to tailor it to my needs has developed my interest in field of web design and development. I hope some of you can help me make the best out of my interest

The tools I've been using are Netbeans IDE 7.0 M2 and TopStyle 4.0 as I prefer manual coding to templates.

No Comments about the Website topic please, I didn't get to select what I wanted.

 

[abhidev]

what is the quant.js for...and how hv u done the navigation effects...well keep up the good work

 

[RBX]

what is the quant.js for...

It resides in

<!-- T35 Hosting Ad Code Begin --> <!-- T35 Hosting Ad Code End -->

So all I can say it that it was injected by my host.

and how hv u done the navigation effects

For effects, I have used CSS transitions

li:hover
{
	-webkit-transform: translate(1em,0);
	-webkit-transition-duration: 600ms;  
}

This shifts the list elements by 1em on hover. Other effects used is border-radius which sets a radius to corners/edges.

 

[abhidev]

It resides in

<!-- T35 Hosting Ad Code Begin --> <!-- T35 Hosting Ad Code End -->

So all I can say it that it was injected by my host.


For effects, I have used CSS transitions

li:hover
{
	-webkit-transform: translate(1em,0);
	-webkit-transition-duration: 600ms;  
}

This shifts the list elements by 1em on hover. Other effects used is border-radius which sets a radius to corners/edges.

what about older browsers...they won't support css transitions?

 

[RBX]

This is a college project not meant for public viewing so browser support was least of my concerns. The systems at college labs use IE6 and IE6 obviously doesn't support anything at all and I have no experience in making basic CSS work on IE, so added some code to ask for installation of a newer browser whenever IE is detected.

This is not a permanent solution, I of course will need to learn how to make things work cross-browser and that's why I'm here

Try the link I gave in IE and you'll encounter Compatible Browsers . This appears fine in Chrome/Safari/FF but IE gives what's my worst nightmare. I being the only one working on this project had no time to work this out so I chose to enforce a modern browser.