Different images for spry menu button jpg or gif?

Hi I have just been reading James Branstons "questions and answers", just what I was looking for many thanks to gramps.
I am new to dreamweaver and spry and what I am wanting to achieve is a spry menu bar horizontal, I would like to have my own font "Cheri" for the about etc. To do this would I need to save text as a gif or a jpg? The jpg looks crisp where as the gif is not so sharp, the jpg has a black background white text, gif white text transparent background, the gif works well with hover, the jpg has the boxed background, if using a jpg do I need to create another file for hover? If so where do I place this in code?
I did what gramps descibed in James Branstons question works well, but the sub menu boxes have disappeared.
Hope this all makes sense, hard to explain what you want when you don't know exactly what you're doing. Many many thanks in advance.

Hi back on the website today just tried out the mouseover and mouseout, I must be doing something wrong as it looks like goulash at the moment, sorry to be a pain and thankyou in advance, as coding is something quite new and frightening for me help is really appreciated.
Currently code is:
    </script>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">about</a></li>
      <li><a href="#">recipes</a></li>
      <li><a href="#">shopping</a></li>
      <li><a href="#">contact</a></li>
    </ul>
</div>
<div id="mainNavspace"></div>
When I added the code below to the about region thats when I made goulash.........
<li><a class="MenuBarItemSubmenu" href="#"><img name="about" src="jpgs/about.jpg" onMouseOver="about.src='jpgs/about_over.jpg'" onMouseOut="about.src='jpgs/about.jpg'" /></a>
Thank you for patience in advance, if you could show me how the code should look I would be very grateful, kind regards.

Similar Messages

Different widths for Spry Menu Submenu items

