We had to implement a tab functionality without postback, wherein the image of each tab changed on being clicked . This could be done very easily by implementing javascript and showing an hiding of different <div> on being clicked.

We had four divs, country1, country2, country3, country4.

On first time load only country1 is displayed and the others are hidden, consecutively, on clicking the second image country2 is displayed and the others are hidden.

 

I had a table displaying all the images,

<table>

<tr>

<td>

<div style=”float:left”>

<a href=”#” rel=”tcontent1″ >

<img id=”Img1″ src=”/_layouts/images/basics_hover.gif” onclick=”return changeImage(1);” style=”border:0″ />

</a>

</div>

<div style=”margin-left:-8px; float:left”>

 <a href=”#” rel=”tcontent2″ >

<img id=”Img2″ src=”/_layouts/images/scope_active001.gif” onclick=”return changeImage(2);” style=”border:0″ />

</a>

</div>

<div style=”margin-left:-8px; float:left”>

 <a href=”#” rel=”tcontent3″ >

<img id=”Img3″ src=”/_layouts/images/kits_active001.gif” onclick=”return changeImage(3);” style=”border:0″ />

</a>

</div>

<div style=”margin-left:-8px; float:left”>

 <a href=”#” rel=”tcontent1″ >

<img id=”Img4″ src=”/_layouts/images/submit_active001.gif” onclick=”return changeImage(4);”  style=”border:0″ />

</a>

</div>

</td>

</tr>

</table>

 

 

 The javascript for doing the trick is given below,

function changeImage(opt)

    {

    //alert(opt);

    var currImage1=document.getElementById(“Img1”).src;

    var currImage2=document.getElementById(“Img2”).src;

    var currImage3=document.getElementById(“Img3”).src;

    var currImage4=document.getElementById(“Img4”).src;

   

    var rExp1 = /basics_hover.gif/gi;

    var newstring1 = new String(“basics_active001.gif”);

   

    var rExp2 = /scope_hover.gif/gi;

    var newstring2 = new String(“scope_active001.gif”);

   

    var rExp3 = /kits_hover.gif/gi;

    var newstring3 = new String(“kits_active001.gif”);

   

    var rExp4 = /submit_hover.gif/gi;

    var newstring4 = new String(“submit_active001.gif”);

   

    if (opt==1)

    {

    

       if (currImage1.indexOf(“basics_active001.gif”)!=-1)

       { 

        var rExp = /basics_active001.gif/gi;

        var newstring = new String(“basics_hover.gif”);

        var result = currImage1.replace(rExp, newstring);

       

        document.getElementById(“Img1”).src = result;  

       

        if(currImage2.indexOf(“scope_hover.gif”)!=-1)

        {

            var result = currImage2.replace(rExp2, newstring2);

            document.getElementById(“Img2”).src = result;

        }

        if(currImage3.indexOf(“kits_hover.gif”)!=-1)

        {

            var result = currImage3.replace(rExp3, newstring3);

            document.getElementById(“Img3”).src = result;

        }

        if(currImage4.indexOf(“submit_hover.gif”)!=-1)

        {

            var result = currImage4.replace(rExp4, newstring4);

            document.getElementById(“Img4”).src = result;

        }

       

        country4.style.display= “none”;

        country1.style.display = “block”;

        country2.style.display = “none”;

        country3.style.display = “none”;

        

        }

        else if(currImage1.indexOf(“basics_hover.gif”)!=-1)

       {

        var rExp = /basics_hover.gif/gi;

        var newstring = new String(“basics_active001.gif”);

        var result = currImage1.replace(rExp, newstring);

        document.getElementById(“Img1”).src = result;

       }

    }

   

    if (opt==2)

    {

    

       if (currImage2.indexOf(“scope_active001.gif”)!=-1)

       { 

        var rExp = /scope_active001.gif/gi;

        var newstring = new String(“scope_hover.gif”);

        var result = currImage2.replace(rExp, newstring);

        document.getElementById(“Img2”).src = result;

       

        if(currImage1.indexOf(“basics_hover.gif”)!=-1)

        {

            var result = currImage1.replace(rExp1, newstring1);

            document.getElementById(“Img1”).src = result;

        } 

      

        if(currImage3.indexOf(“kits_hover.gif”)!=-1)

        {

            var result = currImage3.replace(rExp3, newstring3);

            document.getElementById(“Img3”).src = result;

        }

        if(currImage4.indexOf(“submit_hover.gif”)!=-1)

        {

            var result = currImage4.replace(rExp4, newstring4);

            document.getElementById(“Img4”).src = result;

        }

       

        country4.style.display= “none”;

        country1.style.display = “none”;

        country2.style.display = “block”;

        country3.style.display = “none”;

       

        }

        else if(currImage.indexOf(“scope_hover.gif”)!=-1)

       {

      

       }

    }

    if (opt==3)

    {

        if (currImage3.indexOf(“kits_active001.gif”)!=-1)

        {

            var rExp = /kits_active001.gif/gi;

            var newstring = new String(“kits_hover.gif”);

            var result = currImage3.replace(rExp, newstring);

            document.getElementById(“Img3”).src = result;

           

            if(currImage1.indexOf(“basics_hover.gif”)!=-1)

            {

            var result = currImage1.replace(rExp1, newstring1);

            document.getElementById(“Img1”).src = result;

            }

            if(currImage2.indexOf(“scope_hover.gif”)!=-1)

            {

            var result = currImage2.replace(rExp2, newstring2);

            document.getElementById(“Img2”).src = result;

            }

            if(currImage4.indexOf(“submit_hover.gif”)!=-1)

            {

            var result = currImage4.replace(rExp4, newstring4);

            document.getElementById(“Img4”).src = result;

            }

           

            country4.style.display= “none”;

            country1.style.display = “none”;

            country2.style.display = “none”;

            country3.style.display = “block”;

           

        }

        else if(currImage.indexOf(“kits_hover.gif”)!=-1)

        {

           

        }

    }

    if (opt==4)

    {

   

        if (currImage4.indexOf(“submit_active001.gif”)!=-1)

        {

            var rExp = /submit_active001.gif/gi;

            var newstring = new String(“submit_hover.gif”);

            var result = currImage4.replace(rExp, newstring);

            document.getElementById(“Img4”).src = result;

           

            if(currImage1.indexOf(“basics_hover.gif”)!=-1)

            {

            var result = currImage1.replace(rExp1, newstring1);

            document.getElementById(“Img1”).src = result;

            }

            if(currImage2.indexOf(“scope_hover.gif”)!=-1)

            {

            var result = currImage2.replace(rExp2, newstring2);

            document.getElementById(“Img2”).src = result;

            }

            if(currImage3.indexOf(“kits_hover.gif”)!=-1)

            {

            var result = currImage3.replace(rExp3, newstring3);

            document.getElementById(“Img3”).src = result;

            }

           

            country4.style.display= “block”;

            country1.style.display = “none”;

            country2.style.display = “none”;

            country3.style.display = “none”;

           

        }

        else if(currImage.indexOf(“kits_hover.gif”)!=-1)

        {  

        } }}

 

Advertisements