...

View Full Version : Folding menu's w/img please reply?



Chozin
07-01-2006, 10:05 AM
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

Mr J
07-01-2006, 02:52 PM
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




<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.all? e.target:event.srcElement

if (source.className=="folding"){
var source2=document.getElementById&&!document.all? source.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>

Chozin
07-01-2006, 03:17 PM
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!!!

Chozin
07-01-2006, 04:15 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum