problem with mouseover

N

neetu

Hi All

I a new to javascript. I am using the below javascript for expand
collpase menu. When user clicks to expand the menu, -image appears and
when clicks to collapse the menu,+ image appears. I want to use the
sme script for mouse hover. How can I.

<script type="text/javascript">
document.getElementById('personal_details').style. display='none';
document.getElementById('income_details').style.di splay='none';
document.getElementById('return_details').style.di splay='none';
document.getElementById('filing_details').style.di splay='none';

function switchMenu(id)
{
obj=document.getElementById(id);
col=document.getElementById("x" + id);

if (obj.style.display=='none')
{
obj.style.display='block';
col.innerHTML="<img src='/it_media/v4/n/images/minus2.gif'/>";
}

else
{
obj.style.display='none';
col.innerHTML="<img src='/it_media/v4/n/images/plus2.gif'/>";

}
}

</script>
 
E

Erwin Moller

neetu schreef:
Hi All

I a new to javascript. I am using the below javascript for expand
collpase menu. When user clicks to expand the menu, -image appears and
when clicks to collapse the menu,+ image appears. I want to use the
sme script for mouse hover. How can I.

<script type="text/javascript">
document.getElementById('personal_details').style. display='none';
document.getElementById('income_details').style.di splay='none';
document.getElementById('return_details').style.di splay='none';
document.getElementById('filing_details').style.di splay='none';
Click to expand...

Just a quick remark: The spaces in the above code.... are they an
artifact when you copied/pasted the code?
If not, start fixing them first (and keep an eye on your errorconsole to
spot syntax mistakes right away).

Regards,
Erwin Moller

--
"There are two ways of constructing a software design: One way is to
make it so simple that there are obviously no deficiencies, and the
other way is to make it so complicated that there are no obvious
deficiencies. The first method is far more difficult."
-- C.A.R. Hoare
 
N

neetu

The code is like this:


<script type="text/javascript">
document.getElementById('personal_details').style. display='none';
document.getElementById('income_details').style.di splay='none';
document.getElementById('return_details').style.di splay='none';
document.getElementById('filing_details').style.di splay='none';
function switchMenu(id)
{
obj=document.getElementById(id);
col=document.getElementById("x" + id);
if (obj.style.display=='none')
{
obj.style.display='block';
col.innerHTML="<img src='/it_media/v4/n/images/minus2.gif'/>";
}
else
{
obj.style.display='none';
col.innerHTML="<img src='/it_media/v4/n/images/plus2.gif'/>";
}
}
</script>
 
N

neetu

Sorry, the code is like as below. The spaces came while copy/pasting
it.

<script type="text/javascript">
document.getElementById('personal_details').style.display='none';
document.getElementById('income_details').style.display='none';
document.getElementById('return_details').style.display='none';
document.getElementById('filing_details').style.display='none';

function switchMenu(id)
{
obj=document.getElementById(id);
col=document.getElementById("x" + id);

if (obj.style.display=='none')
{
obj.style.display='block';
col.innerHTML="<img src='/it_media/v4/n/images/minus2.gif'/>";

}

else
{
obj.style.display='none';
col.innerHTML="<img src='/it_media/v4/n/images/plus2.gif'/>";

}
}

</script>

Regards,
neetu
 
E

Erwin Moller

neetu schreef:
The code is like this:


<script type="text/javascript">
document.getElementById('personal_details').style. display='none';
document.getElementById('income_details').style.di splay='none';
document.getElementById('return_details').style.di splay='none';
document.getElementById('filing_details').style.di splay='none';
Click to expand...

Erm......

Did you read my message?
Remove the spaces AND keep an eye on your errorconsole.

To spell it out:
WRONG:
document.getElementById('personal_details').style. display='none';

RIGHT:
document.getElementById('personal_details').style.display='none';
(mind the missing space after style.)

The other 3 lines also have a space.
I leave that as an exercise for you to find them...

Regards,
Erwin Moller


--
"There are two ways of constructing a software design: One way is to
make it so simple that there are obviously no deficiencies, and the
other way is to make it so complicated that there are no obvious
deficiencies. The first method is far more difficult."
-- C.A.R. Hoare
 
