Rollover images on navigational bar items

Has anyone implemented rollover images on navigational bar items to change colors of the images when passed over and out? I already have the images.
From what I can determine, I believe I need an onMouseOver and onMouseOut event defined in my navigational bar entry template that references a javascript function. Then I think I also need two javascript functions defined in the header portion of my page template to get the new image source.
If you have done this could you post the following:
1 - navigational bar entry template, and
2 - the two javascript functions used
My navigational bar entry template currently looks like this:
<td>
#TEXT#<img src="#IMAGE#" />
#TEXT#</td>
Thanks alot, Andy

Has anyone implemented rollover images on navigational bar items to change colors of the images when passed over and out? I already have the images.
From what I can determine, I believe I need an onMouseOver and onMouseOut event defined in my navigational bar entry template that each references a javascript function. Then I think I also need two javascript functions defined in the header portion of my page template to get the new image source.
If you have done this could you post the following: 1) navigational bar entry template, and 2) the two javascript functions used.
My navigational bar entry template currently looks like this:
<td><a href="#LINK#" style="text-align:center;display:block;"><img src="#IMAGE#" /><br />#TEXT#</a></td>
Thanks alot, Andy

Similar Messages

Image in Navigation Bar

Hi,
could anyone tell me, what I have to do, to display a image in the "Navigation Bar".
I select a image in section "Image Attributes", but it isn't displayed?
The text in field "Icon Subtext" is displayed.
Thanks for any help
Norbert

Hi Roel,
please can you reopen that issue!
First question:
- I realized, that my images will not shown with the IE 7?
Second problem I have:
- is there a way to define a second variable besides #NAVIGATION_BAR# maybe #NAVIGATION_BAR_1# and redirect items defined in the application under the "Shared Components" --> "Navigation Bar" to that variable?
Purpose is to have two navigation bars and show e.g. two items in the first, the next item in the second bar.
Do you have answers for the two questions?
Thank you
Norbert

Image Object Navigation Bar

Hi.
I am using DWCS3 to insert the navigation bar into my
templates. Everything is woorking smoothly, except one little
problem.
My navigation bar contains rollever images are in different
colors (e.g., red, blue, green) Home | Contact | About Us.
When I clicked on About Us, I would like the rollerover
button stay pressed down (green), so I know that I am visiting the
page.
Does anyone know what I need to tweak to get it to work like
I mentioned above?
thanks.
S

I am finding browsers like IE6 increasingly impossible to
work with, every error that dreamweaver seems to report for browser
compatability seems to be because of this. As far as I know there
is no simple way around this, I will be watching this thread to see
what others have to say though!
I have seen when looking at HTML some site's have a <IF
IE6> or something along them lines, can anyone shed anymore
light?
Thanks,
Dave

Using Insert/Images Objects/Navigation Bar - weird quirks

DW CS4
When I go to the above path in DW to add a navigation bar and add a few elements, the code produced seems fine (I'm talking strictyl about the sentence case of the code - all lowercase). Now if I go to Modify/Navigation Bar to add a few more elements, the additional code is now in a different case (it's in sentense case - first letter capital). For example:
When I first insert a navigation bar, some resulting code is
onmouseover="MM_nbGroup('over','home','','',1)"
but when I go to modify the navigation bar, the additional code added now becomes
onMouseOver="MM_nbGroup('over','galleries','','',1)"
I know how to quickly find/replace to fix this, but this is just weird to me why DW would use two different sentence cases. Is that just a function of the software, or is there some setting I'm missing to make sure ALL code is in lowercase? I already have my default tag case <lowercase>
Test it out yourself and let me know if anyone gets the same results or knows why this is happening.
Thanks...
I just noticed something else... on initial creation, the code includes id="", but when I modify/add to the nav bar, there is no id="" included (I have to manually add that code)... what the crap is going on??

Unicode is the character set encoding -- not the same as DTD.
I can't recreate your experience with DW on Windows Vista.
Here's the code I get from DW -- same as before and after editing the menu...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">

