Problem with duplicate icons

Dev Shed Forums Sponsor:

November 19th, 2012, 08:41 AM

Lordremcok

Registered User

Join Date: Nov 2012

Posts: 2

Time spent in forums: 11 m 8 sec
Reputation 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

November 21st, 2012, 10:13 PM

msteudel

Contributing User

Join Date: Sep 2002

Location: Seattle, U.S.A.

Posts: 712

Time spent in forums: 4 Days 11 h 4 m 59 sec
Reputation Power: 11

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>

Problem with duplicate icons

Developer Shed Advertisers and Affiliates