E

Erwin Moller

neetu schreef:
Sorry, the code is like as below. The spaces came while copy/pasting
it.

<script type="text/javascript">
document.getElementById('personal_details').style.display='none';
document.getElementById('income_details').style.display='none';
document.getElementById('return_details').style.display='none';
document.getElementById('filing_details').style.display='none';
Click to expand...

Better. ;-)
function switchMenu(id)
{
obj=document.getElementById(id);
col=document.getElementById("x" + id);

if (obj.style.display=='none')
{
obj.style.display='block';
col.innerHTML="<img src='/it_media/v4/n/images/minus2.gif'/>";

}

else
{
obj.style.display='none';
col.innerHTML="<img src='/it_media/v4/n/images/plus2.gif'/>";

}
}

</script>

Regards,
neetu
Click to expand...

Well, it is hard to tell how this code is called.
Where and how is switchMenu() called?
What is the id passed to switchMenu()?

How does the HTML look?

Try to post a minimal example that *doesn't work* as you expected,
including your HTML, and relevant CSS definitions (if any).

Also: try to do it yourself first by looking at the errorconsole.
I advise you to use Firefox for this: tools -> Error Console.
All errors will appear there.

Regards,
Erwin Moller



--
"There are two ways of constructing a software design: One way is to
make it so simple that there are obviously no deficiencies, and the
other way is to make it so complicated that there are no obvious
deficiencies. The first method is far more difficult."
-- C.A.R. Hoare
 
S

SAM

Le 9/16/09 9:06 AM, neetu a écrit :
Hi All

I a new to javascript. I am using the below javascript for expand
collpase menu. When user clicks to expand the menu, -image appears and
when clicks to collapse the menu,+ image appears. I want to use the
sme script for mouse hover. How can I.

<script type="text/javascript">
document.getElementById('personal_details').style.display='none';
document.getElementById('income_details').style.display='none';
document.getElementById('return_details').style.display='none';
document.getElementById('filing_details').style.display='none';
Click to expand...

function switchMenu(id)
{
var obj = document.getElementById(id).style;
var col = document.getElementById("x" + id);
obj.display = obj.display=='none'? 'block' : 'none';
col.innerHTML = "<img src='/it_media/v4/n/images/" +
(obj.display=='none'? 'plus' : 'minus') + "2.gif'/>";
}

// variante using preloaded images (once for all the menus):

if(document.images) {
plus = new Image();
minus = new Image();
plus.src = '/it_media/v4/n/images/plus2.gif';
minus.src = '/it_media/v4/n/images/minus2.gif';
}

function switchMenu(id)
{
var obj = document.getElementById(id).style;
var col = document.getElementById("x" + id);
col = col.getElementsByTagName('IMG')[0];
obj.display = (obj.display=='none')? 'block' : 'none';
col.src = (obj.display=='none')? plus.src : minus.src;
}
</script>
Click to expand...

<div class="menu"
onmouseover="switchMenu('personal_details');"
onmouseout="switchMenu('personal_details');">
<div id="xpersonal_details">
<img src='/it_media/v4/n/images/plus2.gif'/>
Personal details
</div>
<div id="personal_details">
<a href="blah.htm">blah</a>
<a href="blah1.htm">blah 1</a>
<a href="blah2.htm">blah 2</a>
</div>
</div>
<div class="menu"
onmouseover="switchMenu('income_details');"
onmouseout="switchMenu('income_details');">
<div id="xincome_details">
<img src='/it_media/v4/n/images/plus2.gif'/>
Income details
</div>
<div id="income_details">
<a href="blah.htm">blah</a>
<a href="blah1.htm">blah 1</a>
<a href="blah2.htm">blah 2</a>
</div>
</div>



----------------------------- other way ----------------


<script type="text/javascript">
var menus = ['personal_details','income_details',
'return_details','filing_details'];

window.onload = function() {
for(var i=0, n=menus.length; n>i; i++)
document.getElementById(menus).className='plus';
}
function switchMenu(what) {
what.className = what.className=='plus'? 'minus' : 'plus';
}
</script>

