Use Images for Top of CSS Menu

Is it possible in FW 8 to create an imaged based top level
menu with text based CSS drop down menu?

surfstoke wrote:
> Is it possible in FW 8 to create an imaged based top
level menu with text based CSS drop down menu?
Yes. Check out the pop-up menu feature.
Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/
Design Aid Kits:
http://www.webdevbiz.com/pwf/index.cfm

Similar Messages

Using Images for Tabbed Panels

I'm trying to use button images that I created in photopshop as the background for the tabs of my tabbed panel widget in dreamweaver. I tried this by inserting the folling code into the css (note bold line):
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.9em sans-serif;
background-image:url(images/tabs.gif);
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #FFF;
I also tried using background:url(images/tabs.gif) in place of background-image:url(images/tabs.gif) but it still won't work. What do I need to know about using images for my tabs?

Have a look here
http://www.adobe.com/devnet/dreamweaver/articles/spry_widgets_design.html

Spry menus - using images for buttons

A search of the forums shows two approaches, to use an image
for a button in a Spry menu.
One of them uses HTML to put an <img> into the
<li>. Here is the example I found cited [contributed by
arandlett - though said there not to work in IE7].
<ul class="MenuBarVertical" id="MenuBar1">
<li><img src="images/bullet.png" align="left"
/><a class="MenuBarItemSubmenu"
href="index.htm">home</a></li>
<li><img src="images/bullet.png" align="left"
/><a href="#">About</a> </li>
</ul>
The other advises "find "background-color" and change it to
"background-image: url(link/to/image)" " [contributed by The only
RaM].
Underlying of course, is the question, how does the HTML
interplay (or not!) with the Spry javascript?
By this time, there must be pretty wide experience. After
all, putting interesting buttons in the popups/dropdowns is in many
ways what this is about.
We would be quite appreciative to learn what experience
indicates, now, is best practice. Or, does it depend, on ... ?
Thanks in advance for your help, David Allen

Let me add a note to my own post.
We would still be delighted to hear others' experience, with
images in Spry menus. One thing does emerge with a little further
look: The Spry menu is suited to using the _same_ image for each
button. If the desire is to vary that image (such as to use an
unusual font, so that the text changes on each image), then
Fireworks clearly is the tool of choice.
Again, we would be pleased to hear other experiences, David
Allen

Using Images for each button

