Change image multiple times

This site is best viewed in a modern browser with JavaScript enabled.

shsh_shah

Hi,

Basically my query is i want to have multiple image rollovers working so below is the code where i have 3 images but when i click on the image on web it only shows me 2nd picture but doesnt show 3rd picture.

I want when i do a mouse over on the image it should starts to change again and again until i remove the mouse from the image.

Below is my some sample code.

I would be grateful if somebody help me out.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">


  Rollimage = new Array()

  Rollimage[0]= new Image(121,153)
  Rollimage[0].src = "car1.jpg"

  Rollimage[1] = new Image(121,153)
  Rollimage[1].src = "car2.jpg"

  Rollimage[2] = new Image(121,153)
  Rollimage[2].src = "car3.jpg"


  function SwapOut(){
for (i=0; i< Rollimage.length; i++)
{
    document.Rupert.src = Rollimage[i].src;
}
	i++;
    return true;
  }

  function SwapBack(){
    document.Rupert.src = Rollimage[0].src; 
    return true;
  }


</SCRIPT>
</HEAD>

<BODY>
<IMG SRC="car1.jpg"
  NAME="Rupert"   

  WIDTH=121  

  HEIGHT=153  

  BORDER=0   onmouseover="SwapOut()"
  onmouseout="SwapBack()">
</A> 
</P>
<p>test</p>
</BODY>
</HTML>

Thanks,
Regards,

JMRKER

Questions:

What are the parameters after the new Image() assignment for?
If they are to define the width and height, this is not the way to do it.
You syntax creates an Array with 121x151 elements, which never get assigned!
Why the extra i++ at the end of the 'SwapOut()' function?
As far as I can see it is not used anywhere.

Also, try putting a temporary 'alert(msg)' in the loop to make sure
that the image assignment is correct and that it is not happening
so fast that you cannot see the change occur.

I don't understand the reference to the 'on click' in the first sentence.
You only check for 'onMouseOver=' and 'onMouseOut=' to occur, not 'onClick='.

Logic_Ali

shsh_shah wrote:
  function SwapOut(){
for (i=0; i< Rollimage.length; i++)
{
    document.Rupert.src = Rollimage[i].src;
}

You don't have any timing system, so the images are swapped at inifinite speed. MultiSwap

shsh_shah

First of all many thanks but I am kind of confused here...

As i just want a simple script in which loop running to change image multiple times when mouse is hovered in...

Thanks,
Regards,

coothead

Hi there shsh_shah,

and a warm welcome to these forums.

Have a look at this example, you should be able to adapt it to suit your requirements...

[color=navy]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<base href="http://mysite.orange.co.uk/azygous/images/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    text-align:center;
    margin-top:50px;
 }
#myimage {
    width:100px;
    height:100px;
    border:3px double #000;
    cursor:pointer;
 }
</style>

<script type="text/javascript">

   var pics=['anim.gif','anim1.gif','anim2.gif','anim3.gif','anim4.gif','anim5.gif'];
   var count=0;
   var speed=1000; /*this is set for 1 second, edit to suit requirements*/
   var timer;

window.onload=function(){
document.getElementById('myimage').onmouseover=function() {
   rotateImage(this);
  }
 }
function rotateImage(obj) {

obj.onmouseout=function() {
   count=0;
   clearTimeout(timer);
   obj.src=pics[0];
   return;
 }
   count++;
if(count==pics.length) {
   count=0;
 }
   obj.src=pics[count];
   obj1=obj;
   timer=setTimeout('rotateImage(obj1)',speed);
 }
</script>

</head>
<body>

<div id="container">
 <img id="myimage" src="anim.gif" alt="">
</div>

</body>
</html>
[/color]

coothead

shsh_shah

Thanks a million...I have no words to describe how much it helped..

"Now One more query what if i have many small pictures on the page and when i click any of them it should start changing to multiple images"

coothead

Hi there shsh_shah,

I have many small pictures on the page and when I click any of them it should start changing to multiple images

You will have to give some precise information on that one.
Here are some basic questions...

Does each small picture have its own selection of image changes or is the selection common to all?
Do you want to stop the rotation once started? If so, by what means?

...that will need answering.

coothead

shsh_shah

Thanks for quick response Coothead

Each Picture will have its own selection of images
I want to stop the rotation once mouse is removed from any image and if i hover on any image it should be the only one start rotating

example will be lets say:
many different designs of dresses on webpage and when u click any small image it starts rotating to different images for that specific design

Again i am really thankful for your continue help...

coothead

Hi there shsh_shah,

Unfortunately, well for you anyway, I am off to play a round of golf now, so I will not be able to look at this problem until this evening.
Of course, if you are lucky, someone else may solve it for you, in the meantime.