</script>
</head>
<body onload="MM_preloadImages('Images/Up-Arrow-64.png','Images/Up-Arrow-64-hover.png')">
<a href="http://alt-web.com" target="_top" onclick="MM_nbGroup('down','group1','Home','Images/Up-Arrow-64.png',1)" onmouseover="MM_nbGroup('over','Home','Images/Up-Arrow-64-hover.png','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/Up-Arrow-64.png" alt="Home" name="Home" width="64" height="64" border="0" id="Home" onload="" /></a>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Images in Navigation Bar

Hi I'm new to iweb I've just published my site online (still in progress) when I publish it from a local folder everything looks in order, however when i publish the site online it adds images to some of the tabs in the navigation bar. I've deleted the page several times and inserted a new home page but unfortunately this problem still crops up. I would be gratfeul if someone could help me solve this problem.
Thx Martin

I prefer clickable links :
http://www.designamind.co.uk/
Anyway, you mean this :
I think you use the Modern Frame theme which has the links in the navbar right-aligned.
You added tab-like images, but these do not fit the links.
http://www.designamind.co.uk/Design_A_Mind/About_Me_files/shapeimage_1.png
http://www.designamind.co.uk/Design_A_Mind/About_Me_files/shapeimage_2.png
http://www.designamind.co.uk/Design_A_Mind/About_Me_files/shapeimage_3.png
Solve it by hiding the nav bar and use textboxes with links and place them on top of the images, or use these images as background of the textboxes.

How do set up image based navigation bar in DW CC?

How do you set up images as the list members that form a navigation bar?

Spry is gone, true, but CSS most definitely is part of DWCC...
http://tv.adobe.com/watch/learn-dreamweaver-cc/using-the-css-designer-panel/
You should be able to follow a css tutorial after familiarizing yourself with the CSS Designer.
If you don't understand html and css in and of themselves, and you have a budget, you may want to get the Menu Magic DW Extension from Project VII. That would allow you to use the DW Design View interface to make a menu.
If you have a fair understanding of the basics though, any "jquery menu" or "pure css menu" available freely on the web would do the trick. The vast majority of them come with a quick how to that includes mostly copy/paste instructions.

Clear Cache when I hit logout navigation bar item

I want to clear all of my cache from the browser once the user logout.
Please advise me.
Thanks

Hi Tony,
I didn't get what you exactly mean.
I have an external URL for the logout url.
When the users clicks the logout link from the navigation bar in the application then I want to clear all of my cache from the application.
Can you be more specific please.

Rollover images on Apple wiki

Does the Apple wiki allow the use of rollover images? It keeps changing the html code for me. Is there another way to have a rollover image on the Apple wiki? Thanks.

Has anyone implemented rollover images on navigational bar items to change colors of the images when passed over and out? I already have the images.
From what I can determine, I believe I need an onMouseOver and onMouseOut event defined in my navigational bar entry template that each references a javascript function. Then I think I also need two javascript functions defined in the header portion of my page template to get the new image source.
If you have done this could you post the following: 1) navigational bar entry template, and 2) the two javascript functions used.
My navigational bar entry template currently looks like this:
<td><a href="#LINK#" style="text-align:center;display:block;"><img src="#IMAGE#" /><br />#TEXT#</a></td>
Thanks alot, Andy

Horizontal Navigation Bar

I'm using the Spry horizontal menu bar, and I've got a problem.
In IE7, but not in Firefox or Safari or even IE8, the hover state is apparently only active for the text in the submenus, not the entire 'button'. That is, the list item is styled to look like a button, it's 12 ems wide, the text for most of the items doesn't fill the entire button. If one puts their mouse over the 'empty' part of the button, it seems that the 'hover' state is lost and the submenu disappears. In the image below, if you mouse over Northside, but leave the mouse on the right side of the 'button', the menu will quickly disappear if using IE7; it stays put when using the other browsers.
Very annoying to the user (and to this developer).
The site is http://www.acblunit174.org
I wonder if anyone has an explanation? Is this a known problem with a known workaround?
The css file is included below.
Any advice would be appreciated.
Thanks
Bert Onstott
713-851-1511.
[email protected]
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    padding:             0;
    list-style-type:     none;
    font-size:           11px;   /* changed font size to 11px */
    cursor:              default;
    width: 900px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index:             1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin:              0;
    list-style-type:     none;
    font-size:           100%;
    position:            relative;
    text-align:          left;
    cursor:              pointer;
    width:               auto;     /* set the width to auto for the top level navigation bar items so they fit the text. */
    float:               left;
    padding:             0;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin:              0;
    padding:             0;
    list-style-type:     none;
    font-size:           100%;
    z-index:             1020;
    cursor:              default;
    position:            absolute;
    width:               12em;
    left:                -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left:                auto;
    clear:               left;
/* Menu item containers are seet to 14 ems */
ul.MenuBarHorizontal ul li
    width:               12em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position:            absolute;
    margin:              -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left:                auto;
    top:                 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a pale green block with padding, no text decoration and what amounts to      */
/* and outset border. Specifying 'outset' as the border doesn't work in IE with color CCCC99, */
/* so it has to be simulated by specifying different left, right, top and bottom colors.       */
ul.MenuBarHorizontal a
    display:             block;   /* causes menu items to appear horizontally */
    cursor:              pointer;
    background-color:    #ECE9D8; /* light green */
    color:               #000000; /* black */
    text-decoration:     none;
    border-top-width:    3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-left-width:   3px;
    border-top-style:    solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style:   solid;
    border-top-color:    #CCCC99; /* dark greem */
    border-right-color: #666600; /* light green */
    border-bottom-color: #666600; /* light green */
    border-left-color:   #CCCC99;
    padding-top:         3px;
    padding-right:       4px;
    padding-bottom:      3px;
    padding-left:        3px;
    margin: 1px;
/* Menu items that have mouse over or focus have an olive green background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color:    #999966;
    color:               #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with an olive green background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color:    #999966;
    color:               #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
/*ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
*//* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
/*        background: #ECE9D8;*/

I wonder if anyone can tell me easily how to make the submenu's under the horizontal menu bar also appear horizontally?
This question is more suited to the Spry forum.

Display text in navigation bar when user is logged in

Hi all,
I'm (still ) on Apex 4.2.6.
Currently, I have in my page templates, the following snippet:
      <div class="logoBar">
          <img src="#IMAGE_PREFIX#themes/theme_125/images/logo_.png" />
          <h1><a href="#HOME_LINK#" id="uLogo">#LOGO#</a></h1>
        <div class="userBlock">
          <span>Username: &APP_USER.</span>
          #NAVIGATION_BAR#
        </div>
      </div>
I have the requirement to display both the username (APP_USER) and the company the user works for (Application item AI_COMPANY), only when the user is logged in. When the user isn't logged in; instead of those items, I have to show a login link. Well, I know how to only show a link to the login page, when the user isn't authenticated, using the navigation bar. Currently, when a user isn't authenticated; the page shows: Username: nobody. That's because it is in my page template. How can I only show the username when the user is logged in? And show the company name only then?
My first thought was to add an item in the navigation bar. But those items shows up as links. Is there a way to add a navigation bar item, and let it display as text? Sure, I could write a dynamic action on page 0 to remove the link, but I'm searching for a nicer/better sollution.
I apreciate your help!

Hi tomvdduin,
you can show company name which is already in your Application item(AI_COMPANY) by modifying the page template mentioned above.
<div class="logoBar">
<img src="#IMAGE_PREFIX#themes/theme_125/images/logo_.png" />
    <h1><a href="#HOME_LINK#" id="uLogo">#LOGO#</a></h1>
<div class="userBlock">
    <span>Username: &APP_USER.(&AI_COMPANY.)</span>
    #NAVIGATION_BAR#
</div>
</div>
I have included company inside ( ), you can change how you want to show.
for example
<span>Username: &APP_USER.</span><span>Company: &APP_COMPANY.</span>
Hope this helps you,
Regards,
Jitendra

