Auto Changing Images

  • DarkHeavensAngel
  • Born
  • Born
  • DarkHeavensAngel
  • Posts: 4

Post 3+ Months Ago

I had just begun learning HTML and was recently introduced to CSS. I was wondering if there was a way to have auto changing images using CSS coding. I know about using JavaScript, but I haven't learned JavaScript before. If there is a way using CSS, please post the code and some simple explanations for the lines of code. If using CSS is impossible, then explain JavaScript with more detail. I'm really just a beginner and have not the slightest idea about JavaScript. Thank you so much!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Satwant
  • Graduate
  • Graduate
  • User avatar
  • Posts: 127
  • Loc: Bangalore

Post 3+ Months Ago

This is not really a CSS question and you would need to look for a script to do what you want as CSS can't make behavioral changes like that.

Check this example code to change image with javascript
HTML Code: [ Select ]
<!DOCTYPE html >
<html>
<head>
<title>IMG Change test</title>
<script type="text/javascript">
var image=new Array("path1", "path2", "path3");
var timeout={};
function stopIt(){
   clearTimeout(timeout);
}
function chnageimage(dvX){
   var dvi=document.getElementById(dvX);
   if(!dvi.count || dvi.count == image.length )
      dvi.count=0;
   dvi.src=image[dvi.count];
   dvi.alt=image[dvi.count];
   dvi.count=dvi.count+1;
   timeout=setTimeout('chnageimage("'+dvX+'")',200);
}
</script>
</head>
<body >
   <div><img src="t1" alt="test1" id="changer"/></div>
   <div><button onclick="chnageimage('changer')">Start</button></div>
   <div><button onclick="stopIt()">Stop</button></div>
   </body>
</html>
 
  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4. <title>IMG Change test</title>
  5. <script type="text/javascript">
  6. var image=new Array("path1", "path2", "path3");
  7. var timeout={};
  8. function stopIt(){
  9.    clearTimeout(timeout);
  10. }
  11. function chnageimage(dvX){
  12.    var dvi=document.getElementById(dvX);
  13.    if(!dvi.count || dvi.count == image.length )
  14.       dvi.count=0;
  15.    dvi.src=image[dvi.count];
  16.    dvi.alt=image[dvi.count];
  17.    dvi.count=dvi.count+1;
  18.    timeout=setTimeout('chnageimage("'+dvX+'")',200);
  19. }
  20. </script>
  21. </head>
  22. <body >
  23.    <div><img src="t1" alt="test1" id="changer"/></div>
  24.    <div><button onclick="chnageimage('changer')">Start</button></div>
  25.    <div><button onclick="stopIt()">Stop</button></div>
  26.    </body>
  27. </html>
  28.  
  • DarkHeavensAngel
  • Born
  • Born
  • DarkHeavensAngel
  • Posts: 4

Post 3+ Months Ago

Oh, okay. Thank you for the example! :D
  • sarafina
  • Born
  • Born
  • sarafina
  • Posts: 4

Post 3+ Months Ago

This is great. Can you tell me where to set the length of time that each image shows, and how?
Thanks!
  • Satwant
  • Graduate
  • Graduate
  • User avatar
  • Posts: 127
  • Loc: Bangalore

Post 3+ Months Ago

The setTimeout function's second parameter. We specify in milliseconds.

JAVASCRIPT Code: [ Select ]
timeout=setTimeout('chnageimage("'+dvX+'")',200);
 
  1. timeout=setTimeout('chnageimage("'+dvX+'")',200);
  2.  
  • sarafina
  • Born
  • Born
  • sarafina
  • Posts: 4

Post 3+ Months Ago

Ahh, that's what threw me off. 200 didn't make sense to me! Thank you so much!
  • sarafina
  • Born
  • Born
  • sarafina
  • Posts: 4

Post 3+ Months Ago

OK, I hate to be a pain, but....

How do you get this script to run automatically when the page opens, vs having to click on that start button? I'm thinking it has something to do with onload, but I don't know how to modify the whole body section.

Thank you!!!
  • Satwant
  • Graduate
  • Graduate
  • User avatar
  • Posts: 127
  • Loc: Bangalore

Post 3+ Months Ago

This will Help

HTML Code: [ Select ]
<body onload="chnageimage('changer')" >
 
  1. <body onload="chnageimage('changer')" >
  2.  


