Home/ Questions/Q 7550609
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T10:15:23+00:00

I have the following code used for displaying several images changed on hover, but

  • 0

I have the following code used for displaying several images changed on hover, but i also would like to add a feature that changes the image automatically if i dont do it manually. 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />

</head>

<body>  
<p>
  <script type="text/javascript" language="javascript">
    function changeImage(img){
       document.getElementById('bigImage').src=img;

    }
  </script>

  <img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage"    
/>
<p>&nbsp; </p>
<div>
  <p>
  <img src="../Pictures/lightcircle2.png" height="79" width="78" 

onmouseover="changeImage('../Pictures/lightcircle2.png')"/>

 </p>
 <p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" 

onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>

 <p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79"    

onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>

 <p>&nbsp;</p>


 </br>
</div>
</body>
</html>

What i want to do is automatically change the images displayed using javascript preferrably. How can i do that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use setInterval to run a function that changes the image src.

    var x = 0;
var images = new Array("../Pictures/lightcircle2.png","../Pictures/lightcircle.png");
var i = setInterval(auto, 3000);

function auto()
  {
    x++;
    if (x == images.length)
       x=0;
    document.getElementById('bigImage').src=images[x];      
  }
    • 0