#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0

    Problem with duplicate icons


    hi there I have a code

    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>
    My problem is - I have an icon, and after clicking on it i want it to return two pictures in two different areas on the screen ( same pictures but double )
    Is it possible ?
    how do i do it
  2. #2
  3. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2002
    Location
    Seattle, U.S.A.
    Posts
    712
    Rep Power
    12
    You could add more arguments to your changeIt function and then loop through the arguments to your function:


    Code:
    function changeIt(objName1, objName2)
    {
        //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( a = 0; a < arguments.length; a++ ) {
            for(i=0;i<objId.length;i++)
            {
                if(arguments[a] == objId[i])
                {
                    document.getElementById( arguments[a] ).style.display = "block";
                }
                else
                {
                    tempObj = document.getElementById(objId[i]);
                    tempObj.style.display = "none"; 
                }
            }
        }
        return; 
    }
    and then your html would look like:

    Code:
    <a id="one" href="#" onclick="changeIt('image1', 'image2');">one</a>

IMN logo majestic logo threadwatch logo seochat tools logo