Just make a call to function and it will on.
  • sarafina
  • Born
  • Born
  • sarafina
  • Posts: 4

Post 3+ Months Ago

Thank you. I tried putting that in and it doesn't work. In fact, the body statement just disappears!

Here's what I have, can you tell me what I'm doing wrong? I don't know scripting at all. Can you tell?? :)

<script type="text/javascript">// <![CDATA[
var image=new Array("/skin/frontend/default/default/images/frontgroup.jpg",
"/media/Testimonials/suuthe_testimonial_5.png",
"/media/Testimonials/gift_set_suuthe_325.png");
var timeout={};
function stopIt(){
clearTimeout(timeout);
}
function changeimage(dvX){
var dvi=document.getElementById(dvX);
if(!dvi.count || dvi.count == image.length )
dvi.count=0;
dvi.src=image[dvi.count];
dvi.alt=image[dvi.count];
dvi.count=dvi.count+1;
timeout=setTimeout('changeimage("'+dvX+'")',3500);
}
// ]]></script>
<body onload="changeimage('changer')" >
  • Satwant
  • Graduate
  • Graduate
  • User avatar
  • Posts: 127
  • Loc: Bangalore

Post 3+ Months Ago

Hey

I check it and found this thing is working. May be you forget to define a <IMG> tag in <body> section. this script needs a <img> tag with id 'changer'.

HTML Code: [ Select ]
<html>
<head>
<title>IMG Change test</title>
<script type="text/javascript">// <![CDATA[
var image=new Array("/skin/frontend/default/default/images/frontgroup.jpg",
"/media/Testimonials/suuthe_testimonial_5.png",
"/media/Testimonials/gift_set_suuthe_325.png");
var timeout={};
function stopIt(){
clearTimeout(timeout);
}
function changeimage(dvX){
var dvi=document.getElementById(dvX);
if(!dvi.count || dvi.count == image.length )
dvi.count=0;
dvi.src=image[dvi.count];
dvi.alt=image[dvi.count];
dvi.count=dvi.count+1;
timeout=setTimeout('changeimage("'+dvX+'")',3500);
}
// ]]></script>
</head>
<body onload="changeimage('changer')">
   <div><img src="t1" alt="test1" id="changer"/></div>
   </body>
</html>
 
  1. <html>
  2. <head>
  3. <title>IMG Change test</title>
  4. <script type="text/javascript">// <![CDATA[
  5. var image=new Array("/skin/frontend/default/default/images/frontgroup.jpg",
  6. "/media/Testimonials/suuthe_testimonial_5.png",
  7. "/media/Testimonials/gift_set_suuthe_325.png");
  8. var timeout={};
  9. function stopIt(){
  10. clearTimeout(timeout);
  11. }
  12. function changeimage(dvX){
  13. var dvi=document.getElementById(dvX);
  14. if(!dvi.count || dvi.count == image.length )
  15. dvi.count=0;
  16. dvi.src=image[dvi.count];
  17. dvi.alt=image[dvi.count];
  18. dvi.count=dvi.count+1;
  19. timeout=setTimeout('changeimage("'+dvX+'")',3500);
  20. }
  21. // ]]></script>
  22. </head>
  23. <body onload="changeimage('changer')">
  24.    <div><img src="t1" alt="test1" id="changer"/></div>
  25.    </body>
  26. </html>
  27.  
  • ultimate11
  • Student
  • Student
  • ultimate11
  • Posts: 86

Post 3+ Months Ago

how to apply it if the images are from the php/mysql database..
  • Satwant
  • Graduate
  • Graduate
  • User avatar
  • Posts: 127
  • Loc: Bangalore

Post 3+ Months Ago

It will work with small modification if you are populating values from PHP

PHP Code: [ Select ]
// make image array as
var image=new Array();
<?php    
// Start a loop here to get image path
?>
image.push(<?php echo $image_path_variable ?>);
<?php
//End Loop here
?>
 
  1. // make image array as
  2. var image=new Array();
  3. <?php    
  4. // Start a loop here to get image path
  5. ?>
  6. image.push(<?php echo $image_path_variable ?>);
  7. <?php
  8. //End Loop here
  9. ?>
  10.  

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 36 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.