|
|
Posted by J.O. Aho on 03/24/07 10:45
Nospam wrote:
> "J.O. Aho" <user@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
[Back to original message]
|