On the Customize this widget page for menus, a new style was
suggested for submenu items, to make some of them less wide. This
code below was suggested. How do we attach the new style to the
submenu items? Clicking on each submenu text that's open, and
applying the smaller style doesn't do it.
Here is the code:
ul.MySmallerSubMenu {
width: 4em;
ul.MySmallerSubMenu li
width: 100%;
ul.MySmallerSubMenu li a
width: 100%;
Diana

Lines 96-102 of nl3.css reads
a:active {
    color: #996600;
    font-size: 0.95em;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: bolder;
This interferes with the menu item list. If you change or delete the font-size, all should be well.
Gramps

How can I save an object Image in a file with .jpg or .gif format?

Greetings
I'm programming a Ray Tracer but now I need to know like save an object Image in a file with .jpg or .gif format. Could anyone help me, please? It's very important to me do this as soon as possible. Thanks.

In 1.4 you have ImageIO available ... javax.imageio.ImageIO.write is the method to call.
- David

Images for Spry Tabbed Widget Buttons

Hello,
I would like my tab buttons to be images like the ones here: http://labs.wip3.adobe.com/technologies/spry/home.html
It's the sample after this section:
Spry 1.6.1—Ensuring Adobe AIR compatibiity
Thanks,
Troy

I have created some nav button images with a gradient applied in Photoshop and saved them as GIFs. Am having a bit of a challenge applying them to my Spry menu tabs as Background Images. But there is no reason why this shouldn't work, isn't that correct? (All software CS4).
I went out and bought a book offering CSS tips and tricks. Though the book isn't specific to Dreamweaver -- more of an HTML/CSS how-to-- it did offer a number of ways to apply images to nav bar, but all of them advised avoiding Javascript to accomplish this, which doesn't seem to be an option if I'm using Spry (which certainly seems to have its advantages, so I'd like to stick w/it if possible).
Any advice, insight or directions to a tutorial would be much appreciated. I did find this: http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7b0 3a.html
Will parse through it in the morning, but am not sure it's the right set of instructions. Thought I'd ask an expert before spending much time on it.
Thank you,
Paula

Adding background image to Spry Menu Bar?

Hi Everyone,
I have a question concerning adding a background image to a horizontal spry menu.
1) I am using Dreamweaver CS4.
2) I am inserting this menu bar on a HTML document.
3) I have created and am using an external style sheet (CSS)
I am not sure on which style(s) ("ul.*) to edit in order to acheive this.
I have a total of four(4) different images I would like to use, they are...
1) Horizontal Menu Bar (main menu bar)
2) Horizontal Menu Bar - Rollover
3) Submenu
4) Submenu - Rollover
Also I would like the text to be centered on the button.
I have somewhat acheived this using the instructions for "customize this widget", yet the image "repeats" because the button is larger than the image.
I have not tried to center the text, this may be a very simple thing, if so just let me know.
What I dont know, and was hoping someone could tell me, is which style(s) ("ul.*) to edit in order to acheive this.
If anyone needs anymore information, just let me know and I will give it to you as soon as possible.
Also I have attached three(3) of the four(4) pictures I would like to use. (this is the maximum)
Any help will be greatly appreciated,
Musicman1994

I'd like to thank everyone with their help so far, but I am still having trouble.
I have tried both suggestions and the results are...
The one suggested by dhvani2511 gave me this...
(The cursur is over "Item 1" it is not blue when a cursur is not over it.)
I would like the image to "be" the button, not just "in" it,if that makes sense.
I have slightly tried the one suggested by .V1 but being that I am new to dreamweaver, code, etc. I am not sure where to copy/paste the code that you gave me.
Does anyone have anymore information?
Thanks,
Musicman1994

Can you have a different colour horizontal Spry menu on multiple pages?

Hi,
I'm fairly new to Dreamweaver and CSS. So please forgive me ignorance.
I've created a page with a horizontal spry menu bar, and have edited it according to how I want it to look.. Brilliant!. The problem I have is I want the exact same menu bar on multiple pages but using a different colour scheme for a couple of the pages!. Is this possible? Thanks

I am sorry, but I do not see that you have added the suggested code to the document as per
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Touring Sport</title>
<meta name="keywords" content="Football Tours, Youth Football Tours, Junior Football Tours, Boys Football Tours, Girls Football Tours, Ladies Football Tours, Mens Football Tours, European Football Tours, School Football Tours">
<meta name="description" content="Football Tours in the UK and Europe.">
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script type="text/javascript">

</script><style type="text/css">
</style></head>
Gramps

Adding A Separate Background Image For Each Menu Item

I asked this in the Spry forum, and not sure I understand the answer. Plus, I should have been more specific in asking how to do it, as I'm still pretty new to this stuff. Nothing I'd found indicated it could be done, or how.
Org question -
I know you can apply a background image to the menu bar items, but is it possible to add a background image for each individual item? What I'm basically trying to keep are the effects (bevel/emboss, etc.,) that I attached to the text, when I created it in PS CS4.
Answer -
Yes you can. The widget is just normal plain html markup so you can just add other classNames or id attributes to the elements. And style the elements through those classes/ids.
Does this mean I'd have to write a new rule for each menu item? What?
Thank you.

Did an Adobe Tutorial for creating/entering a Spry Menu Bar. This is the HTML, after I took out the submenus.
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="news.html">Features</a></li>
      <li><a href="news.html">News</a></li>
      <li><a href="news.html">Fashion</a></li>
      <li><a href="news.html">Lifestyle</a></li>
      <li><a href="news.html">Calendar</a></li>
    </ul>
This is from the SpryMenuBarHorizontal.css (It seems like I need to make changes in the Design Info section of this code. But nothing I've tried has worked):
/* 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;
width: auto;
text-transform: uppercase;
/* 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: 7em;
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: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* 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
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Rounded Corners for Spry menu bar

Can I use css to style spry menus to make rounded corners?
Tried inserting a background image into the menu cell in css but
didn't work. Found tutorials to make rounded corners on text boxes
but nothing specific to spry menus.
Also can I make the drop down menu drop "up" rather than
down?
Thanks!
Stacey

Excellent, Massimo! Nice to see you here again.... 8)
Happy Christmas to you over there in chocolate land.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Massimo Foti" <[email protected]> wrote in
message
news:gi5rie$puf$[email protected]..
> Spry's Menu Bar is a pretty good widget, but it ships
with a somewhat lame
> CSS. You can download a set of skins that mimic Office
2003 look and
> feel:
>
http://www.massimocorner.com/spry/menubar/
>
> I hope it will inspire people to share more skins
>
>
> --
> ----------------------------
> Massimo Foti, web-programmer for hire
> Tools for ColdFusion, JavaScript and Dreamweaver:
>
http://www.massimocorner.com
> ----------------------------
>
>
>
>

Problem with .css for Spry menu

Hi,
I am having a problem with the Spry menu I have created and edited. All looks great in the Design view of Photoshop however under the Live view or opened using a browser the menu reverts to a list of hyperlinks!
I have checked the .css link but when using Firefox CSS editor the CSS file for the menu is simply blank?
Any suggestions would be great!
Thanks,
Ozan

Your SpryMenuBarHorizontal.css needs to be within your SpryAssets folder, which is where it would have been put automatically when you inserted the SpryMenuBar. You can move it back in there using the Files Panel.
Here is what the file structure needs to look like:
SpryAssets
SpryMenuBar.js
SpryMenuBarHorizontal.css
cssstyletemplate.css
index.html (or whatever the name of your page is)
Hierarchally, the top level of your root folder will show folders for SpryAssets and css and the html pages will be on the same level.
The Spry assets themselves will be down a level IN the SpryAssets folder, as the styletemplate.css file will be down a level IN the css folder.
In the head of the document, you will have
     <link rel="stylesheet" type="text/css" href="css/styletemplate.css" />
     <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"> </script>
     <link rel="stylesheet" type="text/css" href="SpryAssets/SpryMenuBarHorizontal.css" />
At the end, remove the slash before Spry inside the imgDown and imgRight sections:
     <script type="text/javascript">

</script>
Compare these with your files and file structure and correct any small typos, and they should be correctly linked.
Beth

Frame around my Spry Menu button when clicking?

Hi experts
not sure if you can get rid of this but on my spry menu I have 5 options to click on, each change colour when you hover the mouse over them which is great but once you click on any of them this dotted frame around them shows up?
Can I some how get rid of this?
Regards Lee
Thanks for all your help in advance

See if the reply by Elizabeth at the following link helps explain how and what to write into your stylesheet:
http://forums.adobe.com/message/2282916#2282916
Nadia
Adobe Community Expert : Dreamweaver
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
Web Design & Development
http://www.perrelink.com.au
http://twitter.com/nadiap

XML data for Spry Menu ?

I maintain several web sites with static pages that all carry
a common Spry menu bar hard coded into each page via a template.
How can I use an XML file to feed a Spry menu widget to save
uploading all the pages every time there is a change on the site
that requires the menu to be updated?
I've searched the web and help files for an answer to this
without success, so any help or pointers would be most appreciated.

I made this example that uses a xml file to build the spry
menu, the page is html, you need to make a seperate dataset for
each <ul> tag, or item group in the menu, notice the two
datasets in my sample, you could expand and make as many as you
want, all drawn from xml files. check out the page here:
http://gohbcc.com/examples/menutest.html
html page:
<!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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item
1</a>
<ul>
<div spry:region="ds1">
<li spry:repeat="ds1">
<a href="{a/@href}">{a}</a>
</li>
</div>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item
3</a>
<ul>
<div spry:region="ds2">
<li spry:repeat="ds2">
<a href="{a/@href}">{a}</a>
</li>
</div>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<p> </p>
<div spry:region="ds1" style="float:right;">
<table>
<tr>
<th>A</th>
<th>A/@href</th>
</tr>
<tr spry:repeat="ds1">
<td>{a}</td>
<td>{a/@href}</td>
</tr>
</table>
</div>
<p> </p>
<script type="text/javascript">

</script>
</body>
</html>
XML Files
t.xml;
<?xml version="1.0" encoding="utf-8"?>
<links>
<link><a
href='customer_enter.php?method=Fname'>First
Name</a></link>
<link><a
href='customer_enter.php?method=caseNum'>Case
Number</a></link>
<link><a
href='customer_enter.php?method=Lname'>Last
Name</a></link>
<link><a
href='customer_enter.php?method=caseWorker'>Case
Worker</a></link>
</links>
s.xml:
<?xml version="1.0" encoding="utf-8"?>
<links>
<link><a href='customer_find.php?method=name'>By
Name</a></link>
<link><a
href='customer_find.php?method=caseNum'>By Case
Number</a></link>
<link><a href='customer_find.php?method=date'>By
Date</a></link>
<link><a
href='customer_find.php?method=itemNum'>By Item
Number</a></link>
</links>

Auto Width for Spry Menu

I've set the width of a (position: absolute) container for a Spry menu so it's width (width: auto) will expand to hold the menu in a single row.
But sometimes it looks like this in CS3:
While in browsers it looks OK, like this:
Is it OK to set the width (or height, for that matter) of the container to auto or or do I have to set a fixed width?

Please see the answer in the other forum.
Gramps

Traded tilted screen for bum menu button

I had one of the infamous tilted screen ones. I took it into the Apple Store and they traded it out with one that appeared new. The screen on this one is nice and square. When I got it home to try out though I discovered that the menu button though feels like one of the really cheap bubble buttons like on the Logitech mm50 remote. It feels "hollow" and makes a much more audible click. It feels a bit like I'm popping the Trouble dice bubble in second grade again.
One reviewer mentioned that his menu got better with time:
http://www.macnn.com/reviews/apple-ipod-nano---third-generation.html
I've pushed mine a few hundred times to see if it got better with use as his did. Not working so far.
It's too **** bad when a such a wonderful design like this new Nano is executed so poorly. I'm tempted to head back again. If I had to pick between a straight screen and this button, I'd probably stick with the button. I worry that if I go back to swap it out again, I may end up with another a tilted screen.
When you do the mail in deal through AppleCare for iPods generally, do the refurbed units they give you have new batteries?
Also if anyone has seen other discussion of this issue I'd be grateful for links.
Message was edited by: Michael Gorsline1

Menu button after hundreds of clicks loosened up and eventually worked normally.
Thanks for the help.

Images For DVD Menu Not All Appearing

Can someone please explain, when I drag 4 or 5 jpeg images for my theme into the "Drop Photos Here" boxes to be cycled, only 2 images get cycled through during the preview; even after I burn the DVD. Why aren't the remaining 2 to 3 images being recognized that I have chosen for my travel theme?
Thanks,
Henri
Powerbook G4, 1.67Ghz Superdrive 2GB RAM Mac OS X (10.4.7)

Can someone please explain, when I drag 4 or 5
jpeg
images for my theme into the "Drop Photos Here"
boxes
to be cycled, only 2 images get cycled through
during
the preview; even after I burn the DVD. Why aren't
the remaining 2 to 3 images being recognized that
I
have chosen for my travel theme?
Which element of the Travel theme: main, chapters or
extra?
Good Question...I didn't use chapters..So I guess it's Main...

It's posible change default image for mark interactive button / not UI

When in indesgin convert a object to button appears in background a hand with a finger pointing to a button. It's posible to change this?
I need to use several icons if it's posible in the same document.
Thanks !

I make a UI for mark custom buttons for custom export in xml, is for iPad but is a for a private format, not ePub, and i need to show diferents types of buttons, (events, buttons, etc...) I need to mark the elements with a custom icon.
My actual solution is put my icon, (non printable) in the top left corner of the element (textFrame, Rectangle...) ,group it and store all event information in a JSON object, but isn't a good solution.
the user can delete the item ....
I think is imposible to make a custom mark for items without insert a new item.
The Flag icon is for mark, when the user is building the publication. This item launches an interactive event
thank for any idea

Different images for spry menu button jpg or gif?

Similar Messages

Maybe you are looking for