<style type="text/css">
#menu { position: relative; }
..minus, .plus { float: left; }
..plus img { width: 15px; height: 15px;
background: url(/it_media/v4/n/images/plus2.gif)
no-repeat center center; }
..minus img { width: 15px; height: 15px;
background: url(/it_media/v4/n/images/minus2.gif)
no-repeat center center; }
..plus div { display: none; }
..minus div { display: block; }
</style>

<div id="menu">
<div onclick="switchMenu(this)">
<img src='/it_media/v4/n/images/empty.gif'/>
Personal details<br />
<div>
<a href="blah.htm">blah</a><br />
<a href="blah1.htm">blah 1</a><br />
<a href="blah2.htm">blah 2</a>
</div>
</div>
<div onclick="switchMenu(this)">
<img src='/it_media/v4/n/images/empty.gif'/>
Income details<br />
<div>
<a href="blah0.htm">blah 00</a><br />
<a href="blah01.htm">blah 01</a><br />
<a href="blah02.htm">blah 02</a>
</div>
</div>
</div>

The image 'empty.gif' is one pixel of side and transparent

Usually a menu is made with a list (UL LI)
 
N

neetu

Hi Sam

I have used your first method. But it keeps on expanding and
collapsing the menu till the mouse is over the image.What I need is
the menu should expand when the mouse is over the + image and it
should collapse when the mouse is taken off the image. But the menu
keeps on collapsing and expanding once the mouse is over the +
image.It does not stops for the user to click on the menu item.

Le 9/16/09 9:06 AM, neetu a écrit :
Hi All
Click to expand...
I a new to javascript. I am using the below javascript for expand
collpase menu. When user clicks to expand the menu, -image appears and
when clicks to collapse the menu,+ image appears. I want to use the
sme script for mouse hover. How can I.
Click to expand...
<script type="text/javascript">
document.getElementById('personal_details').style.display='none';
document.getElementById('income_details').style.display='none';
document.getElementById('return_details').style.display='none';
document.getElementById('filing_details').style.display='none';
Click to expand...

function switchMenu(id)
{
   var obj = document.getElementById(id).style;
   var col = document.getElementById("x" + id);
   obj.display = obj.display=='none'? 'block' : 'none';
   col.innerHTML = "<img src='/it_media/v4/n/images/" +
        (obj.display=='none'? 'plus' : 'minus') + "2.gif'/>";

}

// variante using preloaded images (once for all the menus):

if(document.images) {
   plus = new Image();
   minus = new Image();
   plus.src = '/it_media/v4/n/images/plus2.gif';
   minus.src = '/it_media/v4/n/images/minus2.gif';
   }

function switchMenu(id)
{
   var obj = document.getElementById(id).style;
   var col = document.getElementById("x" + id);
   col = col.getElementsByTagName('IMG')[0];
   obj.display = (obj.display=='none')? 'block' : 'none';
   col.src = (obj.display=='none')? plus.src : minus.src;

}
</script>
Click to expand...

<div class="menu"
  onmouseover="switchMenu('personal_details');"
  onmouseout="switchMenu('personal_details');">
   <div id="xpersonal_details">
      <img src='/it_media/v4/n/images/plus2.gif'/>
      Personal details
   </div>
   <div id="personal_details">
       <a href="blah.htm">blah</a>
       <a href="blah1.htm">blah 1</a>
       <a href="blah2.htm">blah 2</a>
   </div>
</div>
<div class="menu"
  onmouseover="switchMenu('income_details');"
  onmouseout="switchMenu('income_details');">
   <div id="xincome_details">
      <img src='/it_media/v4/n/images/plus2.gif'/>
      Income details
   </div>
   <div id="income_details">
       <a href="blah.htm">blah</a>
       <a href="blah1.htm">blah 1</a>
       <a href="blah2.htm">blah 2</a>
   </div>
</div>

----------------------------- other way ----------------

<script type="text/javascript">
var menus = ['personal_details','income_details',
              'return_details','filing_details'];

window.onload = function() {
   for(var i=0, n=menus.length; n>i; i++)
   document.getElementById(menus).className='plus';
   }