I need two (2) navigation bars

How do you create 2 (two) navigation bars on a page? I know
you're supposed to have only one, but I need two.
Or can I have one navigation bar distributing rollovers in
two different places on the page, say one at the top and one at the
bottom?
Is there another solution?
Thanks for help.

> The problem is when, for the second navigation bar, I
tried using the
> Insert/Image Objects/Navigation Bar function, so that
Dreamweaver
creates the
> behavior, I get a message saying that you can create
only one
navigation bar per page!
Yep, that's because the built-in DW navigation behavior is a
real
clunker. It's one of the ones i mentioned that would make
this hard.
You have a few options. One is to start over using a better
method.
But then you lose all your nice menus.
Another way, <here I am selling something!> is to
remove the DW
navigation behavior, but leave all the mouseover and mouseout
behaviors
in place, and then use my divavGPS DW Extension. It will work
nicely
with your mouseover image menus to highlight the current menu
item, like
the DW navigation menu behavior except it can work on any
number of
menus with a whole lot less code on the page. It also works
fine even
if these are on Template-based pages. < />
http://divahtml.com/products/divaGPS/current_menu_location.php
E. Michael Brandt
www.divaHTML.com
divaPOP : standards-compliant popup windows
divaGPS : you-are-here menu highlighting
divaFAQ : FAQ pages with pizazz
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

IE Navigation bar bug

I use the Insert > Image Object > Navigation Bar wizard
to create a horizontal nav bar. It works great in every browser
tested except IE 6. On click the image disappears but the new image
does not appear until you mouseOut. If I add an alert to the mouse
down event then it works - as the "alert" takes focus.
feel free to view / help
http://72.167.143.33/

I am finding browsers like IE6 increasingly impossible to
work with, every error that dreamweaver seems to report for browser
compatability seems to be because of this. As far as I know there
is no simple way around this, I will be watching this thread to see
what others have to say though!
I have seen when looking at HTML some site's have a <IF
IE6> or something along them lines, can anyone shed anymore
light?
Thanks,
Dave

Dreamweaver Navigation Bar

First off should I use the Insert>Image Objects>Navigation Bar option? If so, is there a way to get text on top of the images that I use so that I dont have to use 20 different images?

I'm not a huge fan of the DW image based navigation menus. I think it's fair to say that the code is bloated and awkward to work with when you need to make menu changes later.
I feel there are much better solutions out there using pure CSS, or a combination of CSS and JavaScript.
If your requirements are simple, this free DW extension will build vertical or horizontal CSS menus for you.
http://www.dmxzone.com/go?5618
Project seven menus are all top notch and rigorously pre-tested to work in various browsers and user settings.
http://www.projectseven.com/products/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Adding A Navigation Bar To A Template...

Hello!
I have created a Dreamweaver Template that only needs to have a navigation bar added to it for it to be completed. However, when I click on the area I would like to add it to, click on Insert --> Image Objects --> Navigation Bar, nothing happens. What am I missing?
Thanks!

BigMusicGeek wrote:
I am using Dreamweaver CS4.
The option is there, but the dialog box does not appear.
Thanks!
I would attempt clearing the program cache and see if that does anything to bring back the dialogue box...
http://forums.adobe.com/thread/494811

Navigation Bar font color

Can anyone point me in the right direction on how I can change the font color for the navigation bar items (e.g. print, logout)? The default for my template is black and doesn't show well with my background color.
I'm using APEX 2.1.0
Thanks in advance.

<p>Install Firefox
<p>Install the Firebug extension
<p>Run your application
<p>Right click and select Inspect Element from the context menu
<p>Click on the Print or Logout link
<p>You will see something like this
<p>That tells you that the CSS selector responsible for that color is ".t7NavBar a".
<p>Go to Page Attributes/HTML Header and put the following CSS snippet to override the color
.t7NavBar a {color: red;}<p>Hope this helps

Rollover images on navigational bar items

Similar Messages

Maybe you are looking for