Dreamweaver MX

[JohnnieCat]

Hey all! Hoping someone out there can help me with this simple (i"m sure) problem that I'm too blond to figure out!

I am creating a few menus in Dreamweaver MX that are actually layers that show/hide when their link is activated with "mouseover". I can get them all to show and to hide when I go down to the next menu item to have that ones layer show but what I want now is for the menus to completely disappear when the mouse leaves the menu items.

So in other words I have a list of links that when you mouseover them a menu appears beside them. When the mouse goes on to the next link the previous menu disappears and the next menu shows. But when the mouse is off the list of links the last menu item that was showing stays visible.

How do I get it to hide?

Any suggestions would be greatly appreciated!!!!!!:x

[bahama llama]

Do you know any javaScript? I think the onmouseout command would would with visibility set to no. I am not sure of the syntax but if you can post your page I could borrow the code and post the javaScript for you. If you do not know javaScript it is easy to learn. I check back for more info. Don.:t

[JohnnieCat]

bahama llama

Thank you for your reply! I know a little javascript. This is how i have it set up so far...

go to http://members.shaw.ca/mrsdunnsclass/

This is a new website I am making for my school. I need the menus on the left hand side to go away when you aren't viewing them.

Any help is GREATLY appreciated!

JohnnieCat

[bahama llama]

Sorry it took so long but college just started up again and I have been busy.

Here is what I came up with: by using the onMouseOut command and restating the function: MM_showHideLayers and changing the appropriate argument from show to hide I am able to make the menus disappear but the problem is that when you move the mouse of the text that brings up the menu you lose the menu before you can click it.

On the plus side I know exactly what you want to do and I have found a site that does it: http://www.miamidolphins.com/home/home_index.asp
If you look at the menu bar across the top that has the pressbox, lockeroom, etc menu, this does what you want. I will try and dissect the code and change it for your page but it may take me a little bit of time. I hope this helps out some. Don.:)

[DocEvi1]

Welcome to sysopt. ****, thats a might fine start page, but I would say something : in the UK at least, it is a very risky bussiness putting images of school children on the web without strict written permission from their parents. It is all to do with the possibilities of naughty people getting hold of the pictures and mutating them (or the other thing that doesn't bear mentioning). Buildings are a far safer bet.

The problem with your code is that you have used Macromedia Dreamweaver. As you will be aware it is a WYSIWYG editor, which works for every application rather than just your page. It is a powerful piece of software, but no-where near as versitile as a human & notepad.

If I where you I would start investigating manually changing your code, from first glance it is very bloated and has a lot of excess handles in it, not the best way to go about it. I'll be honest, that must be some of the worst coding I have every seen for this application (One I did, not looking as good visually, but coding -> www.ryton-comp.gateshead.sch.uk).

bahama llama is correct, a quick fix (very ugly) would be to use the onMouseOut command i.e.:

onMouseOut="MM_showHideLayers(/**entire string, but with all labelled 'hide' rather than one 'show' */)"

or

onMouseOut="MM_showHideLayers('Highschool','','hide','Welcome' ,'','hide','news','','hide','admissions','','hide' ,'alumnae','','hide','equestrian','','hide','esl', '','hide','findit','','hide','coedjrsch','','hide' )"

so the whole line would read:

<a href="javascript:void(0)" onMouseOver="MM_showHideLayers('Highschool','','hide','Welcome' ,'','hide','news','','show','admissions','','hide' ,'alumnae','','hide','equestrian','','hide','esl', '','hide','findit','','hide','coedjrsch','','hide' )" onMouseOut="MM_showHideLayers('Highschool','','hide','Welcome' ,'','hide','news','','hide','admissions','','hide' ,'alumnae','','hide','equestrian','','hide','esl', '','hide','findit','','hide','coedjrsch','','hide' )"><img src="newsevents.jpg" alt="News & Events" name="newsevents" width="140" height="30" border="0"></a>

Not the nicest piece of code ever!!!!


If this is for your school's site (i.e. this is what the public are too see, I would seriously consider getting rid of Dreamweaver MX and working by hand. I, and other here, will be quite happy to help you / point you in the right direction.

Stefan

[JohnnieCat]

Wow! Thanks you guys! As you may of noticed I am a novice at this. I teach at the school and am a media arts teacher not a programmer by any means.

I will try and change the code and then repost it. If you could look at it again after that I would appreciate any criticism you have (however a girl can only take so much!!! :rolleyes: )

Please check back in a few days once I have updated it!

Thanks again,
Maureen

PS - DocEvil has an excellent point in putting kids pics on the net and I have my **** covered with that issue...all parents have signed off on it! Thanks for the tip!

[Excavatorak]

I tried your menu for practice...used CSS instead of Java. See if you can use it. Put your background BLANK.JPG in the same directory with the code or you won't see anything as the text is white.





<html>
<head>
<title>QMSmenu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

div#menu {
position: absolute;
top: 12px;
left: 12px;
width: 160px;
font: 16px Arial, sans-serif;
}

div#menu a {display: block; text-align: center; font: bold 1em sans-serif; padding: 5px 10px; margin: 0 0 0px; border-width: 0; text-decoration: none; color: #FFFFFF; background: url(blank.jpg); border-right: 3px solid #CCCC99;}

div#menu a:hover {
color: #dd0000;
border-right: 3px dashed red;
background-image: url(blank.jpg);
}

div#menu a span {display: none;}

div#menu a:hover span {
display: block;
position: absolute;
top: 240px;
left: 150;
width: 125px;
padding: 5px;
margin: 10px;
color: #FFFFFF;
font: 10px Verdana, sans-serif;
text-align: center;
background-image: url(blank.jpg);
}

div#content {position: absolute; top: 100px; left: 160px; right: 25px; color: #000000; background: #ffffff; font: 16px Arial, sans-serif; padding: 10px; text-align: justify;}


</style>
</head>
<table width="100%" height="293">
<tr>
<td width="25%"><div id="menu">
<a href="welcome.html">Welcome<span></span></a>
<a href="newsevents.html">News &amp; Events<span>News and Events</span></a>
<a href="admissions.html">Admissions<span>Admissions</span></a>
<a href="alumnae.html">Alumnae<span>Alumnae</span></a>
<a href="hsactivities.html">High School for Girls<span>Academics, Riding, Boarding Life, Fine Arts, Athletics, Student Life, ESL</span></a>
<a href="co-ed.html">Co-ed Junior School<span>Co-ed</span></a>
<a href="equine_activities.html">Equestrian Program<span>Equestrian Program</span></a>
<a href="esl.html">International/Esl<span>Esl</span></a>
<a href="search.html">Find it<span>Search QMS</span></p>
</div>
<body>

</body>
</html>

[JohnnieCat]

Excavatorak: wow that is a lot shorter code...jowever I am the first to admit that I am just struggling away here and know nothing about CSS so I will see if I can teach myself how to use it. Any good sites that may come in handy???? I dont really know where to start with CSS...do I use it like html?

Thanks so much for taking the time and helping with this! You guys are wonderful! :-@

[Excavatorak]

Here's a couple helpfull CSS tutors:

http://www.boogiejack.com/index.html
http://www.westciv.com/style_master/academy/css_tutorial/properties/background.html http://codepunk.hardwar.org.uk/bcss.htm