Post by NospamPost by J.O. AhoPost by NospamI am wondering if this is possible with fireworks, I am planning on
having a
Post by J.O. AhoPost by Nospamfireworks png image map at the top of my page, and those image maps,
lead to
Post by J.O. AhoPost by Nospama submenu on the sidebar, I am wondering if the only way to do this is
via
Post by J.O. AhoPost by Nospamframes/javascript, can this be done purely on fireworks alone, would
anyone
Post by J.O. AhoPost by Nospamhave a tutorial on an example of this?
Not sure what you mean with fireworks, but you can use hidden divs and a
bit
Post by J.O. Ahoof 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.
Post by NospamBasically 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