coothead

coothead

Hi there shsh_shah,

I did not go out at my expected time so I had the opportunity to amend the code while waiting.

[color=navy]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<base href="http://mysite.orange.co.uk/azygous/images/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    text-align:center;
    margin-top:50px;
 }
#myimage,#myimage2 {
    width:100px;
    height:100px;
    border:3px double #000;
    cursor:pointer;
 }
#myimage1 {
    width:200px;
    height:200px;
    border:3px double #000;
    cursor:pointer;
 }
</style>

<script type="text/javascript">

   var pics=['anim.gif','anim1.gif','anim2.gif','anim3.gif','anim4.gif','anim5.gif'];
   var pics1=['ten_quid.jpg','girl.jpg','dog.jpg','blood.jpg','grap.jpg','ball_shad.jpg'];
   var pics2=['buddha.jpg','clouds.jpg','apple.jpg','banana.jpg','aaa.jpg'];

   var count=0;
   var speed=1000; /*this is set for 1 second, edit to suit requirements*/
   var timer;

window.onload=function(){

document.getElementById('myimage').onmouseover=function() {
   rotateImage(this,pics);
  }
document.getElementById('myimage1').onmouseover=function() {
   rotateImage(this,pics1);
  }
document.getElementById('myimage2').onmouseover=function() {
   rotateImage(this,pics2);
  }
 }

function rotateImage(obj,ary) {

obj.onmouseout=function() {
   count=0;
   clearTimeout(timer);
   obj.src=ary[0];
   return;
 }
   count++;
if(count==ary.length) {
   count=0;
 }
   obj.src=ary[count];
   obj1=obj;
   ary1=ary
   timer=setTimeout('rotateImage(obj1,ary1)',speed);
 }
</script>

</head>
<body>

<div id="container">
 <img id="myimage" src="anim.gif" alt="">
 <img id="myimage1" src="ten_quid.jpg" alt="">
 <img id="myimage2" src="buddha.jpg" alt="">
</div>

</body>
</html>
[/color]

coothead

shsh_shah

PERFECTTTTTOOOO Thanks a million..It worked...You are a great life saver..
I will try to understand some of the tags in java script but can u please tell me..
1. why '#' with container and myimage?
2. what does that means : onmouseover=function() ?
3. Can you please small bit tell me what is going on in rotateImage(obj,ary) function?

Thanks again

Logic_Ali

shsh_shah wrote:
First of all many thanks but I am kind of confused here...

As i just want a simple script in which loop running to change image multiple times when mouse is hovered in...

Thanks,
Regards,

Just for the record, does this make it any clearer? MultiSwapClick (Even though it's useless for your homework)

Logic_Ali

shsh_shah wrote:
can u please tell me..
1. why '#' with container and myimage?
2. what does that means : onmouseover=function() ?
3. Can you please small bit tell me what is going on in rotateImage(obj,ary) function?

[translation] I need to pass this off as my own work when my teacher asks me to explain it.

coothead

Hi there shsh_shah,

1. why '#' with container and myimage?

2. what does that mean : onmouseover=function() ?

Instead of setting the onmouseover event handler as an attribute of the img element,
it has been set in the javascript itself.
This has the advantage of leaving the markup tidier and quicker to load.

3. Can you please small bit tell me what is going on in rotateImage(obj,ary) function?

The parameter obj refers to the element that has the mouseover.
The parameter ary refers to the array of images to be used.

coothead

shsh_shah

Thanks again my friend

coothead

[indent]No problem, you're welcome. [/indent]

shsh_shah

Hi,

Ok finally i get it working but the prob is when i do as following as in proper all code as below script doesnt work...please help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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" />
	<meta name="generator" content="Adobe GoLive" />
	<title>Zeberga</title>
	<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />

	<script type="text/javascript">

   var pics2=['dress1.jpg','dress2.jpg','dress3.jpg'];
   var pics1=['fur.jpg','fur1.jpg','fur2.jpg'];

   var pics3=['top.jpg','top1.jpg','top2.jpg'];



   var count=0;
   var speed=1000; /*this is set for 1 second, edit to suit requirements*/
   var timer;

window.onload=function(){

document.getElementById('furs').onmouseover=function() {
   rotateImage(this,pics1);
  }

document.getElementById('dress').onmouseover=function() {
   rotateImage(this,pics2);
  }

 document.getElementById('tops').onmouseover=function() {
   rotateImage(this,pics3);
  }

  }


function rotateImage(obj,ary) {

obj.onmouseout=function() {
   count=0;
   clearTimeout(timer);
   obj.src=ary[0];
   return;
 }
   count++;
if(count==ary.length) {
   count=0;
 }
   obj.src=ary[count];
   obj1=obj;
   ary1=ary
   timer=setTimeout('rotateImage(obj1,ary1)',speed);
 }
</script>

</head>

<body>
<div id="header"><img src="images/title.gif" alt="" width="800" height="150" border="0" /></div>

<div id="menubar"> <!-- menubar start -->

		<div id="button1"><a href="index.html">Home</a></div>
		<div id="button3"><a href="about.html">About</a></div>
		<div id="button2">Collection</div>
		<div id="button4"><a href="contacts.html">Contacts</a></div>

</div> <!-- menubar close -->

<div id="content"> <!--  content start -->

		<div id="left3"> <!-- left3 start -->
		<div id="dress">
		<img src="images/dress2.jpg" alt="" width="207" height="264" border="0" /></div>
		<div id="tops"><img src="images/top.jpg" alt="" width="207" height="264" border="0" /></div>
	</div> <!-- left3 close --> 

		<div id="right3"> <!-- right3 start -->

		<div id="furs"><img src="images/fur1.jpg" alt="" width="207" height="264" border="0" /></div>
	</div> <!-- right3 close -->

</div>  <!--content close -->

</body>

</html>

thanks,
regards,

coothead

Hi there shsh_shah,

your error was to give the img id to its containing div. :eek:

Here is your amended code...

[color=navy]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zeberga</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" >

<style type="text/css">[color=purple]/*add these rules to your stylesheet*/
#header img {
    width:800px;
    height:150px;
    border:0;
 }
