[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 357
  • Last Modified:

Image animation from a predefined array of images.

Hi,
I would like to know how could I create a page that contains an image .When a mouse moves over it , it's source keeps changing from a predefined array of images.
When the mouse moves out, its source returns to the first image of the array.

Thanks.
sherihan.
0
sherihan
Asked:
sherihan
  • 4
1 Solution
 
cLFlaVACommented:
Hi sherihan.

Here's an example, is it what you're looking for?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Rotating Banner Example</title>

<script language="javascript" type="text/javascript">
<!--

var index = 0;
var cont = false;
var banners = new Array("http://experts-exchange.com/images/logoTopLeft.gif", "http://experts-exchange.com/images/certification.gif", "http://www.google.com/images/logo.gif");

function rotate() {
      if (cont) {
          if (index == banners.length) index = 0;
            document.getElementById('the_banner').src = banners[index];
            setTimeout('rotate()', 500);
            index++;
      }
}

function start() {
    cont = true;
      rotate();
}

function end() {
      cont = false;
      document.getElementById('the_banner').src = banners[0];
}

-->
</script>

<style type="text/css">

</style>

</head>

<body onload="">
<img id="the_banner" onmouseover="start();" onmouseout="end();" src="http://experts-exchange.com/images/logoTopLeft.gif" />
<br />
The banner above will change every 1/2 a second when you have the mouse over the image.
</body>

</html>
0
 
GwynforWebCommented:
<script >
var index = 0;
var frameSrc = new Array(
 "http://experts-exchange.com/images/indexLogoPerson_01.gif",
 "http://experts-exchange.com/images/indexLogoPerson_02.gif",
 "http://experts-exchange.com/images/indexLogoPerson_03.gif",
 "http://experts-exchange.com/images/indexLogoPerson_04.gif");

function preload(){
 frameArr=new Array
 for (i=0;i<frameSrc.length;i++)
 {frameArr[i]=new Image
  frameArr[i].src=frameSrc[i]
 }
}

function nextFrame() {
index++
document.getElementById('theFilm').src=frameArr[index%(frameArr.length)].src
}
</script>

<body onload="preload()">
<img id="theFilm" src="http://experts-exchange.com/images/indexLogoPerson_01.gif"
     onmouseover="index=0;timer=setInterval('nextFrame()',500)"
     onmouseout="clearInterval(timer);this.src=frameArr[0].src;index++">
</body>
0
 
GwynforWebCommented:
index++ in the  mouseout can be removed
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GwynforWebCommented:
sherihan, Why have you accepted an answer that does not work?
0
 
GwynforWebCommented:
...in IE that is.
0
 
sherihanAuthor Commented:
hi GwyforWeb,
why do u say that the accepted coad doesn't work.
I tested it and it works correctly.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now