Menus - again! FP2003 Mouseover stuff

[Robin]

Sorry - I see a lot of menu questions here, but I don't really know enough
about this and I don't particularly want the usual flyout menus! I've just
upgraded to FP2003 and am still finding my way around.

I have meticulously created a copy of a Windows menu structure at:

http://www.info.msacademy.org.uk/

This is done with separate images for the top, bottom, dividers and menu
items (listed on the above page), so potentially any menu can be built..
(Some are still bmps but very small and I will change these in time.)

My question is about how to create the mouseover blue background for a
standard Windows environment. I have suitable images to replace
non-selected items with the blue selected one, but I can't work out how to
do this. The images on the above site are currently cell background images,
simply because this made the cell text easier to sort out (since this is
naturally in front of the background). I have created behaviours to change
the font colour on mouseover, but if I create a behaviour to swap the image,
it sits in front of the text and blocks it out.

Any ideas?

Robin

 

[Jon Spivey]

Hi,
I'd clip the folder image down to just the folder and make it a transparent
background- ie eliminate the grey bar then set this as a background to the
link, eg
a.menuLink{
background: #999 url(Folder.gif) no-repeat;
padding-left:20px;
color: #000;
}
a.menuLink:hover{
background: #00f url(Folder.gif) no-repeat;
color: #fff;
}
you'll have to experiment to get this right but thats the basic idea

Jon
Microsoft MVP - FP

 

[Robin]

Thanks.

I've had a go at this but I don't know enough about the code to make it work
yet - but I will!

In the meantime I came up with a method that I do understand - it's probably
a lot more code but it's very simple (and repetitive).

This uses mouseover behaviours in td tags which works fine for ie but I
don't know if this is ok for netscape. There were other options which
worked - ish, but the action of moving from one item to another came out too
clonky.

In the header:

function FP_goToURL(url) {//v1.0
window.location=url;
}

Then in the body table, a separate td for each button (of each menu):

<td background='../images/folder_closed.gif'
style="width: 100%; height: 20px" bgcolor="#D4D0C8"
onmouseout="this.style.color='black';
this.style.backgroundColor='#D4D0C8';"
onmouseover="this.style.color='white';
this.style.backgroundColor='#0A246A';"
onclick="FP_goToURL(/*href*/'procedures.htm')"<font face="Tahoma" style="font-size: 8pt"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Procedures Manual
</font>
</td>

http://www.info.msacademy.org.uk/

It looks fairly elegant - not sure the same can be said for the code!

Robin

 

[Jon Spivey]

Hi,

that should work in anything but NN4 however it's not the best way. To give
you an idea stick this code on a page
<style type="text/csss">
a{
background-color: red;
color:white;
display:block;
position:relative;
text-decoration:none;
}
a:hover{
background-color:blue;
}
</style>
<table width=150>
<tr><td><a href="#">Link One</a><.td><.tr>
<tr><td><a href="#">Link One</a><.td><.tr>
<tr><td><a href="#">Link One</a><.td><.tr>
</table>

See what's happened here? By adding display block position:relative to the
link rule we can make the whole width of the table cell a clickable link.
This is a very useful technique to make rollover effects without script or
images.

Later today when I have more time I'll put up a little example of how to
build your menu like this

Jon
Microsoft MVP - FP

 

[Robin]

Thanks Jon

I've now got this working - eventually spotted the 4 typos : (obviously a
test!).

I guess I need to by a JavaScript book. The syntax is ok but I need to know
which commands (is that even the right word?) work and which don't. I've
played around with some options and for example, find that margin doesn't
work. So how do I stop the text appearing in the top LH corner?

Can you suggest a book or site to study?

Regards

Robin