function switchMenu(what) {
   what.className = what.className=='plus'? 'minus' : 'plus';}

</script>

<style type="text/css">
#menu { position: relative; }
.minus, .plus { float: left; }
.plus img { width: 15px; height: 15px;
             background: url(/it_media/v4/n/images/plus2.gif)
                            no-repeat center center; }
.minus img { width: 15px; height: 15px;
              background: url(/it_media/v4/n/images/minus2.gif)
                            no-repeat center center; }
.plus div { display: none; }
.minus div { display: block; }
</style>

<div id="menu">
   <div onclick="switchMenu(this)">
      <img src='/it_media/v4/n/images/empty.gif'/>
      Personal details<br />
      <div>
         <a href="blah.htm">blah</a><br />
         <a href="blah1.htm">blah 1</a><br />
         <a href="blah2.htm">blah 2</a>
      </div>
   </div>
   <div onclick="switchMenu(this)">
      <img src='/it_media/v4/n/images/empty.gif'/>
      Income details<br />
      <div>
         <a href="blah0.htm">blah 00</a><br />
         <a href="blah01.htm">blah 01</a><br />
         <a href="blah02.htm">blah 02</a>
      </div>
   </div>
</div>

The image 'empty.gif' is one pixel of side and transparent

Usually a menu is made with a list (UL LI)
Click to expand...
 
R

Richard Cornford

neetu schreef:



Erm......

Did you read my message?
Remove the spaces AND keep an eye on your errorconsole.

To spell it out:
WRONG:
document.getElementById('personal_details').style. display='none';

RIGHT:
document.getElementById('personal_details').style.display='none';
(mind the missing space after style.)
Click to expand...

This isn't true. The line that you have labelled "WRONG" is fine
(syntactically). javascript is very tolerant of white space in its
source code, allowing any number of space characters, carriage
returns, etc., to appear in almost any context. The above, for
example, could be written as:-

document
..
getElementById
(
'personal_details'
)
..
style
..
display
=
'none'
;

- and still be syntactically correct javascript source code. Obviously
there is a question of the wisdom of doing anything like that as the
result was a significant drop in the readability of the code. And in
your "WRONG" example the inconsistency of having an arbitrary space
character after just one of the dot operators is not adding to the
readability of the result.
The other 3 lines also have a space.
I leave that as an exercise for you to find them...
Click to expand...

And the additional space characters in those three lines will result
in syntax errors and so should be looked at.

Richard.
 
E

Erwin Moller

Richard Cornford schreef:
This isn't true. The line that you have labelled "WRONG" is fine
(syntactically). javascript is very tolerant of white space in its
source code, allowing any number of space characters, carriage
returns, etc., to appear in almost any context. The above, for
example, could be written as:-

document
.
getElementById
(
'personal_details'
)
.
style
.
display
=
'none'
;

- and still be syntactically correct javascript source code. Obviously
there is a question of the wisdom of doing anything like that as the
result was a significant drop in the readability of the code. And in
your "WRONG" example the inconsistency of having an arbitrary space
character after just one of the dot operators is not adding to the
readability of the result.


And the additional space characters in those three lines will result
in syntax errors and so should be looked at.

Richard.
Click to expand...

Thanks Richard,

As you may have guessed I wasn't aware of that.
I stand corrected.

To be honest: I dislike the fact that JavaScript is so tollerant.

Regards,
Erwin Moller


--
"There are two ways of constructing a software design: One way is to
make it so simple that there are obviously no deficiencies, and the
other way is to make it so complicated that there are no obvious
deficiencies. The first method is far more difficult."
-- C.A.R. Hoare
 
S

SAM

Le 9/16/09 12:41 PM, neetu a écrit :
Hi Sam
Click to expand...

Hi,

where is your html code
we don't know how you try to use the script(s)
I have used your first method. But it keeps on expanding and
collapsing the menu till the mouse is over the image.What I need is
the menu should expand when the mouse is over the + image and it
should collapse when the mouse is taken off the image.
Click to expand...

Not understood,
if the menu is hidden when you leave the [-] image
how do you expect the user could click one of the links ?
But the menu
keeps on collapsing and expanding once the mouse is over the +
image.It does not stops for the user to click on the menu item.
Click to expand...

