top menu leading to a sub menu on the sidebar

"J.O. Aho" <user.RemoveThis@example.net> wrote in message
news:56kblkF29iglgU1@mid.individual.net...
> Nospam wrote:
> > I am wondering if this is possible with fireworks, I am planning on
having a
> > fireworks png image map at the top of my page, and those image maps,
lead to
> > a submenu on the sidebar, I am wondering if the only way to do this is
via
> > frames/javascript, can this be done purely on fireworks alone, would
anyone
> > have a tutorial on an example of this?
>
> Not sure what you mean with fireworks, but you can use hidden divs and a
bit
> of javascript to make the dives visible when you click on the image.
>

Would you have a tutorial example of how this is done?

Basically what I am trying to do is have a menu image map, containing four
menus in the header of my page, each of these when clicked will expand the
menus in the sidebar, and those menus in the sidebar when clicked will show
in the main content, i.e my page is seperated with a header, sidebar, main
content, and footer, is there any other way of doing this other than with
javascript? Would you have an example tutorial on how this is done
with/without javascript?

thanks
 >> Stay informed about: top menu leading to a sub menu on the sidebar 

Nospam wrote:
>
> Basically what I am trying to do is have a menu image map, containing four
> menus in the header of my page, each of these when clicked will expand the
> menus in the sidebar, and those menus in the sidebar when clicked will show
> in the main content,

Since you asked about doing this in Fireworks, I can only assume you
drew up a graphic design in FW, now you want to set some hot spots,
slice it up and let FW make a web site out of it. Very bad idea.

Image maps for navigation generally stink. Slicing up images and
splicing them back together in HTML stink more. The HTML code generated
from graphics programs stinks even more than that.

If you're going to do it, you should learn how to do it right, or at
least how to not do it so badly. That means learning some HTML and CSS
yourself and not just relying on some program to do it for you. Most do
a lousy job of it.

Here is a decent online tutorial, though you should stick with HTML 4.01
Strict instead of XHTML.
http://www.htmldog.com/

Here are some templates you can use/study to see how to do CSS layouts.
http://webhost.bridgew.edu/etribou/layouts/
http://css-discuss.incutio.com/?page=CssLayouts

And navigation menus.
http://css.maxdesign.com.au/listamatic/

--
Berg
 >> Stay informed about: top menu leading to a sub menu on the sidebar 

Nospam wrote:
> "J.O. Aho" <user RemoveThis @example.net> wrote in message
> news:56kblkF29iglgU1@mid.individual.net...
>> Nospam wrote:
>>> I am wondering if this is possible with fireworks, I am planning on
> having a
>>> fireworks png image map at the top of my page, and those image maps,
> lead to
>>> a submenu on the sidebar, I am wondering if the only way to do this is
> via
>>> frames/javascript, can this be done purely on fireworks alone, would
> anyone
>>> have a tutorial on an example of this?
>> Not sure what you mean with fireworks, but you can use hidden divs and a
> bit
>> of javascript to make the dives visible when you click on the image.
>>
>
> Would you have a tutorial example of how this is done?

Sorry no tutorial, but I can make a hasty description with broken English.


> Basically what I am trying to do is have a menu image map, containing four
> menus in the header of my page, each of these when clicked will expand the
> menus in the sidebar, and those menus in the sidebar when clicked will show
> in the main content, i.e my page is seperated with a header, sidebar, main
> content, and footer, is there any other way of doing this other than with
> javascript? Would you have an example tutorial on how this is done
> with/without javascript?

I assume you are somewhat familiar with CSS and how to place out div-elements
on places where you want them to be.

Here is a crude example, I have selected to use an anchor to open/close the
div-element, but you can use any element that accepts the onclick-event.

Each div-element have to have their unique id and the showdiv() function has
to be called with the id-name (try to avoid names that are reserved words in
javascript, like form). If the div is visible, then it will be closed if the
link is pressed on.

In this example you must have the style="display: none;" set in the div
element, you can't move it to the CSS file, as then the script won't work.


--- testpage.html ---
<html>
<head><title>Testpage</title>

<script type="text/javascript">
function showdiv(id) {
el = document.getElementById(id);
if (el.style.display == 'none') {
el.style.display = '';
el = document.getElementById('_' + id);
} else {
el.style.display = 'none';
el = document.getElementById('_' + id);
}
}
</script>

</head>
</body>
<a href="http://www.example.net/index.php" title="My SubMenu 1"
onclick="javascript:showdiv('myhiddendiv1');return false;">Link to open the
SubMenu</a>
<a href="http://www.example.net/index.php" title="My SubMenu 1"
onclick="javascript:showdiv('myhiddendiv2');return false;">Link to open the
other submenu</a>
<div id="myhiddendiv1" style="z-index: 0; display: none;">
Here you have what you want in the submenu
</div>
<div id="myhiddendiv2" style="z-index: 0; display: none;">
Here you have what you want in the other Submenu
</div>
</body>
</html>
--- eof ---

I hope you will get this to work as you want.
--

//Aho
 >> Stay informed about: top menu leading to a sub menu on the sidebar