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

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

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.

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

Images for button

Hi,
Can anyone provide link for adf- predefined image repository for buttons like add, delete, search, describe so on ...

locate the <jdev_home>/jdeveloper/ide/lib/ folder and open oicons.jar and then navigate to oracle/javatools/icons

Use sprite image for button icons

Hi all,
I'm developing a mobile app in sapui5, i have many buttons in that.
I also have a sprote image which contains all the icons.
Please help me to use the sprite image as icons to the button.
Thanks,
Rahul.

sorry the sprote implies sprite
sprote ~ sprite

Images for Buttons

Any suggestions as to how I can use an image as a button? I have successfully imported my image, got it displaying fine but PL/SQL is unavailable for it. Why can't I do a 'When-Image-Pressed' on an imported image. I also tried using the image item but do not know how to set the source.
Oh yeah, while I'm on the subject, how do you get an iconic button to display its icon? Does it have to be a .ico?
Ben

Hi,
Well your first part of question , well i have to work on it.May be only then i would be able to suggest u anything.
As far as iconic button are concerned. There is a property in button property pallette of button type. Set it to iconic.
Set iconic file name(Give complete path of file).
Well not neccassary it should be .ico. Can be other image file also.
navneet jain
[email protected]

Swaping images for buttons

what is the action script code, and what else is needed, to
make my buttons change color (indeed image) on rollover?
I have got this from the manual:
366ActionScript classesonRollOut (Button.onRollOut
handler)onRollOut = function() {}Invoked when the pointer moves
outside a button area. You must define a function that executes
when the event handler is invoked.Availability: ActionScript 1.0;
Flash Player 6ExampleIn the following example, a function that
sends a trace() statement to the Output panel is defined for the
onRollOut handler: my_btn.onRollOut = function () {trace
("onRollOut called");};onRollOver (Button.onRollOver
handler)onRollOver = function() {}Invoked when the pointer moves
over a button area. You must define a function that executes when
the event handler is invoked.Availability: ActionScript 1.0; Flash
Player 6ExampleIn the following example, a function that sends a
trace() statement to the Output panel is defined for the onRollOver
handler: my_btn.onRollOver = function () {trace ("onRollOver
called");};
how do I hanlde the trace() statement??
Thanks,
Dario

Also, if the buttons are bitmap images as opposed to vector
drawing objects or text created in Flash, the bitmaps will use a
lot more memory.
In Dreamweaver, one uses the replace image onRollover method
to achieve this type of change, but Flash operates differently, so
unless the image that your using is a picture, you can most likely
re-create the button using Flash drawing tools and text, directly
on the Stage.
You can also use ActionScript to change the look of a Button,
use an MovieClip as a Button, use the color controls(tint,
brightness or alpha as mentioned above), use Flash filters, use the
Tweens and Transitions classes to animate it, or use a variety of
other advanced methods, and combinations of any of these!
Agreeing with 2m, if you could post a simple example file
online, we could be of more assistance.

How to create or use app_AppMenuMultiOpenBottom for button in apex page

Hi all
can anybody help
to use
app_AppMenuMultiOpenBottom2
function used in the apex on edit page on create or utilities buttons
i want to implement same pull down menu like it .
thanxs

Sounds like the job for a list - you may find a suitable List template or two in your theme already.
If not, you'd need to find a suitable jQuery plug-in, and incorporate into your APEX application.

Foreground image for buttons on jsp

Is it possible for me to create a button with an image on it in the jsp editor. You can do it for a link by dragging and dropping the image on the visual editor.

Hi,
HTML, and thsi is what JSP generate, doesn't support iconic buttons
Frank

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.

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

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; */

Onmouseover for button images

I am using images for my buttons. In the attribute section/ image attributes of the button properties I have:
#APP_IMAGES#addrow1.gif
I want to change the image when the user mouse over.
I tried adding: onmouseover="this.src='/i/htmldb/addrow2.gif';" to the image, and copying the image files to the /i/ folder, but it doesn't work. How can I toggle the button image with mouseover?

hi,
thanks for reply. How do I post a link do I need to upload it to a server somewhere?
I sort of got it to work in the end. When I applied onClick or onMouseDown it always applies a second onMouseOver so then I right-click the second onMouseOver in the Beahviors palette and choose onClick from dropdown menu, this seems to fix it.
Though there is still 1 thing puzzling me. Is it possible to get the onClick image or "hit" button state to restore to original image as soon as user releases mouse button rather than when pointer rolls off the button. Only a very minor detail and not really an issue. Just would look slightly slicker if the "hit" state was a brief flash or pulse.
cheers
s

Spry menus - using images for buttons

Similar Messages

Maybe you are looking for