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

Similar Messages

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

Problems inserting a Fireworks navigation bar in Dreamweaver

I designed a navigation bar in Fireworks. When I preview it
works fine and I exported it as a "HTML and Images" file type. I
used Dreamweaver to insert it through Insert, Image Objects,
Fireworks HTML, I browse the html file, but when I click OK it
displays the message: "The selected file is not the correct format.
Please select an HTML file which was exported from Fireworks". What
am I doing wrong. Is it the file format when I export it? Please
help me, I am a rookie with this, have no manuals, no training at
all, just you.

I have the same problem: I designed a navigation bar in
Fireworks. When I preview it works fine and I exported it as a
"HTML and Images" file type. I used Dreamweaver to insert it
through Insert, Image Objects, Fireworks HTML, I browse the html
file, but when I click OK it displays the message: "The selected
file is not the correct format. Please select an HTML file which
was exported from Fireworks". What am I doing wrong. Is it the file
format when I export it? Please help me, I am a rookie with this,
have no manuals, no training at all, just you.
I followed your directions and still received the same error.
What can I do?

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

DW CS5 -wrong path shown in code after using'Insert/Image'.

Normal site management as follows:
Site Name is set up, eg. - abcd.
Local Folder is set as root - c:/abcd
Logo image is in c:/abcd/images
Using ‘Insert/ Image’ Dreamweaver enters the correct image in the correct div, but the source code reads:
<div id="logo"><img src="../../../../abcd/images/logo.jpg" width="248" height="78" alt="abcd" /></div>
instead of: <div id="logo"><img src="/images/logo.jpg" alt="abcd" /></div>
So the path for the image seems to be defaulting incorrectly and I can see the url in the ‘select image source’ window is automatically showing a longer path: ../../../../abcd/images/
Ideas tried so far:
Replaced the url manually to the local path (works fine), but it defaults again next time to the longer path.
Tried recreating the site cache and FAQ corrupt cache fix.
Removed the site and set it all up again.
Manually change the path in the code and DW no longer finds the image.
I’m a newbie who has only created a handful of sites so any ideas are very much appreciated – thanks, Shelly J

Hi Murray,
Thanks very much for the reply - as a first time forum user it is great to see there are friendly people out there.
Site name abcd and Local Site Folder showed C:\abcd\ as per normal (not using root relative) and in advanced settings links are relative to document, not site root, but you gave me a great lead and the problem seems to be resolved now, thanks. With my workflow I manually transfer the completed files to another drive (rather than the DW remote function) where a developer then adds value and ftp's them up and it seems that there was some glitch between the server and my PC. I had already tried resetting my PC earlier, but he has reset his end now and my DW is no longer confused. So thanks again. (perhaps simply hardware but I suspect the 'include' that was added to my last site's code - who knows ha ha..) Cheers, Shelly.

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.

How can I use my Html/CSS Navigation bar to control an Edge Stage?