mouseover and out to put(drag) in the IMG ?

<script type="text/javascript">
document.getElementById('personal_details').style.display='none';
document.getElementById('income_details').style.display='none';
document.getElementById('return_details').style.display='none';
document.getElementById('filing_details').style.display='none';
Click to expand...
function switchMenu(id)
{
var obj = document.getElementById(id).style;
var col = document.getElementById("x" + id);
obj.display = obj.display=='none'? 'block' : 'none';
col.innerHTML = "<img src='/it_media/v4/n/images/" +
(obj.display=='none'? 'plus' : 'minus') + "2.gif'/>";

}

// variante using preloaded images (once for all the menus):

if(document.images) {
plus = new Image();
minus = new Image();
plus.src = '/it_media/v4/n/images/plus2.gif';
minus.src = '/it_media/v4/n/images/minus2.gif';
}

function switchMenu(id)
{
var obj = document.getElementById(id).style;
var col = document.getElementById("x" + id);
col = col.getElementsByTagName('IMG')[0];
obj.display = (obj.display=='none')? 'block' : 'none';
col.src = (obj.display=='none')? plus.src : minus.src;

}
</script>
Click to expand...
<div class="menu"
onmouseover="switchMenu('personal_details');"
onmouseout="switchMenu('personal_details');">
<div id="xpersonal_details">
<img src='/it_media/v4/n/images/plus2.gif'/>
Personal details
</div>
<div id="personal_details">
<a href="blah.htm">blah</a>
<a href="blah1.htm">blah 1</a>
<a href="blah2.htm">blah 2</a>
</div>
</div>
<div class="menu"
onmouseover="switchMenu('income_details');"
onmouseout="switchMenu('income_details');">
<div id="xincome_details">
<img src='/it_media/v4/n/images/plus2.gif'/>
Income details
</div>
<div id="income_details">
<a href="blah.htm">blah</a>
<a href="blah1.htm">blah 1</a>
<a href="blah2.htm">blah 2</a>
</div>
</div>
Click to expand...
Click to expand...
 
N

neetu

Le 9/16/09 12:41 PM, neetu a écrit :
Hi Sam
Click to expand...

Hi,

where is your html code
we don't know how you try to use the script(s)
I have used your first method. But it keeps on expanding and
collapsing the menu till the mouse is over the image.What I need is
the menu should expand when the mouse is over the + image and it
should collapse when the mouse is taken off the image.
Click to expand...

Not understood,
if the menu is hidden when you leave the [-] image
how do you expect the user could click one of the links ?
But the menu
keeps on collapsing and expanding once the mouse is over the +
image.It does not stops for the user to click on the menu item.
Click to expand...

mouseover and out to put(drag) in the IMG ?
<script type="text/javascript">
document.getElementById('personal_details').style.display='none';
document.getElementById('income_details').style.display='none';
document.getElementById('return_details').style.display='none';
document.getElementById('filing_details').style.display='none';
function switchMenu(id)
{
   var obj = document.getElementById(id).style;
   var col = document.getElementById("x" + id);
   obj.display = obj.display=='none'? 'block' : 'none';
   col.innerHTML = "<img src='/it_media/v4/n/images/" +
        (obj.display=='none'? 'plus' : 'minus') + "2.gif'/>";
}
// variante using preloaded images (once for all the menus):
if(document.images) {
   plus = new Image();
   minus = new Image();
   plus.src = '/it_media/v4/n/images/plus2.gif';
   minus.src = '/it_media/v4/n/images/minus2.gif';
   }
function switchMenu(id)
{
   var obj = document.getElementById(id).style;
   var col = document.getElementById("x" + id);
   col = col.getElementsByTagName('IMG')[0];
   obj.display = (obj.display=='none')? 'block' : 'none';
   col.src = (obj.display=='none')? plus.src : minus.src;
}
</script>
<div class="menu"
  onmouseover="switchMenu('personal_details');"
  onmouseout="switchMenu('personal_details');">
   <div id="xpersonal_details">
      <img src='/it_media/v4/n/images/plus2.gif'/>
      Personal details
   </div>
   <div id="personal_details">
       <a href="blah.htm">blah</a>
       <a href="blah1.htm">blah 1</a>
       <a href="blah2.htm">blah 2</a>
   </div>
