Back To Website Design Forum

Auto Changing Images

  • DarkHeavensAngel
  • Born
  • Born
  • No Avatar
  • Joined: Apr 29, 2012
  • Posts: 4
  • Status: Offline

Post April 29th, 2012, 10:56 pm

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 29th, 2012, 10:56 pm

  • Satwant
  • Graduate
  • Graduate
  • User avatar
  • Joined: Dec 27, 2010
  • Posts: 126
  • Loc: Bangalore
  • Status: Offline

Post April 30th, 2012, 2:03 am

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.  
Thank You
Satwant Singh Hundal
http://www.mrhundal.com
  • DarkHeavensAngel
  • Born
  • Born
  • No Avatar
  • Joined: Apr 29, 2012
  • Posts: 4
  • Status: Offline

Post April 30th, 2012, 4:20 pm

Oh, okay. Thank you for the example! :D
  • sarafina
  • Born
  • Born
  • No Avatar
  • Joined: May 10, 2012
  • Posts: 4
  • Status: Offline

Post May 10th, 2012, 11:58 pm

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
  • Joined: Dec 27, 2010
  • Posts: 126
  • Loc: Bangalore
  • Status: Offline

Post May 11th, 2012, 10:33 pm

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.  
Thank You
Satwant Singh Hundal
http://www.mrhundal.com
  • sarafina
  • Born
  • Born
  • No Avatar
  • Joined: May 10, 2012
  • Posts: 4
  • Status: Offline

Post May 12th, 2012, 9:28 am

Ahh, that's what threw me off. 200 didn't make sense to me! Thank you so much!
  • sarafina
  • Born
  • Born
  • No Avatar
  • Joined: May 10, 2012
  • Posts: 4
  • Status: Offline

Post May 12th, 2012, 11:45 am

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
  • Joined: Dec 27, 2010
  • Posts: 126
  • Loc: Bangalore
  • Status: Offline

Post May 13th, 2012, 11:57 am

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.
Thank You
Satwant Singh Hundal
http://www.mrhundal.com
  • sarafina
  • Born
  • Born
  • No Avatar
  • Joined: May 10, 2012
  • Posts: 4
  • Status: Offline

Post May 15th, 2012, 10:17 pm

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
  • Joined: Dec 27, 2010
  • Posts: 126
  • Loc: Bangalore
  • Status: Offline

Post May 16th, 2012, 12:48 am

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.  
Thank You
Satwant Singh Hundal
http://www.mrhundal.com
  • ultimate11
  • Student
  • Student
  • No Avatar
  • Joined: Feb 02, 2011
  • Posts: 86
  • Status: Offline

Post May 16th, 2012, 11:20 pm

how to apply it if the images are from the php/mysql database..
  • Satwant
  • Graduate
  • Graduate
  • User avatar
  • Joined: Dec 27, 2010
  • Posts: 126
  • Loc: Bangalore
  • Status: Offline

Post May 17th, 2012, 2:37 am

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.  
Thank You
Satwant Singh Hundal
http://www.mrhundal.com

Page 1 of 1

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 62 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.