Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Folding menu's w/img please reply?

    Chozin here I've been monitoring my threads and notice that noone has replied to my "folding menu with img how can i have more then 1 img & menu"
    so i made this thread to plead that some one with javascript knowledge please give support in replying to my Question thank you's all.
    here is the message if you do not wish to surf the forum.

    I have a js that has a button that lets you click a button and a menu appears: example:

    the script:

    // Menu change
    ns6_index=0

    function change(e){
    if (!document.all&&!document.getElementById)
    return
    if (!document.all&&document.getElementById)
    ns6_index=1

    var source=document.getElementById&&!document.all? e.target:event.srcElement

    if (source.className=="folding"){
    var source2=document.getElementById&&!document.all? source.parentNode.childNodes:source.parentElement.all
    if (source2[2+ns6_index].style.display=="none"){
    source2[0].src="images/m_DownB.gif"
    source2[2+ns6_index].style.display=''
    }
    else{
    source2[0].src="images/m_Down.gif"
    source2[2+ns6_index].style.display="none"
    }
    }
    }
    document.onclick=change

    the html:

    <div align="right">
    <img border="0" src="images/m_Down.gif" class="folding">
    <a href=" " title=" "></a>
    <dl style="display: none">
    <dt><a href="family/familyp.htm">My family photos</a><br>
    <dt><a href="family/familyp1.htm">My family photos 2</a><br>
    <dt><a href="family/familyp2.htm">My family photos 3</a><br>
    <dt><a href="family/vacat.htm">My Vacation</a><br>
    <dt><a href="family/livi.htm">My House</a><br>
    <dt><a href="family/modelc.htm">My Kool Car</a><br>
    <dt><a href="family/relat.htm">My Relatives<a><br>
    <dt><a href="family/about.htm">About My Family</a><br>
    <dt><a href="family/etc.htm">Misc Items</a><br>
    </dl>
    </div>
    <!-- ----------------------------------------------------------------------------------- -->
    is there a way I can get more than one type of button like this:

    <div align="right">
    <img border="0" src="images/m_jokedown.gif" class="folding">
    <a href=" " title=" "></a>
    <dl style="display: none">
    <dt><a href="joke/jokep.htm">Favorite Jokes</a><br>
    <dt><a href="joke/jokep1.htm">Favorite Jokes 2</a><br>
    <dt><a href="joke/jokep2.htm">Favorite Jokes 3</a><br>
    <dt><a href="joke/joke.htm">My jokes</a><br>
    <dt><a href="joke/joker.htm">Blonde Jokes</a><br>
    <dt><a href="joke/jokec.htm">Car Jokes</a><br>
    <dt><a href="joke/jokes.htm">Jokes for Kids<a><br>
    <dt><a href="joke/joket.htm">Bad Jokes</a><br>
    <dt><a href="joke/jokew.htm">Cancelled Jokes</a><br>
    </dl>
    </div>
    <!-- ----------------------------------------------------------------------------------- -->
    the other img would be m_jokedownB.gif
    and if i want have more img & menu's like this on one page.

    Please help? please reply? thanks in advance

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's what I have added, change in your code

    commented out the lines

    source2[0].src=

    The image places have been given an ordinal ID

    Added

    image=[

    ["images/m_Down.gif","images/m_DownB.gif"],
    ["images/m_jokedown.gif","images/m_jokedownB.gif"]

    ]


    if(source2[0].src.indexOf(image[source2[0].id][0])!=-1){
    source2[0].src=image[source2[0].id][1]
    }
    else{
    source2[0].src=image[source2[0].id][0]
    }


    Please give the following a try


    PHP Code:
    <script>

    ns6_index=0


    image
    =[

    [
    "images/m_Down.gif","images/m_DownB.gif"],
    [
    "images/m_jokedown.gif","images/m_jokedownB.gif"]

    ]

    function 
    change(e){
    if (!
    document.all&&!document.getElementById)
    return
    if (!
    document.all&&document.getElementById)
    ns6_index=1

    var source=document.getElementById&&!document.alle.target:event.srcElement

    if (source.className=="folding"){
    var 
    source2=document.getElementById&&!document.allsource.parentNode.childNodes:source.parentElement.all


    if(source2[0].src.indexOf(image[source2[0].id][0])!=-1){
    source2[0].src=image[source2[0].id][1]
    }
    else{
    source2[0].src=image[source2[0].id][0]
    }



    if (
    source2[2+ns6_index].style.display=="none"){

    //source2[0].src="images/m_DownB.gif"
    source2[2+ns6_index].style.display=''
    }
    else{
    //source2[0].src="images/m_Down.gif"
    source2[2+ns6_index].style.display="none"
    }
    }
    }
    document.onclick=change
    </script>

    <div align="right">
    <img border="0" src="images/m_Down.gif" id="0" class="folding">
    <a href=" " title=" "></a>
    <dl style="display: none">
    <dt><a href="family/familyp.htm">My family photos</a><br>
    <dt><a href="family/familyp1.htm">My family photos 2</a><br>
    <dt><a href="family/familyp2.htm">My family photos 3</a><br>
    <dt><a href="family/vacat.htm">My Vacation</a><br>
    <dt><a href="family/livi.htm">My House</a><br>
    <dt><a href="family/modelc.htm">My Kool Car</a><br>
    <dt><a href="family/relat.htm">My Relatives<a><br>
    <dt><a href="family/about.htm">About My Family</a><br>
    <dt><a href="family/etc.htm">Misc Items</a><br>
    </dl>
    </div>

    <div align="right">
    <img border="0" src="images/m_jokedown.gif" id="1" class="folding">
    <a href=" " title=" "></a>
    <dl style="display: none">
    <dt><a href="joke/jokep.htm">Favorite Jokes</a><br>
    <dt><a href="joke/jokep1.htm">Favorite Jokes 2</a><br>
    <dt><a href="joke/jokep2.htm">Favorite Jokes 3</a><br>
    <dt><a href="joke/joke.htm">My jokes</a><br>
    <dt><a href="joke/joker.htm">Blonde Jokes</a><br>
    <dt><a href="joke/jokec.htm">Car Jokes</a><br>
    <dt><a href="joke/jokes.htm">Jokes for Kids<a><br>
    <dt><a href="joke/joket.htm">Bad Jokes</a><br>
    <dt><a href="joke/jokew.htm">Cancelled Jokes</a><br>
    </dl>
    </div> 
    Last edited by Mr J; 07-01-2006 at 01:56 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll try this out and i believe that with this , if i wish to had more img gif and down menu's all i need to do is add the ["images/m_imagedown.gif","images/m_imagedownB.gif"]
    &
    if(source2[0].src.indexOf(image[source2[0].id][0])!=-1){
    source2[0].src=image[source2[0].id][1]
    source2[0].src=image[source2[0].id][2]
    }
    else{
    source2[0].src=image[source2[0].id][0]
    to the script
    &
    <img border="0" src="images/m_imagedown.gif" id="2" class="folding">
    to the html?
    or am i stupid in this thought? if not thanks anyway for the reply!!!

  • #4
    New Coder
    Join Date
    Jun 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ignore my script part reply i figured out by just adding
    ["images/m_Down.gif","images/m_DownB.gif"],
    ["images/m_jokedown.gif","images/m_jokedownB.gif"]
    then:
    ["images/m_frienddown.gif","images/m_frienddownB.gif"]
    to the script and
    <img border="0" src="images/frienddown.gif" id="2" class="folding">
    <a href=" " title=" "></a>
    <dl style="display: none">
    to my html i can have 3mdown img menues thanks i learn quick


  •  

    Posting Permissions

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