#left3 img,#right3 img {
    width:207px;
    height:264px;
    border:1px solid red;;
 }[/color]
</style>

<script type="text/javascript">

var pics2=['[color=purple]images/[/color]dress2.jpg','[color=purple]images/[/color]dress1.jpg','[color=purple]images/[/color]dress3.jpg'];
var pics1=['[color=purple]images/[/color]fur1.jpg','[color=purple]images/[/color]fur.jpg','[color=purple]images/[/color]fur2.jpg'];
var pics3=['[color=purple]images/[/color]top.jpg','[color=purple]images/[/color]top1.jpg','[color=purple]images/[/color]top2.jpg'];

var count=0;
var speed=1000; /*this is set for 1 second, edit to suit requirements*/
var timer;

window.onload=function(){

document.getElementById('furs').onmouseover=function() {
   rotateImage(this,pics1);
 }
document.getElementById('dress').onmouseover=function() {
   rotateImage(this,pics2);
 }
document.getElementById('tops').onmouseover=function() {
   rotateImage(this,pics3);
  }
 }
function rotateImage(obj,ary) {
obj.onmouseout=function() {
   count=0;
   clearTimeout(timer);
   obj.src=ary[0];
   return;
 }
   count++;
if(count==ary.length) {
   count=0;
 }
   obj.src=ary[count];
   obj1=obj;
   ary1=ary
   timer=setTimeout('rotateImage(obj1,ary1)',speed);
 }
</script>

</head>
<body>

<div id="header">
<img src="images/title.gif" alt="">
</div>

<div id="menubar"> <!-- menubar start -->
<div id="button1"><a href="index.html">Home</a></div>
<div id="button3"><a href="about.html">About</a></div>
<div id="button2">Collection</div>
<div id="button4"><a href="contacts.html">Contacts</a></div>
</div> <!-- menubar close -->

<div id="content"> <!--  content start -->

<div id="left3"> <!-- left3 start -->

<div>
<img [color=purple]id="dress"[/color] src="images/dress2.jpg" alt="">
</div>

<div>
<img [color=purple]id="tops"[/color] src="images/top.jpg" alt="">
</div>
</div> <!-- left3 close --> 

<div id="right3"> <!-- right3 start -->
<img [color=purple]id="furs"[/color] src="images/fur1.jpg" alt="">
</div> <!-- right3 close -->

</div>  <!--content close -->

</body>
</html>
[/color]

coothead

soheyl

Hi... this Really Helped Me for simple container... But I was wondering how may i use this in a filter-container...

<div id="filter-container" class="cf">
					<figure class="web">
						<img src="01.jpg"  alt="alt" />
						<figcaption>
							<a href="project.html"><h3 class="heading">Title </h3></a>
							Something about the pic</figcaption>
					</figure>
                                                                       </div>

this is the default code for filter-container i used.... how may i change this and use it? I really apreciate your help... thx!!

soheyl

sry... i missed typed something... code is like this...

<div id="filter-container" class="cf">
					<figure class="web">
						<a href="project.html" class="thumb"><img src="01.jpg"  alt="alt" />
						<figcaption>
							<a href="project.html"><h3 class="heading">Title </h3></a>
							Something about the pic</figcaption>
					</figure>
                                                                       </div>