javascript onClick change div

Hello,

I have two links (images), first for backward second for forward.

I would linke to change (n) divs back and forward with this two buttons. Example on http://www.otteybypamp.com/en/majcka.asp?menuid=majcka, but there I change only pictures, now I need the layers.

Thank you,
Mitja
msmidAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
johanmulderCommented:

<SCRIPT LANGUAGE="JavaScript">

var DivCount = 3;
var DivCurrent = 1;

function showAnotherDiv(forward)
{
    //first, hide current layer
    document.getElementById("imgDiv"+DivCurrent).style.display = "none";

   
    //then, check forward/backward
    if(forward)
    {
       DivCurrent++;      
       if(DivCurrent > DivCount)
          DivCurrent = 1;
     }
     else
     {
        DivCurrent--;
        if(DivCurrent < 1)
           DivCurrent = DivCount;
     }

     //display new layer
     document.getElementById("ïmgDiv"+DivCurrent).style.display = "block";

}

</SCRIPT>


<DIV ID="imgDiv1" STYLE="display:block"><IMG SRC="image1.jpg"></DIV>
<DIV ID="imgDiv2" STYLE="display:none"><IMG SRC="image2.jpg"></DIV>
<DIV ID="imgDiv3" STYLE="display:none"><IMG SRC="image3.jpg"></DIV>

<IMG SRC="backward.jpg" onClick="javascript:showAnotherDiv(false);">
<IMG SRC="forward.jpg" onClick="javascript:showAnotherDiv(true);">

Good luck with this one!
0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
LindzKCommented:
When i tested that code in IE6, it didn't work, it does work in ns7 though.

a slight modification to the code,  should make it work in both popular browsers ( as follows : )#

The script takes in the div id, as the one to show, if you need more than two divs, you would just 'hide' more of them, in the javascript block, then make visible the one past into the equation

<script language="javascript">
  var visdiv = 'first';
  function SwapDiv(div)
  {
    if (div != visdiv)
      {
      document.getElementById(div).style.visibility='visible';
        document.getElementById(visdiv).style.visibility='hidden';
        visdiv = div;      
      }
  }
</script>

<div id="second" style="position:absolute; top:0px; left:0px; visibility:hidden;">
second div
</div>
<img src="back.gif" width="32" height="32" alt="" border="0" onclick="SwapDiv('first')">
<img src="forward.gif" width="32" height="32" alt="" border="0" onclick="SwapDiv('second')">
0
 
johanmulderCommented:
you can also replace those rules:
   document.getElementById("imgDiv"+DivCurrent).style.display = "none";
and  
   document.getElementById("imgDiv"+DivCurrent).style.display = "block";

with:

if(document.all)
   document.all("imgDiv"+DivCurrent).style.display = "none";
else
   document.getElementById("imgDiv"+DivCurrent).style.display = "none";

and

if(document.all)
   document.all("imgDiv"+DivCurrent).style.display = "block";
else
   document.getElementById("imgDiv"+DivCurrent).style.display = "block";

0
 
msmidAuthor Commented:
Thank you johanmulder.

Mitja
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.