I have an HTML/CSS navigation bar set up in my EDGE created page. The Navbar is not created in edge. I would like to use these buttons to control the stage.
Inside the stage the main timeline has labels and stop actions every 1.5 secs to create a horizontally sliding site.
The labels are as follows: home, work, blog, profile, and contact. I can easily use a symbol created inside edge for example:
sym.play("home");
and animate a 6000px width symbol across my 1000px stage in 1000px increments.
I do not want to use a symbol inside of edge to do this because I cannot create the effect that the html/css navbar has on mouseover inside of edge.
So I am interested in knowing if I can use this bar to control my main timeline so I don't have to sacrifice design for functionality.
currently the link list is setup with the standard hyperlink. What code would I use to play the stage on click of the html navbar?
Many thanks to anyone who can help with this!
Here is the code for the navbar:
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
Full HTML:
<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
          <title>Untitled</title>

    <script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-57204389 { visibility:hidden; }
              .block-menu {
                              display: block;
                              background: #000;
                    .block-menu li {
                              display: inline-block;
                    .block-menu li a {
                              color: #fff;
                              display: block;
                              text-decoration: none;
                              font-family: 'Passion One',Arial,sans-serif;
                              -webkit-font-smoothing: antialiased;
                              -moz-font-smoothing: antialiased;
                              font-smoothing: antialiased;
                              text-transform: uppercase;
                              overflow: visible;
                              line-height: 20px;
                              font-size: 24px;
                              padding: 15px 10px;
                    /* animation domination */
                    .three-d {
                              -webkit-perspective: 200px;
                              -moz-perspective: 200px;
                              perspective: 200px;
                              -webkit-transition: all .07s linear;
                              -moz-transition: all .07s linear;
                              transition: all .07s linear;
                              position: relative;
                              .three-d:not(.active):hover {
                                        cursor: pointer;
                              .three-d:not(.active):hover .three-d-box,
                              .three-d:not(.active):focus .three-d-box {
                                        -moz-transform: translateZ(-25px) rotateX(90deg);
                                        -webkit-transform: translateZ(-25px) rotateX(90deg);
                                        -o-transform: translateZ(-25px) rotateX(90deg);
                                        transform: translateZ(-25px) rotateX(90deg);
                    .three-d-box {
                              -webkit-transition: all .3s ease-out;
                              -moz-transition: all .3s ease-out;
                              -ms-transition: all .3s ease-out;
                              -o-transition: all .3s ease-out;
                              transition: all .3s ease-out;
                              -webkit-transform: translatez(-25px);
                              -moz-transform: translatez(-25px);
                              -o-transform: translatez(-25px);
                              transform: translatez(-25px);
                              -webkit-transform-style: preserve-3d;
                              -moz-transform-style: preserve-3d;
                              -ms-transform-style: preserve-3d;
                              -o-transform-style: preserve-3d;
                              transform-style: preserve-3d;
                              pointer-events: none;
                              position: absolute;
                              top: 0;
                              left: 0;
                              display: block;
                              width: 100%;
                              height: 100%;
                    .front {
                              -webkit-transform: rotatex(0deg) translatez(25px);
                              -moz-transform: rotatex(0deg) translatez(25px);
                              -o-transform: rotatex(0deg) translatez(25px);
                              transform: rotatex(0deg) translatez(25px);
                    .back {
                              -webkit-transform: rotatex(-90deg) translatez(25px);
                              -moz-transform: rotatex(-90deg) translatez(25px);
                              -o-transform: rotatex(-90deg) translatez(25px);
                              transform: rotatex(-90deg) translatez(25px);
                              color: #FFE7C4;
                    .front, .back {
                              display: block;
                              width: 100%;
                              height: 100%;
                              position: absolute;
                              top: 0;
                              left: 0;
                              background: black;
                              padding: 15px 10px;
                              color: white;
                              pointer-events: none;
                              -moz-box-sizing: border-box;
                              box-sizing: border-box;
    </style>

</head>
<body>
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
<div id="Stage" class="EDGE-57204389">
</div>
</body>
</html>

I've come across this from the Edge API:
Edge.getComposition(compId)
Anyone having trouble with this same issue should try this:
var targetComp = AdobeEdge.getComposition('TARGETCOMPID');
   targetComp.getStage().play();
in their trigger or event handler.
How I got it to work:
<li><a href="javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
   targetComp.getStage().play();" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>

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

How to save image using an image object in servlet on web server

I'll be very thankful to anyone who helps me in this matter.
i developed an applet which draws on a buffered image.
now i want to save this buffered image as a jpg image on the web server.
i know i have to use servlets or jsp for this.
but i want to use servlet for specific reasons.
can anyone plz provide me the code for taking an image object from an applet and saving it thru servlet.
i need this solution as soon as possible.
thanks in advance.

Take a look around for URLConnection, and Applet to Servlet communication (also check the [url http://forum.java.sun.com/forum.jsp?forum=33]Servlet forum).
Basic concepts will be to open a URLConnection to the URL mapped on your server for the servlet, then send the image, byte by byte, to the servlet, then ask for a reply from the servlet.
Once asked for a reply the servlet will need to take the image sent to it (hopefully via an HTTP post) and copy it to a location on disk. (You could have a parameter to the request that tells you want to name the file...)
As for the converting buffered image to JPEG, I haven't done this before, but I know others have. You can look around (more likely to find it in the [url http://forum.java.sun.com/forum.jsp?forum=31]Java Programing[ul] forum) for the code needed.

Image Insert Dialog with Navigation Bar?

How come the Image Insert dialog now shows the

No, that stuff wasn't there before.
No, it isn't necessary.
I guess is some sort of style sheet is begin applied that wasn't before.
Take a look at this.
When I first typed this message, my typing looked like this. I went and posted and it all pretty much disappeared except for some blank lines. A couple other times I've seen the overlapped lines of typing.
(And the jumping of the box on Autosave is still occurring.)
I think the last forum updates must have broken more than they fixed.
Attachments:
bad edit window.PNG ‏10 KB

INSERT Image Objects Image Placeholder.

Where did this command go in CS6 cloud version?

Thank you Sudarshan Thiagarajan, I think the relevant quote is here:
"Options that were rarely used have been deprecated.
For example, the placeholder option for Insert option has been deprecated because of its limited usage." - http://blogs.adobe.com/dreamweaver/tag/insert-panel
I was following along with a tutorial, so I'll just have to invent an alternative.

Insert - Image Objects - Rollover Image only works locally

Checked paths all look fine, files work locally but not remotely. Tried both site root and document paths.
Any help?
rd

How are you uploading these pages? They are being stripped of carriage returns when they hit the server, which 'corrupts' the javascripts in a way that makes it non functional. Here is your code as it sits on the page you have linked -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}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_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script></head><body onLoad="MM_preloadImages('AboutPressMagRollovers/creditMag1color.jpg')"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ro1','','AboutPressMagRollovers/creditMag1color.jpg',1)"><img src="AboutPressMagRollovers/creditMag1bw.jpg" name="ro1" width="90" height="114" border="0"></a></body></html>
Note that it is all one long line.
Here is your code that I have fixed just by adding the carriage returns -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
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_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
     if ((x=MM_findObj(a[i]))!=null){
document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];
</script>
</head>
<body onLoad="MM_preloadImages('http://www.hairinvogue.com/AboutPressMagRollovers/creditMag1color.jpg')">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ro1','','http://www.hairinvogue.com/AboutPressMagRollovers/creditMag1color.jpg',1)"><img src="http://www.hairinvogue.com/AboutPressMagRollovers/creditMag1bw.jpg" name="ro1" width="90" height="114" border="0"></a>
</body>
</html>
You can see it work here - http://gws-sandbox.com/invogue.html

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 CS3 Insert Image

I'm trying to insert an image onto my page. I typically
receive a prompt saying:
"You won't see the element unless View > Visual Aids >
Invisible Elements is checks, and the preference setting for this
element is on"
It puts the following text on a new balnk page without a
prompt:

<title>
<MMString:LoadString id="insertbar/image" />
</title>
I'm really lost. The Visual Aids is grayed out, however the
Invisible Elements is checked.

Bad url.
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"cavemanlawyer15" <[email protected]> wrote
in message
news:g2moo6$28i$[email protected]..
> I used Dreamweaver CS3's Insert | Image Objects |
Navigation Bar feature
to put
> a nav bar in a site. On the Products page (using IE 7)
the nav looks
great
> (apologies for the spaces in the URL):
>
>
http://www.clicksh arpma
rketing.com/beta/brum/products.html
>
> But click to Company or Contact and the logo at the top
right gets
clipped --
> any idea what is happening?
>
> Thanks very much.
>

Using Insert/Images Objects/Navigation Bar - weird quirks

Similar Messages

Maybe you are looking for