I am trying to create a spry menu that has 5 buttons and each button will have 3 different images for each state (something like this http://jjcstudios.com/woof_wallet/ ) I was going to use the insert > navigation bar but I read that this method creates a lot of extra javascript and they recommended using Spry instead. Can anyone point me in a direction to create a clean method of doing java rollovers or modifying the spry menu so it will work as a rollover. thanks john

John,
To place the javascript in an external file, grab the code that is producedon the page
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;
and place it in a file called menu.js or similar.
In your page place the following in between the <head></head> tags
<script src="menu.js" type="text/javascript"></script>
to link the Javascript.
If you want to put menu.js in a different folder, make sure you adjust the link accordingly, like "js/menu.js"
Ben

I use images for presentations. Recently I've noticed a decrease in quality ( sharpness and definition) of pictures copied into Keynote. Same problem with both JPEGs and TIFF files. I've recently upgraded to keynote 09, but with no improvement.

I use images of paintings for presentations. Over the last 3 months or so I've noticed that I cannt copy images (either JPEg or TIFF) without a reduction in sharpness and definition. Hope someone can help with this problem.

Figured it out myself! yay! (only took my entire moring)
The solution:
Dont print to PDF!
SAVE AS COPY, then select Adobe PDF and click SAVE, this will bring up a dialog box with the options you need (including the "High Quality Print" Adobe PDF Preset)
This was not clear in any of the instructions i read

Server Side Include (SSI) for Top Border (Header) Menu

Following-up on a previous post, I have created a test menu for my test page so that I can make a change once in my website menu and have it automatically populate throughout the site.
So, I created the menu as a file, "Aloe_Top_Menu.asp" (it is using DW's Spry Menu 2.0 and I am using DW CS5) saving it as an .asp file.
When I then insert it anywhere on my test page (see line 150 on the page: www.aloe-vera.org/test.htm ) it does not appear.
I have put it in the <head></head> area as suggested by another user (Nancy, thanks for all your help btw). In between the body tags. Nothing seems to work.
I've also tried it in what would be the "header" area of the page, nada. So I tried in the regular content of the page. Nothing there, either.
It's frustrating beyond belief. And I sure wish the good folks at Adobe would have made it so one could work on it in "Display" view. Alas, I can work in code only view just fine. But don't want to spend needless hours on it, if I cannot get it to appear on the uploaded site, at the top of each page!
For suggestions, I am "all ears." Thanks, David

Your menu include file should contain nothing more than a list of links. That's it. Very simple. And links are relative to the parent page.
You can name include files anything you wish. menu.foo menus.ssi or menu.whatever. The extension doesn't matter here.
Your parent page -- the page on which your menu will appear, needs to be named index.asp to tell your server to parse content from the include file.
<div id="menu">

</div>
Finally, your parent page must contain all the supporting CSS files, scripts and functions to make your Spry Menus work.
Does this make sense?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Placing an image on top of a Menu

I have recently installed PRE9 (also owned & used PRE8 and earlier versions). After placing an image on a menu template with multple scenes, I burn a dvd. I then view the DVD only to find the image has "disappeared" i.e. I see only the menu template. I have tried various templates and image file formats but end up with the same result. This function has consistently been completed without any issues on the same computer using PRE8. Not sure if this is relevant... the PRE9 version was originally a trial version which was subsequently converted to full license.

The process is as follows:
Disc Menu tab > Select & then Apply "wedding/elegant template" > Select Main Menu 1 > Browse for still image (1000x563 PSD file) > Done. Do the same for Scenes Menu 1 using the same image.
Share tab > Disc > Burn
Play DVD > Background image has disappeared. I see only the original wedding/elegant template on both the Main & Scene Menu.
On returning to the Discus menu tab I observe that the selected background image is still present on both Main & Scene menus

Can you use images as buttons in spry menu bars

I am trying to build a site with customized buttons. Each button has the same background, but I want the buttons to be images
because the client likes the font. Is there any way to make each individual button an image using the spry feature in CS3. It's easy
to do this in Dreamweaver 8, but I cannot figure out how to do it in CS3.
Thank you for your help.

I personally have not used the spry menus for anything yet but in researching other topics i did find:
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
Answer will most likely lie in the CSS class you set for your spry states. CSS from above URL:
#MenuBar3 a.MenuBarItemHover, #MenuBar3 a.MenuBarItemSubmenuHover, #MenuBar3 a.MenuBarSubmenuVisible {
background-image: url(images/itemgradient-hover.gif);
background-repeat: repeat-x;
The other option is to look back at the code generated by DW8 (that you mentioned worked) and apply the same code technique to your current project.

Create a ready to use image for SharePoint 2013 development environment.

Hi
I have a requirement in which we are required to have an Image of the whole SharePoint 2013 environment, (ideally single server installation/standalone as I believe multi-tier would not be possible, or if possible suggest on that also), with all the installations
done- SQL server, SharePoint , language pack if any, App configured, search, service applications, etc etc. so that if at all required we would have that image in a server and provide that image to the developer, he would either mount it or run it and start
the SharePoint 2013 App development.
Please suggest on this.
Thanks in advance.

Not for imaging purposes.
You could have an environment that is ready-to-go with the bits installed, but not configured. You would then have a post-imaging script that would configure the farm. In this process, you would also need to make sure SQL Server was aware of the server's
new name (see http://technet.microsoft.com/en-us/library/ms143799.aspx).
Trevor Seward
Follow or contact me at...
&nbsp&nbsp
This post is my own opinion and does not necessarily reflect the opinion or view of Microsoft, its employees, or other MVPs.

Do i seriously need to install Premiere CS6 besides CC and CC(2014) just to use Encore for making a BlueRay Menu?

I just tried to make a Menu as usual and coulnd't find encore anymore. What kind of "creative" cloud does not support Authoring programs for DVD/blueRay anymore?
Anyway now i have premiere installed 3 times ( CC2014, CC, and CS6) which floods my SSD. What is not what i excepted from you guys.
Does anynoe have a better solution for this?

The only other solution is to buy other software
CS6 is the final Encore, see #8 here for why http://forums.adobe.com/thread/1337952?tstart=0

Using images in Spry menus

Can someone please point me to instructions on how to incorporate button images in horizontal Spry menus?

Here's the working model for the menu I created using images for the main menu tabs: http://mmfc.org/HomePage_CleanUp/index_working.html. And here is the style sheet: http://mmfc.org/HomePage_CleanUp/SpryAssets/working.css.
I have one remaining problem, and hope someone can help.
There are three states/images for the main menu tabs: normal state, hover state (when the cursor is over the tab), and visible state (when a submenu is open and the cursor is over a submenu item).
In OS10.6.4/Safari, it works correctly:
Normal state
Hover state
Visible state
In Windows XP/IE 6, the 3rd state works incorrectly -- the hover state doesn't get replaced by the visible state:
In OS10.6.4/Opera and OS10.6.4/Firefox, it also works incorrectly -- but this time the hover state gets replaced by the hover color, not the visible state image:
For reference, I've copied the CSS below.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* 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 {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
float: right;
/* 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;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* 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;
width: auto;
position: absolute;
left: -1000em;
background-color: #FDE9BB;
/* 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;
/* Menu item containers are variable width according to submenu item text */
ul.MenuBarHorizontal ul li {
width: auto;
/* 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 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* No borders on all sides */
/* ul.MenuBarHorizontal ul
border: 1px solid #666666;
/* Menu items are a light colored block with no padding and no text decoration */
ul.MenuBarHorizontal a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
white-space: nowrap;
text-decoration: none;
display: block;
cursor: pointer;
color: #000000;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 11px;
/* For setting the background color of the spry menu you need to edit the background in the CSS pane. Click on the spry menu bar and then open up the CSS pane. Window > CSS Styles. There's a few CSS items that set the background by default. The "a" item sets the background for the items that don't have a dropdown and the MenuBarItemSubmenu sets the background for the items that have a dropdown. You can set the background to an image just like you would any other element in your HTML. */
/* The following selectors define images for the (orange) normal state of tabs */
ul.MenuBarHorizontal a #AboutUs {
background-image: url(../img/DropDownMenu_aboutus.gif);
ul.MenuBarHorizontal a #Missions {
background-image: url(../img/DropDownMenu_missions.gif);
ul.MenuBarHorizontal a #Help {
background-image: url(../img/DropDownMenu_help.gif);
ul.MenuBarHorizontal a #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents.gif);
ul.MenuBarHorizontal a #Media {
background-image: url(../img/DropDownMenu_media.gif);
ul.MenuBarHorizontal a #PatientStories {
background-image: url(../img/DropDownMenu_patientstories.gif);
ul.MenuBarHorizontal a #ContactUs {
background-image: url(../img/DropDownMenu_contactus.gif);
/* The following selectors define images for the (bright) active state of tabs.*/
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #AboutUs, ul.MenuBarHorizontal a.MenuBarItemHover #AboutUs, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #AboutUs {
background-image: url(../img/DropDownMenu_aboutus_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Missions, ul.MenuBarHorizontal a.MenuBarItemHover #Missions, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Missions {
background-image: url(../img/DropDownMenu_missions_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Help, ul.MenuBarHorizontal a.MenuBarItemHover #Help, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Help {
background-image: url(../img/DropDownMenu_help_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #NewsAndEvents, ul.MenuBarHorizontal a.MenuBarItemHover #NewsAndEvents, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Media, ul.MenuBarHorizontal a.MenuBarItemHover #Media, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Media {
background-image: url(../img/DropDownMenu_media_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #PatientStories, ul.MenuBarHorizontal a.MenuBarItemHover #PatientStories, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #PatientStories {
background-image: url(../img/DropDownMenu_patientstories_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #ContactUs, ul.MenuBarHorizontal a.MenuBarItemHover #ContactUs, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #ContactUs {
background-image: url(../img/DropDownMenu_contactus_vis.gif);
/* The following selectors define images for the (red) hover state of tabs.*/
ul.MenuBarHorizontal a:hover #AboutUs, ul.MenuBarHorizontal a:focus #AboutUs {
background-image: url(../img/DropDownMenu_aboutus_hover.gif);
ul.MenuBarHorizontal a:hover #Missions, ul.MenuBarHorizontal a:focus #Missions {
background-image: url(../img/DropDownMenu_missions_hover.gif);
ul.MenuBarHorizontal a:hover #Help, ul.MenuBarHorizontal a:focus #Help {
background-image: url(../img/DropDownMenu_help_hover.gif);
ul.MenuBarHorizontal a:hover #NewsAndEvents, ul.MenuBarHorizontal a:focus #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents_hover.gif);
ul.MenuBarHorizontal a:hover #Media, ul.MenuBarHorizontal a:focus #Media {
background-image: url(../img/DropDownMenu_media_hover.gif);
ul.MenuBarHorizontal a:hover #PatientStories, ul.MenuBarHorizontal a:focus #PatientStories {
background-image: url(../img/DropDownMenu_patientstories_hover.gif);
ul.MenuBarHorizontal a:hover #ContactUs, ul.MenuBarHorizontal a:focus #ContactUs {
background-image: url(../img/DropDownMenu_contactus_hover.gif);
/* Menu items that have mouse over or focus have a dark background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
background-color: #bf2e1a;
color: #FFFFFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a dark background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
background-color: #bf2e1a;
color: #FFFFFF;
/* Sets width of submenus and makes text non-wrapping */
ul.MenuBarHorizontal ul li {
display: block;
float: none;
width: 12em;
white-space: nowrap;
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;
/* 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: #FFF; */

Trouble using transparent gif in a PVII Menu Magic 2 submenu

I am using PVII Menu Magic 2 to build a menu system that is
image based. The submenu images have transparent backgrounds. When
inserted into the menu, however, they display with a blue or black
background. See attached page for a sample, under the "What's Hot"
link here:
http://www.annaknowsnails.com/WD/Artificial.htm
I didn't have any luck searching PVII's KB or the Dreamweaver
KB. I thought I'd ask here before emailing them directly. I'm not
sur if I goofed something (very likely) or this extension pack just
isn't compatible with transparent submenu images. If you have any
ideas, I'd appreciate it.
Thank you!
Rebekah Schmitt
http://www.annaknowsnails.com/WD/Artificial.htm

It is best to mail us directly or to post on our news server.
The
image-based style sheet, per the user guide, assumes you are
using images
for just the root level. For the sub-levels you would need to
make some
mods.
Remove the background color here:
.p7PMMv10 ul ul li {
background-image: none;
background-color: #27B6D4;
margin-bottom: 0px;
Remove padding, background color and borders here:
.p7PMMv10 ul ul a {
padding: 5px 12px;
color: #000 !important;
text-align: left;
background-color: #27B6D4;
border-top: 1px solid #43C1DC;
border-right: 1px solid #229DB7;
border-bottom: 1px solid #229DB7;
border-left: 1px solid #43C1DC;
Remove background color here:
.p7PMMv10 ul ul a:hover {
background-color: #000 !important;
color: #FFF !important;
background-image: none;
You might also want to validate your page.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"kalwebs" <[email protected]> wrote in
message
news:gnvb0r$g15$[email protected]..
>I am using PVII Menu Magic 2 to build a menu system that
is image based.
>The
> submenu images have transparent backgrounds. When
inserted into the menu,
> however, they display with a blue or black background.
See attached page
> for a
> sample, under the "What's Hot" link here:
>
http://www.annaknowsnails.com/WD/Artificial.htm
>
> I didn't have any luck searching PVII's KB or the
Dreamweaver KB. I
> thought
> I'd ask here before emailing them directly. I'm not sur
if I goofed
> something
> (very likely) or this extension pack just isn't
compatible with
> transparent
> submenu images. If you have any ideas, I'd appreciate
it.
>
> Thank you!
>
> Rebekah Schmitt
http://www.annaknowsnails.com/WD/Artificial.htm
>

Using image as overlay

Normally you create your menu in Photoshop and then you create a simple overlay file (using white, black, red and blue). Then you draw your buttons and select how to key and what color to use.
Is there any way of using a full color-image for both the background menu AND the overlay file?
Here's what I want to do:
I have a menu with small thumbnails for each button. When no button is selected there's a (blue) skin over it.
The button selected does not have a skin, but is visible in full color.
The ideal thing would be to have two JPEG files, and one with the skin all over the image, the other without the skin. Then I set the background and overlay, and when I draw my button, the clear image appear "from behind". Can this be done without having to use a layered menu? There are about 14 buttons on the menu.

A couple of points to add in here - first off, try not using JPEGs... they are compressed and can get ugly when the menu is converted to MPEG2. Try using .pict or .tiff instead.
Secondly, the overlay is in the sub picture stream - you can only use four colours for that no matter what. You could use a mask and switch it from place to place according to the button state, but ultimately if you want full colour then use layers.
Sigh... did I just say that out loud??

Using a background image for the buttons in spry menu

Hi All,
Going nuts here.
I'm using the vertical spry menu widget w DW CS3 and trying
to alter the css style sheet, so that I can use a li class for each
of the 14 links on this page, with an upstate and a hover state
only. (the focus, and hover while down will be the same as the
others, to keep it simple and not too distracting)
The page is here that I will be replacing the entire
background image in sidebar1 and sidebar2 with a custom spry menu
with the 14 li classes for 2 seperate menus:
http://audibleimagesav.com/blank_doc.html
Has anyone used a background image in place of just using
bkgrd colors and borders for the spry menu ?
I am aware of the attributes that the help docs suggest that
need to be altered as listed here :
http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA 93A0159.html
I have been working on just an experimental page, that is now
hacked up, however if you want to see that it is here with only the
first list item coded:
http://audibleimagesav.com/site%20theme%20ideas/sprymenu_exp.html
The spry css menu widget for that page is here:
http://audibleimagesav.com/SpryAssets/SpryMenuBarVertical.css
So in short, has anyone done a bkgrd image for the main menu
(not submenu) in a spry widget?
Thanks in advance.
Art
Art Hansen
Web Design & Marketing
http://www.innova-techsolutions.com
321.750.3852 - Cocoa Beach, Florida, USA

http://meyerweb.com/eric/css/edge/popups/demo2.html
Maybe

Hi when i have been using iWeb for the whole week and all of a sudden i wanted to open iWeb but nothing came up? the tab at the top says that iWeb is open but i have no image i can't edit or do anything to my web site i just see my background. please help

Hi
Iweb Wont open on my desktop. in the tab it shows that it is open but i cant see the iweb page?
thanks

Try the following:
delete the iWeb preference files, com.apple.iWeb.plist and com.apple.iWeb.plist.lockfile, that resides in your Home() /Library/Preferences folder.
go to your Home()/Library/Caches/com.apple.iWeb folder and delete its contents.
Click to view full size
launch iWeb and try again.
If that doesn't help continue with:
move the domain file from your Home/Library/Application Support/iWeb folder to the Desktop.
launch iWeb, create a new test site, save the new domain file and close iWeb.
go to the your Home/Library/Application Support/iWeb folder and delete the new domain file.
move your original domain file from the Desktop to the iWeb folder.
launch iWeb and try again.
If Roddy's suggestions fail to help continue with this:
1 - open iPhoto and select a couple of photos.
2 - use the Share ➙ iWeb ➙ Photo page menu option.
Give it a couple of tries if the first one doesn't help.
OT

Use Images for Top of CSS Menu

Similar Messages

Maybe you are looking for