WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 Using DIVs as links?, Guillermo, January 29, 2004
     Re:Using DIVs as links?, Kiwi, January 29, 2004
         Re:Using DIVs as links?, Guillermo, January 29, 2004
             Re:Using DIVs as links?, Kiwi, January 30, 2004
                 Re:Using DIVs as links?, Guillermo, January 30, 2004

Subject: Re:Using DIVs as links? From: Guillermo Date: January 29, 2004

Well, I've already tried that. Didn't work.
Here's the code I'm using:

<!-- The 1st item in the menu -->
<div class="navBotonOff" onmouseover="this.className='navBotonOn'" onmouseout="this.className='navBotonOff'">

<img src="/apps/Manager/_ModulosBase/barra_navegacion/_imagenes/nav_flecha.gif" name="navItem1" width="11"

height="11" border="0" id="navItem1" />

<a href="javascript: toggleMenu('1');" class="navBotonLink">Menu Item 1</a>

</div>

<!-- The submenu for the 1st item -->

<div class="navSubMenu" id="navSubMenu1" style="display:none">
 
<a href="/apps/Manager/_modulosBase/stats/default.asp" target="MarcoPrincipal" class="navSubMenuLink">Submenu Item 1
</a>
 
<br>
<br>
 
</div>

As you can see, the main DIV already has some events such us onmouseover, wich changes the style for the DIV.

This is also another problem I have, because the style class is not changed until I hover the link insted of the

rest of the DIV. Using onclick="toggleMenu('1')" has no effect whatsoever.


 

From: Kiwi
Sent: January 29, 2004
Subject: Re:Using DIVs as links?

whats wrong with <div onclick="toggleMenu('1');"> ?

That would capture the whole div

From: Guillermo
Sent: January 30, 2004
Subject: Re:Using DIVs as links?

Here's the deal. I have created a collapsible menu using DIVs, and a simple JavaScript function that changes the DIVs stlye from "none" to block", like this:

 function toggleMenu( iNumber ) {
 if( document.getElementById("navSubMenu"+iNumber).style.display == "block" ) {
    document.images["navItem"+iNumber].src = img_up;
    document.getElementById("navSubMenu"+iNumber).style.display = "none";
 
  } else {
    document.images["navItem"+iNumber].src = img_down;
    document.getElementById("navSubMenu"+iNumber).style.display = "block";
   }
 }

At the same time, it also changes an arrow gif. Now, I have this function attached to links, such as:

href="javascript: toggleMenu('1');"

But the thing is, the link is inside another DIVs, and I'd like to use the ENTIRE DIVs to behave as the link, is it possible? I want the user to be able to click anywhere in the DIVs and collapse the menu, insted of having to click the text link I'm using now.






Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX