www.webdeveloper.com
Results 1 to 5 of 5

Thread: need help here!!!

  1. #1
    Join Date
    Nov 2013
    Posts
    44

    need help here!!!

    i have been trying to creat an image viewer onClick.i've managed to do it.but it works on reload everytime .the three image appears one by one after clicking on individual image and stop working till i reload the page.and even i reload ,if i click on the second image first,the first image doesn't appears on the screen.what i am trying to say is it works successively.how can i solve that

    Code:
    <html>
    <head>
    <title>javascript</title>
    <style>
    *{margin:0px;padding:0px;}
    
    #floatright {
    float:right;
    width:180px;
    height:500px;
    border:1px solid;
    padding:2px;
    }
    #imageone,#imagetwo,#imagethree{ 
    float:right;
    width:150px;
    height:100px; 
    
    }
    body{
    position:relative;}
    #box{
    position:relative;
    float:right;
    width:400px;
    height:350px;
    border:1px solid;
    }
    #sizeimg1,#sizeimg2,#sizeimg3{
    width:400px;
    height:350px;
    }
    #sizeimg1{
    position:absolute;
    top:0px;
    right:300px;
    }
    #sizeimg2{
    position:absolute;
    top:0px;right:300px;
    }
    #sizeimg3{
    position:absolute;right:300px;
    top:0px;
    }
    </style>
    
    <script language= "javascript"  type="text/javascript">
    
        function change(imag){ 
    	var photo=document.getElementById(imag);
    	photo.style.zIndex="200";
    
    		 
    		 }
    
      
    </script>
    </head >
    <body>
    
    <div id="floatright">
    <img src="image1.jpg"   alt="pakhi"   id="imageone" onClick="change('sizeimg1');"  >
    <img  src="image2.jpg"  alt="pakhi" id="imagetwo"    onClick="change('sizeimg2');"   >
    <img src="image3.jpg"  alt="pakhi"   id="imagethree"  onClick="change('sizeimg3');"    >
    </div>
    
    <img src="image1.jpg"  id="sizeimg1">
    <img src="image2.jpg"  id="sizeimg2" >
    <img src="image3.jpg"   id="sizeimg3">
    
    </body>
    </html>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,677
    Code:
    <html>
    <head>
    <title>javascript</title>
    <style>
    *{margin:0px;padding:0px;}
    
    #floatright {
    float:right;
    width:180px;
    height:500px;
    border:1px solid;
    padding:2px;
    }
    #imageone,#imagetwo,#imagethree{
    float:right;
    width:150px;
    height:100px;
    
    }
    body{
    position:relative;}
    #box{
    position:relative;
    float:right;
    width:400px;
    height:350px;
    border:1px solid;
    }
    #sizeimg1,#sizeimg2,#sizeimg3{
    width:400px;
    height:350px;
    }
    #sizeimg1{
    position:absolute;
    top:0px;
    right:300px;
    }
    #sizeimg2{
    position:absolute;
    top:0px;right:300px;
    }
    #sizeimg3{
    position:absolute;right:300px;
    top:0px;
    }
    </style>
    
    <script language= "javascript"  type="text/javascript">
    
        function change(imag){
         if (change.lst){
          change.lst.style.zIndex="0"; // reduce t5he3 z-Index of the last image
         }
         var photo=document.getElementById(imag);
    	 photo.style.zIndex="200";
         change.lst=photo;
        }
    
    
    </script>
    </head >
    <body>
    
    <div id="floatright">
    <img src="image1.jpg"   alt="pakhi"   id="imageone" onClick="change('sizeimg1');"  >
    <img  src="image2.jpg"  alt="pakhi" id="imagetwo"    onClick="change('sizeimg2');"   >
    <img src="image3.jpg"  alt="pakhi"   id="imagethree"  onClick="change('sizeimg3');"    >
    </div>
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"  id="sizeimg1">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg"  id="sizeimg2" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg"   id="sizeimg3">
    
    </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
    Nov 2013
    Posts
    44
    what is meant by
    change.1st
    would you please explain?

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,677
    Code:
    <html>
    <head>
    <title>javascript</title>
    <style>
    *{margin:0px;padding:0px;}
    
    #floatright {
    float:right;
    width:180px;
    height:500px;
    border:1px solid;
    padding:2px;
    }
    #imageone,#imagetwo,#imagethree{
    float:right;
    width:150px;
    height:100px;
    
    }
    body{
    position:relative;}
    #box{
    position:relative;
    float:right;
    width:400px;
    height:350px;
    border:1px solid;
    }
    #sizeimg1,#sizeimg2,#sizeimg3{
    width:400px;
    height:350px;
    }
    #sizeimg1{
    position:absolute;
    top:0px;
    right:300px;
    }
    #sizeimg2{
    position:absolute;
    top:0px;right:300px;
    }
    #sizeimg3{
    position:absolute;right:300px;
    top:0px;
    }
    </style>
    
    <script language= "javascript"  type="text/javascript">
    
        function change(imag){
         if (change.lst){
          change.lst.style.zIndex="0"; // reduce t5he3 z-Index of the last photo image
         }
         var photo=document.getElementById(imag);
    	 photo.style.zIndex="200";
         change.lst=photo;  // the function change property records the currebt image assignet to var photo
        }
    
    
    </script>
    </head >
    <body>
    
    <div id="floatright">
    <img src="image1.jpg"   alt="pakhi"   id="imageone" onClick="change('sizeimg1');"  >
    <img  src="image2.jpg"  alt="pakhi" id="imagetwo"    onClick="change('sizeimg2');"   >
    <img src="image3.jpg"  alt="pakhi"   id="imagethree"  onClick="change('sizeimg3');"    >
    </div>
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"  id="sizeimg1">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg"  id="sizeimg2" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg"   id="sizeimg3">
    
    </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/

  5. #5
    Join Date
    Nov 2013
    Posts
    44
    thanks man!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles