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

Similar Messages

  • 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:
    &lt;td&gt;&lt;a href="#LINK#" style="text-align:center;display:block;"&gt;&lt;img src="#IMAGE#" /&gt;&lt;br /&gt;#TEXT#&lt;/a&gt;&lt;/td&gt;
    Thanks alot, Andy

  • 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">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_nbGroup(event, grpName) { //v6.0
      var i,img,nbArr,args=MM_nbGroup.arguments;
      if (event == "init" && args.length > 2) {
        if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
          img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
          if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
          nbArr[nbArr.length] = img;
          for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
            if (!img.MM_up) img.MM_up = img.src;
            img.src = img.MM_dn = args[i+1];
            nbArr[nbArr.length] = img;
      } else if (event == "over") {
        document.MM_nbOver = nbArr = new Array();
        for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
          if (!img.MM_up) img.MM_up = img.src;
          img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
          nbArr[nbArr.length] = img;
      } else if (event == "out" ) {
        for (i=0; i < document.MM_nbOver.length; i++) {
          img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
      } else if (event == "down") {
        nbArr = document[grpName];
        if (nbArr)
          for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
        document[grpName] = nbArr = new Array();
        for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
          if (!img.MM_up) img.MM_up = img.src;
          img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
          nbArr[nbArr.length] = img;
    //-->
    </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.

  • 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

  • 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

  • How do I add an image to my navigation bar?

    How do I add an image to my navigation bar? I created my own. Let's say for example I wanted to a page dedicated to the lakers rss feed, and instead of having text in the box "Lakers", I want it to be the lakers logo. I already have the hyperlink in that box working.

    That didn't sound right:
    How do I add an image to my navigation bar? I created my own. Let's say for example I wanted to have a page dedicated to the lakers rss feed, and instead of having text in the box on the bar that reads "Lakers", I want it to be the lakers logo. I already have the hyperlink in that box that will direct you to that page.

  • How do I change the background image for a single tab on the navigation bar

    I'm creating a movie website for TDKR and for the navigation bar, I intend to have a different character for each tab. However, I'm having trouble putting a single image each separate tab. Instead one image appears on each of the tabs. Here's an example of the source and CSS.
    <td width="200"><ul id="navigation"><br />
          <li><a href="../pages/index.html">Home</a></li><br />
          <li><a href="../pages/cast.html">Cast</a></li><br />
          <li><a href="../pages/pictures.html">Pictures</a></li><br />
          <li><a href="../pages/soundtrack.html">Music</a></li><br />
          <li><a href="../pages/interview.html">Interviews</a></li><br />
          <li><a href="../pages/links.html">Links</a></li><br />
        </ul>
        </td>
    #navigation {
              list-style-type: none;
              padding: 0px;
              margin: 0px;
    #navigation li {
              margin: 0px;
              padding: 0px;
              list-style-type: none
    #navigation li a:link, #navigation li a:visited {
              display: block;
              width: 200px;
              height: 100px;
              text-decoration: none;
              text-align: center;
              line-height: 100px;
              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
              font-weight: bold;
              -webkit-transition: 1000ms ease;
              -moz-transition: 1000ms ease;
              -ms-transition: 1000ms ease;
              -o-transition: 1000ms ease;
              transition: 1000ms ease;
              color: #648AAE;
              background-repeat: no-repeat;
              background-image: url(../Images/gifs/Batman-still-2.gif);
              background-position: center bottom;
              text-transform: uppercase;
              letter-spacing: 0.79em;
              border-radius: 5px;
    #navigation li a:focus, #navigation li a:hover, #navigation li a:active {
              color: #000000;
              background-image: url(../Images/gifs/Batman-animation-2.gif);
              background-repeat: no-repeat;
              background-position: center bottom;
              background-color: #454545;
              border-radius: 25px;
    So, how do I put a single image on each tab (home, cast, pictures, etc). Thank you for your help in advance.

    Assign a class to the item and use CSS to apply an image as in
    <li><a href="../pages/index.html" class="home;">Home</a></li><br />
    <li><a href="../pages/cast.html">Cast</a></li><br />
    <li><a href="../pages/pictures.html">Pictures</a></li><br />
    <li><a href="../pages/soundtrack.html">Music</a></li><br />
    <li><a href="../pages/interview.html">Interviews</a></li><br />
    <li><a href="../pages/links.html">Links</a></li><br />
    and the CSS
    #navigation li a:link.home, #navigation li a:visited.home {
         background-image: url(../Images/gifs/Batman-still-2.gif);

  • How do I add an image above the navigation bar?

    I'm trying to add an image above the navigation bar and can't seem to do it without covering the links. Does anyone know how to do that?
    Thanks!

    Hi,
    select the page you want to add the image to
    open up the Inspector and go to the Page Tab (second from left)
    Choose Layout and increase the size of Header Height
    Regards,
    Cédric

  • Add Image in the navigation bar of Help page

    Hi,
    I wanted to add image next to to the Search in the Help page navigation bar as in snapshot below:
    I wanted to add an image i.e the the logo next to above button in navigation bar. I tried adding , howevr could only add as Header, not right in the navigation pane. Correct me if I m wrong, the navigation control can be configured while generation web output. I coudnt find any other option to do this.
    Please let me your inputs on this.
    Thanks,
    Pallavi

    Hi all
    Sorry Colum, I think you are wrong. That looks exactly like a WebHelp Search dialog.
    Pallavi, I am thinking the answer for you may be a simple one. Use the WebHelp skin editor. There you should see an option to choose the image used for the Go button.
    I'm not exactly sure what version you are using. But I'll insert a screen capture of RoboHelp 7 below.
    My thought here is that you could create an image that includes your company logo along with the Go button. Then use that image for the Go button. Sure, both the company logo as well as the Go button would be clickable, but it should do the job, no?
    Cheers... Rick
    Helpful and Handy Links
    RoboHelp Wish Form/Bug Reporting Form
    Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
    Adobe Certified RoboHelp HTML Training
    SorcerStone Blog
    RoboHelp eBooks

  • Image navigation bar for ePub Children's book export?

    I'm designing children's picture books in ID for export to ePub. I've seen some such books on my nook (ePub) that have an image navigation bar that pops up at the bottom of the page. Readers can scroll through reduced images of pages quickly on this navigation bar, tap a particular image and go directly to that page. I've looked through lots of tutorials but I don't see any that show how to do this. Can you point me to a tutorial that teaches me how to make this navigation bar?
    Carolivia Herron
    [email protected]

    Exploring further, I see that there are some examples on the web of experiments with JavaScript on iBooks (don't know if they're supported on the Nook).
    Here's an example of a children's book interface from the Three Press Consulting blog:
    http://blog.threepress.org/2011/01/31/cost-effective-development-of-enhanced-content-with- epub3-digital-book-world-2011/
    Here's some commentary on another blog about experiments which extend beyond the EPUB specification:
    http://blog.booki.sh/blog/post/epub-3-0-and-scripted-content-documents/

Maybe you are looking for