</div>
<div class="menu"
  onmouseover="switchMenu('income_details');"
  onmouseout="switchMenu('income_details');">
   <div id="xincome_details">
      <img src='/it_media/v4/n/images/plus2.gif'/>
      Income details
   </div>
   <div id="income_details">
       <a href="blah.htm">blah</a>
       <a href="blah1.htm">blah 1</a>
       <a href="blah2.htm">blah 2</a>
   </div>
</div>
Click to expand...
Click to expand...
Click to expand...

Let me explain my problem in detail.I have a three level menu like
this:

[+]level 1
[+]level 11
[+]level 12
[-]level 13
level 131
level 132
level 133
[+]level 2

and so on.

I want to make the above menu using html and javascript and I dont
know javascript at all.I found the below javascript for expand/
collapse menu on net.

<script type="text/javascript">
document.getElementById('level_1').style.display='none';
document.getElementById('level_2').style.display='none';
document.getElementById('level_3').style.display='none';
document.getElementById('level_4').style.display='none';

function switchMenu(id)
{
obj=document.getElementById(id);
col=document.getElementById("x" + id);
if (obj.style.display=='none')
{
obj.style.display='block';
col.innerHTML="<img src='/it_media/v4/n/images/minus2.gif'/>";

}
else
{
obj.style.display='none';
col.innerHTML="<img src='/it_media/v4/n/images/plus2.gif'/>";

}
}
</script>

While using this script i found that when user clicks on level 1 [+]
image, the menu collapses, but what I want is the menu should collpase
on onmouseover and expand on onmouseout.


and my HTML code is like this:

<div class="menu" onmouseover="switchMenu('level_1');"
onmouseout="switchMenu('level_1');">
<div id="xlevel_1">
<img src='/it_media/v4/n/images/plus2.gif'/>
level 1
</div>
<div id="level_1">
<div id="xlevel_11">
<img src='/it_media/v4/n/images/plus2.gif'/>
level 11
</div>
<div id="level_11">
<ul>
<li class="item">
<a href="url" title=" ">level 111</
a>
</li>
<li class="item">
<a href="url" title=" ">level 112</a>
</li>
</ul>
</div>
</div>
 
N

neetu

Ok

now i have changed the javascript function switchMenu into two
functions which are as follows:

<script type="text/javascript">
document.getElementById
('personal_details').style.display='block';
document.getElementById
('income_details').style.display='block';
document.getElementById
('return_details').style.display='block';
document.getElementById
('filing_details').style.display='block';
document.getElementById
('aboutyou').style.display='block';
document.getElementById
('otherdetail').style.display='block';
document.getElementById
('income').style.display='block';
document.getElementById
('deductions').style.display='block';
document.getElementById
('relief').style.display='block';
document.getElementById
('taxes').style.display='block';
document.getElementById
('itrpreview').style.display='block';
document.getElementById
('reviewerrors').style.display='block';
document.getElementById
('otherinfo').style.display='block';
document.getElementById
('payment').style.display='block';
document.getElementById
('downloadreturn').style.display='block';
document.getElementById
('efile').style.display='block';

function collapseMenu(id)
{

obj=document.getElementById(id);

col=document.getElementById("x" + id);

if
(obj.style.display=='block')
{

obj.style.display='none';

col.innerHTML="<img src='/it_media/v4/n/images/plus2.gif'/>";
}
}

</script>

<script type="text/javascript">
document.getElementById
('personal_details').style.display='none';
document.getElementById
('income_details').style.display='none';
document.getElementById
('return_details').style.display='none';
document.getElementById
('filing_details').style.display='none';
document.getElementById
('aboutyou').style.display='none';
document.getElementById
('otherdetail').style.display='none';
document.getElementById
('income').style.display='none';
document.getElementById
('deductions').style.display='none';
document.getElementById
('relief').style.display='none';
document.getElementById
('taxes').style.display='none';
document.getElementById
('itrpreview').style.display='none';
document.getElementById
('reviewerrors').style.display='none';
document.getElementById
('otherinfo').style.display='none';
document.getElementById
('payment').style.display='none';
document.getElementById
('downloadreturn').style.display='none';
document.getElementById
('efile').style.display='none';


