Advanced Search

Results 1 to 5 of 5

Thread: Image change on-click

  1. #1
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image change on-click

    CodeExploited posted the below script in a previous form which works great.

    However, I need to change the script so that when the user clicks on the displayed image, it cylcles to the next image i.e. images are cycled through by each click.

    Right now, the script uses a menu at the bottom which I don't need. How do I change this?



    Code:
    <!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>
    <title>Image Change Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    function changeIt(objName)
    {
    	//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
    	var obj = document.getElementById(objName);
    	
    	//An array that hold the IDs of images that we mentioned in their DIV blocks
    	var objId = new Array();
    	
    	//Storing the image IDs into the array starts here
    	objId[0] = "image1";
    	objId[1] = "image2";
    	objId[2] = "image3";
    	objId[3] = "image4";
    	objId[4] = "image5";
    	//Storing the image IDs into the array ends here
    	
    	//A counter variable going to use for iteration
    	var i;
    	
    	//A variable that can hold all the other object references other than the object which is going to be visible
    	var tempObj;
    	
    	//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
    	//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
    	//of the if statement within this loop.
    	for(i=0;i<objId.length;i++)
    	{
    		if(objName == objId[i])
    		{
    			obj.style.display = "block";
    		}
    		else
    		{
    			tempObj = document.getElementById(objId[i]);
    			tempObj.style.display = "none";	
    		}
    	}
    	return;	
    }
    </script>
    </head>
    
    <body>
    <div id="image1">
    <img src="1.jpg" border="0" alt="one" />
    </div>
    
    <div id="image2" style="display:none">
    <img src="2.jpg" border="0" alt="two" />
    </div>
    
    <div id="image3" style="display:none">
    <img src="3.jpg" border="0" alt="three" />
    </div>
    
    <div id="image4" style="display:none">
    <img src="4.jpg" border="0" alt="four" />
    </div>
    
    <div id="image5" style="display:none">
    <img src="5.jpg" border="0" alt="five" />
    </div>
    <br><br>
    <a id="one" href="#" onclick="changeIt('image1');">one</a>
    <a id="two" href="#" onclick="changeIt('image2');">two</a>
    <a id="three" href="#" onclick="changeIt('image3');">three</a>
    <a id="four" href="#" onclick="changeIt('image4');">four</a>
    <a id="five" href="#" onclick="changeIt('image5');">five</a>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Code:
    <!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>
    <title>Image Change Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    function changeIt(objName)
    {
    	//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
    	var obj = document.getElementById(objName);
    
    	//An array that hold the IDs of images that we mentioned in their DIV blocks
    	var objId = new Array();
    
    	//Storing the image IDs into the array starts here
    	objId[0] = "image1";
    	objId[1] = "image2";
    	objId[2] = "image3";
    	objId[3] = "image4";
    	objId[4] = "image5";
    	//Storing the image IDs into the array ends here
    
    	//A counter variable going to use for iteration
    	var i;
    
    	//A variable that can hold all the other object references other than the object which is going to be visible
    	var tempObj;
    
    	//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
    	//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
    	//of the if statement within this loop.
    	for(i=0;i<objId.length;i++)
    	{
    		if(objName == objId[i])
    		{
    			obj.style.display = "block";
                rotate.nu=i;
    		}
    		else
    		{
    			tempObj = document.getElementById(objId[i]);
    			tempObj.style.display = "none";
    		}
    	}
    	return;
    }
    
    function rotate()
    {
    
    	//An array that hold the IDs of images that we mentioned in their DIV blocks
    	var objId = new Array();
    
    	//Storing the image IDs into the array starts here
    	objId[0] = "image1";
    	objId[1] = "image2";
    	objId[2] = "image3";
    	objId[3] = "image4";
    	objId[4] = "image5";
        rotate.nu=rotate.nu||0;
        document.getElementById(objId[rotate.nu]).style.display = "none";
        rotate.nu=++rotate.nu%objId.length;
        document.getElementById(objId[rotate.nu]).style.display = "block";
    }
    
    </script>
    </head>
    
    <body>
    <div id="image1" onmouseup="rotate();" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" border="0" alt="one" />
    </div>
    
    <div id="image2" style="display:none" onmouseup="rotate();">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" border="0" alt="two" />
    </div>
    
    <div id="image3" style="display:none" onmouseup="rotate();">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" border="0" alt="three" />
    </div>
    
    <div id="image4" style="display:none" onmouseup="rotate();">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" border="0" alt="four" />
    </div>
    
    <div id="image5" style="display:none" onmouseup="rotate();">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" border="0" alt="five" />
    </div>
    <br><br>
    <a id="one" href="#" onclick="changeIt('image1');">one</a>
    <a id="two" href="#" onclick="changeIt('image2');">two</a>
    <a id="three" href="#" onclick="changeIt('image3');">three</a>
    <a id="four" href="#" onclick="changeIt('image4');">four</a>
    <a id="five" href="#" onclick="changeIt('image5');">five</a>
    </body>
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks VW!

  4. #4
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi, this works great!

    Just wanted to repeat this several times on the same page. Like having 10 images visible and each one with a rotator (without having to create 10 'rotate' functions).

    Also wanted to add a counter like '1/5' using the objId var (with no links, just as a reference for the user), instead of having the '1 2 3 4 5' links.

    Can anyone help on this?

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
     <img id="img1" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" onmouseup="zxcImageRotate.Swap('img1');"/>
     <a id="img1Page" ></a>
     <br />
     <br />
     <input type="button" name="" value="GoTo 1" onmouseup="zxcImageRotate.Swap('img2',0);" />
     <input type="button" name="" value="GoTo 2" onmouseup="zxcImageRotate.Swap('img2',1);" />
     <input type="button" name="" value="GoTo 3" onmouseup="zxcImageRotate.Swap('img2',2);" />
     <br />
     <a>
      <img id="img2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img"
       onmouseover="zxcImageRotate.Pause('img2');"
       onmouseout="zxcImageRotate.Auto('img2');"
       onmouseup="zxcImageRotate.Swap('img2');"
       />
     </a>
     <br />
     <a id="img2Page" ></a>
     <br />
     <a id="img2Caption" ></a>
    <br />
    <br />
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcImageRotate={
    
     init:function(o){
      var oop=this,id=o.ID,ary=o.Array,ms=o.AutoRotate,srt=o.AutoStart,img=document.getElementById(id),p=document.getElementById(id+'Page'),t=document.getElementById(id+'Caption'),lk=img.parentNode,z0=0;
      for (;z0<ary.length;z0++){
       ary[z0][5]=new Image();
       ary[z0][5].src=ary[z0][0];
      }
      o=zxcImageRotate['zxc'+id]={
       img:img,
       p:p,
       t:t,
       lk:lk,
       ary:ary,
       ms:typeof(ms)=='number'?ms:2000,
       cnt:0
      }
      this.page(o);
      this.title(o);
      if (typeof(srt)=='number'){
       this.Auto(id,srt);
      }
     },
    
     Swap:function(id,nu){
      var o=zxcImageRotate['zxc'+id];
      if (o){
       this.Pause(id);
       if (o.ary[nu]){
        o.cnt=nu;
       }
       else {
        o.cnt=++o.cnt%o.ary.length;
       }
       if (o.ary[o.cnt][5].width>40){
        o.img.removeAttribute('title');
        if (o.ary[o.cnt][1]){
         o.img.title=o.ary[o.cnt][1];
        }
        o.lk.removeAttribute('href');
        if (o.ary[o.cnt][3]){
         o.lk.href=o.ary[o.cnt][3];
        }
        o.img.src=o.ary[o.cnt][0];
        this.page(o);
        this.title(o);
        if (nu===true){
         this.Auto(id,o.ms);
        }
       }
       else {
        this.Swap(id);
       }
       return false;
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=zxcImageRotate['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.Swap(id,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=zxcImageRotate['zxc'+id];
      if (o){
       clearTimeout(o.to);
      }
     },
    
     page:function(o){
      if (o.p){
       o.p.innerHTML=(o.cnt+1)+' of '+o.ary.length;
      }
     },
    
     title:function(o){
      if (o.t){
       o.t.innerHTML=o.ary[o.cnt][2]||'';
      }
     }
    
    }
    
    zxcImageRotate.init({
     ID:'img1',
     Array:[
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg']
     ]
    });
    
    zxcImageRotate.init({
     ID:'img2',
     Array:[          // an array of arrays defining the image SRCs and titles.    (array)
      // field 0 = the image SRC.
      // field 1 = (optional) the image title.
      // field 2 = (optional) the image caption.
      // field 3 = (optional) the image parent link HREF.
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','Image 1','Caption 1'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','Image 2','Caption 2','http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Image 3','Caption 3']
     ],
     AutoRotate:2000, //(optional) the auto rotate 'hold' delay.                    (number, default = 2000)
     AutoStart:1000   //(optional) the auto rotate 'start' delay on initialization. (number, default = no auto start)
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •