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, AndyHas 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 -
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.
SI 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 -
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 MartinI 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. -
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 -
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,
PallaviHi 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
-
Replacement iPad 4th generation WIFI/3G saying no SIM CARD and unable to restore previous settings
-
Access Policy provisioning resources multiple times...
Hi All I have AD User and Exchange provisioning using an Access Policy upon trusted reconciliation. Suddenly after creating a user through trusted recon it started provisioning AD user multiple times.This behavior is inconsistent. I have checked all
-
Problem in scroll tab layout policy
Hi everyone!! I made a application using tabbedpanes. My problem is when i put an "x" button for close in the tab title area the scroll tab layout policy are not working, but if no button it's working. I need a closable Jtabbedpane with scroll tab po
-
CLVF_VB_INSERT_CLASSIFICATION object classification
Hi, I wanna create select option and sort sequence for transaction code VCH1 i am able to create the batch serach strategy master record. but for select option and sort sequence (object classification) i found a function module CLVF_VB_INSERT_CLASSIF
-
[solved] AGP Error after last update with fglrx driver
Hello. I updated today (current: the new beyond kernel and the new fglrx driver) and have errors. This i found in my Xorg.0.log: (EE) fglrx(0): [agp] unable to acquire AGP, error "xf86_ENODEV" (EE) fglrx(0): cannot init AGP Any ideas?