function expandMenu(id)
{

obj=document.getElementById(id);

col=document.getElementById("x" + id);

if
(obj.style.display=='none')
{

obj.style.display='block';

col.innerHTML="<img src='/it_media/v4/n/images/minus2.gif'/>";
}
}
</script>

But the problem now is when I bring mouseout from first level the menu
collpases and i am not able to select the secondlevel menu. i.e
after taking mouse away from level 1, I am not able to select level 11
as leve 1 collapses.

Please read my earlier post before answering the query.

Le 9/16/09 12:41 PM, neetu a écrit :

where is your html code
we don't know how you try to use the script(s)
Click to expand...
Not understood,
if the menu is hidden when you leave the [-] image
how do you expect the user could click one of the links ?
But the menu
keeps on collapsing and expanding once the mouse is over the +
image.It does not stops for the user to click on the menu item.
Click to expand...
Click to expand...
mouseover and out to put(drag) in the IMG ?
On Sep 16, 1:38 am, SAM <[email protected]>
wrote:
<script type="text/javascript">
document.getElementById('personal_details').style.display='none';
document.getElementById('income_details').style.display='none';
document.getElementById('return_details').style.display='none';
document.getElementById('filing_details').style.display='none';
function switchMenu(id)
{
   var obj = document.getElementById(id).style;
   var col = document.getElementById("x" + id);
   obj.display = obj.display=='none'? 'block' : 'none';
   col.innerHTML = "<img src='/it_media/v4/n/images/" +
        (obj.display=='none'? 'plus' : 'minus') + "2.gif'/>";
}
// variante using preloaded images (once for all the menus):
if(document.images) {
   plus = new Image();
   minus = new Image();
   plus.src = '/it_media/v4/n/images/plus2.gif';
   minus.src = '/it_media/v4/n/images/minus2.gif';
   }
function switchMenu(id)
{
   var obj = document.getElementById(id).style;
   var col = document.getElementById("x" + id);
   col = col.getElementsByTagName('IMG')[0];
   obj.display = (obj.display=='none')? 'block' : 'none';
   col.src = (obj.display=='none')? plus.src : minus.src;
}
</script>
<div class="menu"
  onmouseover="switchMenu('personal_details');"
  onmouseout="switchMenu('personal_details');">
   <div id="xpersonal_details">
      <img src='/it_media/v4/n/images/plus2.gif'/>
      Personal details
   </div>
   <div id="personal_details">
       <a href="blah.htm">blah</a>
       <a href="blah1.htm">blah 1</a>
       <a href="blah2.htm">blah 2</a>
   </div>
</div>
<div class="menu"
  onmouseover="switchMenu('income_details');"
  onmouseout="switchMenu('income_details');">
   <div id="xincome_details">
      <img src='/it_media/v4/n/images/plus2.gif'/>
      Income details
   </div>
   <div id="income_details">
       <a href="blah.htm">blah</a>
       <a href="blah1.htm">blah 1</a>
       <a href="blah2.htm">blah 2</a>
   </div>
</div>
Click to expand...
Click to expand...

Let me explain my problem in detail.I have a three level menu like
this:

[+]level 1
     [+]level 11
     [+]level 12
     [-]level 13
          level 131
          level 132
          level 133
[+]level 2

and so on.

I want to make the above menu using html and javascript and I dont
know javascript at all.I found the below javascript for expand/
collapse menu on net.

<script type="text/javascript">
document.getElementById('level_1').style.display='none';
document.getElementById('level_2').style.display='none';
document.getElementById('level_3').style.display='none';
document.getElementById('level_4').style.display='none';

function switchMenu(id)
{
obj=document.getElementById(id);
col=document.getElementById("x" + id);
if (obj.style.display=='none')
{
obj.style.display='block';
col.innerHTML="<img src='/it_media/v4/n/images/minus2.gif'/>";

}

else
{
obj.style.display='none';
col.innerHTML="<img src='/it_media/v4/n/images/plus2.gif'/>";

}
}

</script>

While using this script i found that when user clicks on level 1 [+]
image, the menu collapses, but what I want is the menu should collpase
on onmouseover and expand on onmouseout.

and my HTML code is like this:

<div class="menu" onmouseover="switchMenu('level_1');"
onmouseout="switchMenu('level_1');">
   <div id="xlevel_1">
      <img src='/it_media/v4/n/images/plus2.gif'/>
      level 1
   </div>
   <div id="level_1">
             <div id="xlevel_11">
               <img src='/it_media/v4/n/images/plus2.gif'/>
                 level 11
            </div>
           <div id="level_11">
           <ul>
                <li class="item">
                    <a href="url" title=" ">level111</
a>
               </li>
               <li class="item">
                    <a href="url" title=" ">level112</a>
                </li>
            </ul>
         </div>
     </div>
Click to expand...
 
S

SAM

Le 9/16/09 10:38 AM, SAM a écrit :
Le 9/16/09 9:06 AM, neetu a écrit :
Click to expand...

<div class="menu">
<div onmouseover="switchMenu('level_1');"
onmouseout="switchMenu('level_1');">
<img id="xlevel_1" src='plus.gif'/>
level 1
<div id="level_1">
<div id="xlevel_11">
<img src='/it_media/v4/n/images/plus2.gif'/>
level 11
</div>
<div id="level_11">
<ul>
<li class="item">
<a href="url" title=" ">level 111</a>
</li>
<li class="item">
<a href="url" title=" ">level 112</a>
</li>
</ul>
</div>
</div><!-- end sub-menus of level 1 -->
</div><!-- end menu level 1 -->
</div><!-- end menu -->
<script type="text/javascript">
function switchMenu(id)
{
obj=document.getElementById(id);
col=document.getElementById("x" + id);
if (obj.style.display=='')
{
obj.style.display='none';
col.src = '/it_media/v4/n/images/plus2.gif';
}
else
{
obj.style.display='';
col.src='/it_media/v4/n/images/minus2.gif';
}
}
switchMenu('level_1');
switchMenu('level_2');
switchMenu('level_3');
switchMenu('level_4');
</script>
 
S

SAM

Le 9/17/09 11:02 AM, SAM a écrit :
Le 9/16/09 10:38 AM, SAM a écrit :

<div class="menu">
<div onmouseover="switchMenu('level_1');"
onmouseout="switchMenu('level_1');">
<img id="xlevel_1" src='plus.gif'/>
level 1
<div id="level_1">
<div id="xlevel_11">
<img src='/it_media/v4/n/images/plus2.gif'/>
level 11
</div>
<div id="level_11">
<ul>
<li class="item">
<a href="url" title=" ">level 111</a>
</li>
<li class="item">
<a href="url" title=" ">level 112</a>
</li>
</ul>
</div>
</div><!-- end sub-menus of level 1 -->
</div><!-- end menu level 1 -->
</div><!-- end menu -->
<script type="text/javascript">
function switchMenu(id)
{
obj=document.getElementById(id);
Click to expand...

if(obj) {
col=document.getElementById("x" + id);
if (obj.style.display=='')
{
obj.style.display='none';
col.src = '/it_media/v4/n/images/plus2.gif';
}
else
{
obj.style.display='';
col.src='/it_media/v4/n/images/minus2.gif';
}
}
}
switchMenu('level_1');
switchMenu('level_2');
switchMenu('level_3');
switchMenu('level_4');
</script>
Click to expand...


the script must be after the menu
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need help , Having problem with Drag n Drop ? 9
image toggle problem in accordion menu 1
? Trouble with: passing dragElement(e.target.id); 8
Please Help? 0
Need help , Having problem with Drag n Drop... 1
Help with Visual Lightbox: Scripts 2
Help with code 0
Image not changing between "mute" & "un-mute" images. 5

Members online

No members online now.
Total: 34 (members: 0, guests: 34)
Robots: 363

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,013
Latest member
KatriceSwa

Latest Threads

Top