Custom spry type menu using images instead of text

Hi.
Before I ask my question properly, I just want to put it out there that I have created my almost finished (apart from this part) website pretty much cometely in design view. I am very very limited with HTML and have zero scripting experience.
I'm looking for a step by step guide to the solution/s if anyone can be so kind as to help.
My website uses a non standard font throughout so my headings are all .png files including the menu bar navigation.
I would like one of my menu buttons to continue to switch to a different image as the others do (it simply changes colour) but also drop down a further two clickable images in the spry style.
Is it possible to create a rollover image that has further hotline regions or clickable images as part of it?
If not, can you create a spry menu with no text, just background images?
Alternatively, is there another way to achieve what I'm looking for.
Thank you very much.

Use a background image, keep the original label (e.g. Home) for accessibility (screen readers, search engines etc), but hide the labels by placing them in a span and giving the span a left margin of -1000em. Also give the item an identifying class (home),as per
<li><a class="MenuBarItemSubmenu home" href="#"><span>Home</span></a>
and the CSS
ul.MenuBarHorizontal a span {margin-left: -1000em;}
ul.MenuBarHorizontal a.home {
background: url(home_bg.png);
Give the hover and focus a background image of choice.
Gramps

Similar Messages

How to modify a lookup field-type to use checkbox instead of radiobutton?

How to modify a lookup field-type to use checkbox instead of radiobutton?
I would like to modify the behavior for the lookup field.
Normally you get a screen where it is possible to search through a lookup. The items resulted from the search are listed as radiobutton items. Therefore you can select only one at the time to be added.
Is it possible to have the items to be listed as checkbox instead? So that you can check multiple items and therefore be able to add multiple items at the time?
For example:
To add the user to 10 different groups on MS-AD.
It is desired to have the ability to check multiple groups to be added instead only one at the time.
My client would like to use this feature in many other situations.

Displaying will not be a big deal but with that you have to customize the action class and its working as well.

How can I make the tab image instead of text.

Hi guys,
How can I make a tab displayed as image instead of text?
Best Wishes,
Fateh

Thanks Jari,
I use Apex 4.0.2 and the theme is Builder Blue 2. When I click edit tab, I get "Tab Label" that is required field and a region called "images". As I got from you, I cannot utilize images in my case.
Regards,
Fateh

Helvetica Light Appears As An Image Instead Of Text

Earlier i was using "Helvetica" on my Adobe Muse website that i am designing. I had to change it from "Helvetica" to "Helvetica Light" and the text started to show as an image instead of text. I mean it does not remain text anymore and when i export the site it shows as a png file. Although i can still edit the text of course.
I have seen a question on the forum (HERE) that explains what is happening but there is no explanation how to correct it. I really want to use Helvetica Light instead of normal Helvetica. Can any one tell me how to keep it as a text instead of a png file?
Thanks!

Not all visitors to your website will have Helvetica Light installed on their computer, so the only way for Muse to give that exact look is to turn the text into an image.
If you want the text to stay live text and not become an image, you have to limit yourself to the fonts in the 'web safe' or 'web fonts' categories. If you use a system font, Muse will rasterize the text to give you the exact appearance you desire.

Use image instead of submitbutton

Hello,
I try to use an image instead of the <submitButton> Tag supported by UIX. I have a form with BC4J Table and tableSelection in it. Now I want to submit this form instead of the update or delete Buttons generated by JDeveloper with an image.
The selected key does not come with.
<form name="viewForm" method="POST" >
<contents>
<tableLayout>
<contents> <bc4j:viewObjectScope name="UserView1" >
<contents>
<bc4j:table name="viewTable" width="800" alternateText="No rows found">
<tableSelection>
<singleSelection selectedIndex="0">
<contents>
<text text=" "/>
<ui:image source="images/adddocumenttolist_enabled.gif" ctrl:event="create" shortDesc="add" /> <ui:image source="images/edit_big.gif" destination="#" onClick="submitForm('viewForm',1,{'event':'update'});return false" shortDesc="Bearbeiten" />
<ui:image source="images/delete_L.gif?key=" ctrl:event="delete" shortDesc="Loeschen"/>
</contents>
</singleSelection>
</tableSelection>
<bc4j:keyStamp>
<bc4j:rowKey name="key" />
</bc4j:keyStamp>
<contents>
Replace one of the Image-Tags with <submitButton ctrl:event="..." text="..."/> works???
Regards Christian

Hello,
I tried adding
<formValue name="event"/> and that worked for me. This adds this html:
<input type="hidden" name="event">
The submit button does this for you automatically.
Jeanne

Horizontal menu with horizontal sub menu using image rollovers or similar

Hello,
I am brand new to web design and working on my first site. What I lack in skills, I have in free time to learn right now : ) Please let me know if there is a tutorial or other resource that describes what I am trying to do...I've been searching for days and just can't find what I'm after.
The design concept is a menu of main categories that apear to be floating over an object. When you hover over one, it looks like it gets pressed down in space resulting in the next line populating with subcategories to be selected. If you click on the main elements, you would be directed to that page - Services for instance. If you just hovered over a main category, you would be presented with a list of sub-categories that behave in the same fashion. If you then clicked on one of the sub-categories, you would be taken to that specific page.
Here's a sequence of images that show what I'm after.
I built all this in Illustrator as described in a Lynda.com tutorial. I then exported slices to dreamweaver and started building content. Each of the categories and sub categories is a separate slice with images built for the rollovers. I was able to build the main categories and get them to visually sink upon using an imageswap...now I'm stuck on how to get the second line to behave as I described.
This is a fun learning experience. Let me know if there is a better way to achieve the design. I just stared investigating SSIs as well and see the value in having this menu in just one place, referenced into all my subsequent pages. I have successfully embeded an SSI footer with rollovers on my page, but this menu problem is really tough for me.
I really appreciate any pointers.
Thanks,
Jeff Prince

I tried building a Spry Horizontal menu to get what I want, but I had no success there. Any tips for that?
On a separate note...I do not know if it is proper to use a 'tabbed panel' for my menu project, but it seems to work fine. I have built both the top (main category) and bottom (sub category) lines of my menu using spry with .png image rollovers.
Now I just need to find out how to make the main category button rollover stay 'down' while browsing the subcategories. I would also like to get the subcategories to populate upon mouseover of the main category, without requiring a selection. Now that would be slick : ) In my example above, the 'services' title should be depressed while in that submenu and look like 'landscape design'.
One minor problem is the space created between my subcategory images. I can't find the .css or .js that is creating that space. I've really trimmed down all the .css and do not know where else to hunt.
Thanks for any advice,
Jeff

PDF created with text as image instead of text

Acro Pro 9.3.2 on Win 7 Pro 64-bit using OpenOffice.org 3.2.0, Impress.
When I create a PDF from a presentation document using the referenced, the text is rendered as an image (which I don't want). I've gone through the settings several times and can't find something which is probably painfully obvious. Oddly enough, if I use OpenOffice.org's Export as PDF feature, the PDF comes through exactly as I'd expect it to, with the text generated as text.
Would anyone know what setting(s) I've overlooked so I can change the behavior in Acro Pro? Thanks.

Bill, thank you for putting so much time into this. As you can see from my other responses, the problem may well be limited just to the one doc in question so it's not worth any more of anyone's time. If nothing else, I feel less embarrassed knowing I (apparently) didn't overlook something obvious. I probably shouldn't write that, should I?
In case it's of interest, I tried unchecking the "rely on sys fonts only" option and that didn't change anything.
OO 3.2 is a significantly better product than 2.4 btw. I realize you didn't say anything negative about it. I just wanted to drop that in.
Again, thank you for working on this.

Spry Horizontal menu using rollover images

I see there are a lot of posts about spry menus and problems in IE. I wasnt sure if my problem is the same as the others, so my apologies if it's redundant. I'm working on a site with rollover images in the top menu of a spry menu bar with drop downs that fall below three of the menu items. Everything looks good in Mac/Win Firefox and Mac Safari. In Win IE 8 the menus go horizontally, left to right, instead of falling below the top level item as they should.
The site is here: http://tinyurl.com/y8dxo8m
The Spry CSS is here: http://tinyurl.com/yd8yhem
Should I not be using rollover images with the Spry menu? I've spent quite a bit of time on trying to solve this, including attempting to rebuild the menu from scratch.

I Paty, I just inserted the Dreamweaver rollover into the navigation. I'm not sure if that's the best approach to achieve what i wanted out of my design, but it seems to work. I checked it in Adobe's Browserlab and it works across all browsers. I'm looking into purchasing the Project7 product. It's not a lot of money and seems easier to work with for embedded graphics than the spry software. I spent way too much time with the spry trying to get the nav to look like I wanted it to while working in all browsers.

HTML Button use an image instead of Text

I have an HTML button in its own region called A_BUTTON, its current Button display attributes are
sytle: HTML Button
Attributes: name="A" class="where_clause_button"
what it does is i use a dynamic action based off the where_clause_button jquery selector and use javascript to update a hidden field. I would now like to use the Oracle Logo for example as the image of the button instead of using a text label for it. I tried adding to the Attributes src="http://www.oracleimg.com/admin/images/ocom/hp/oralogo_small.gif". When i run it the button still works the same as before but without the image and retains its Text Label, in this case its A.
the html it generates is for the button during runtime is:
<input type="button" src="http://www.oracleimg.com/admin/images/ocom/hp/oralogo_small.gif" class="where_clause_button" name="A" onclick="apex.submit('');" id="A_BUTTON" value="A">
How do i retain the functionality of this button but make it an image button?
Edited by: Brobot on Feb 9, 2011 5:22 PM

<li>Use a template based button and customize the template with the image.
<li>Add appropriate JS code to the URL section(prefixing with "javascript:" ) and optionally add a some ID attribute for easy JS access.

Spry tab menu background image is not displaying on remote server

Hello All,
I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
Here is the link
http://www.geftas.com/temaritestpage/about.html
Also I am uploading Css and html code below
Any help would be exteremely appreciated.
Thanks
<!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=utf8"/>
<meta http-equiv="content-type" content="cache" />
<meta http-equiv="robots" content="INDEX,FOLLOW" />
<meta http-equiv="keywords" content="Enter Keywords"/>
<meta http-equiv="description" content="Description Here" />
<title>TEMARI&CO. | Business Strategists</title>
<link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
          <div id="header"></div>
<div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html" class="current">ABOUT</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
        <ul>
          <li><a href="#">Business Plan</a></li>
          <li><a href="#">Marketing Plan</a></li>
          <li><a href="#">Incorporation</a></li>
          <li><a href="#">Accounting System</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#">OUR PROCESS</a></li>
      <li><a href="#">CAREERS</a>      </li>
      <li><a href="#">CONTACT</a></li>
    </ul>
</div>
<div class="shadow" id="content">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">values</li>
      <li class="TabbedPanelsTab" tabindex="0">people</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
                <div id="scrolltext">
                    <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
        </div>
      </div>
      <div class="TabbedPanelsContent">
                  <div id="scrolltext">
                    <h1>Heading1</h1>
        <p>Lorem n, </p>
                            <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, , </p>
                           <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit a, </p>
                           <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, </p>
        </div>
      </div>
    </div>
</div>
</div>
<div id="footer">
<div id="legal">
                      <ul>
                          <li>Copyright © 2012 Temari&Co</li>
                    <li>| Privacy Policy |</li>
                    <li>Terms of Use</li>
                </ul>
    </div>
            <div id="socialmedia">
                      <ul>
                          <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                    <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                    <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                    <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
              </ul>
      </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
.TabbedPanels {
          overflow: hidden;
          margin: 0px;
          padding: 0px;
          clear: none;
          width: 100%;
          height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
          margin: 0px;
          padding: 0px;
.TabbedPanelsTab {
          position: relative;
          float: left;
          background-color: #FFF;
          list-style: none;
          -moz-user-select: none;
          -khtml-user-select: none;
          cursor: pointer;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 9pt;
          font-weight: normal;
          color: #666;
          height: 30px;
          width: 116px;
          text-transform: uppercase;
          text-align: center;
          line-height: 30px;
          margin: 0px;
          padding: 0px;
.TabbedPanelsTabHover {
          background-image: url(../../SUPEROLDU/images/menubaractive.png);
          background-repeat: repeat-x;
          color: #FFF;
.TabbedPanelsTabSelected {
          background-image: url(../../SUPEROLDU/images/menubaractive.png);
          background-repeat: repeat-x;
          color: #FFF;
          height: 30px;
          width: 116px;
.TabbedPanelsTab a {
          color: black;
          text-decoration: none;
.TabbedPanelsContentGroup {
          clear: both;
          background-color: #FFF;
          height: 100%;
          width: 824px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 9pt;
          color: #666;
          border-top-width: 1px;
          border-right-width: 1px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-top-style: dotted;
          border-top-color: #CCC;
          border-right-color: #CCC;
          border-bottom-color: #CCC;
          border-left-color: #CCC;
.TabbedPanelsContent {
          height: 100%;
          width: 100%;
          overflow:hidden;
.TabbedPanelsContentVisible {
.VTabbedPanels {
          overflow: hidden;
          zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
          float: left;
          background-color: #EEE;
          position: relative;
.VTabbedPanels .TabbedPanelsTab {
          float: none;
          margin: 0px;
          border-top: none;
          border-left: none;
          border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
          background-color: #EEE;
.VTabbedPanels .TabbedPanelsContentGroup {
          clear: none;
/* Styles for Printing */
@media print {
.TabbedPanels {
          overflow: visible !important;
.TabbedPanelsContentGroup {
          display: block !important;
          overflow: visible !important;
          height: auto !important;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
.TabbedPanelsContent {
          clear:both !important;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
          width: 744px;
.TabbedPanelsTab {
           overflow: visible !important;
           display: block !important;
           clear:both !important;

Assuming these are the images you're trying to display:
.TabbedPanelsTabHover {
          background-image: url(../../SUPEROLDU/images/menubaractive.png);
          background-repeat: repeat-x;
          color: #FFF;
.TabbedPanelsTabSelected {
          background-image: url(../../SUPEROLDU/images/menubaractive.png);
          background-repeat: repeat-x;
          color: #FFF;
          height: 30px;
          width: 116px;
You have 2 root paths in your URL code. I think this is how your file structure looks like on your local computer. However, on a remote server, ../ by itself means you're pointing to the root folder of your website. Your URL linkage should be corrected based on the relativity and your background will work without a problem.

Image instead of text in Spry validation?

Hi,
I have 2 questions concerning Spry implementation:
1. Instead of a long winded error text message in a textfield validation I just want to put a little image ( a picture tells a thousand words, they say!), like an "X" or in case the entry is valid, "Tick- or Check-mark". Is this possible?
2. I want to "Enforce" a certain "Format" for a "Date of Birth" entry which had to be numeric, "Year | Month | Day ". Somehow, both these options are grayed out in the textfield validation dialogue. Is this possible?
Thank you in advance..
zabberwan

Hi Gramps,
Sorry for this late response. I tried the method you pointed to, but it did not work properly, but I got to doing what I wanted to by changing the .css for the classes and also making a new class in the SpryValidationTextField.css etc.and then applying it in the source code among the span tags.
I have a new question, but will post it separately.
zabberwan

Custom logging formatter not used (XML instead).

I use the built in Java logging API to write log messages to a file. As the SimpleFormatter does not quite the format we would like to have, I wrote a custom formatter and set it in the logging properties file:
java.util.logging.FileHandler.formatter = my.LogFormatter
This works well in a standalone application. But using the same in my servlet application, the log fie does not use my custom formatter but the (default?) XML formatter. I multichecked the JAR that is in cluded in the WAR file and it has my custom LogFormatter class (as the JAR is exactly the same that works in the standalone application).
Does the servlet expect a custom logging formatter somewhere else? I tried adding it to the root directory within the WAR but this also doesn't work.

By default, the LogManager reads its initial configuration from a properties file "lib/logging.properties" in the JRE directory.
http://java.sun.com/j2se/1.4.2/docs/api/java/util/logging/LogManager.html

How do i place image instead of text in swing button ?

Hi
I need to place image in place of text in button i.e in place of button name i need to display image.
Please tell me how to do this.......

You'll need to use CSS floats.
.floatLt {
float:left;
width:auto;
HTML:
<div class="floatLt">
YOUR LOGO IMG HERE
</div>
<ul id="MenuBar1" class="MenuBarHorizontal floatLt">
YOUR MENU GOES HERE
</ul>
Coding skills are essential to using DW. Learn HTML & CSS first. DW will be much easier.
HTML, CSS & Web Design Theory Tutorials -
http://w3schools.com/
http://www.csstutorial.net/
http://phrogz.net/css/HowToDevelopWithCSS.html
http://webdesign.tutsplus.com/sessions/web-design-theory/
Nancy O.

Report header with images instead of text - sort is screwed up

Hi all,
I have a package which returns a given text in from of an image file - I adjusted my template to use the package etc. So far so good - no problems. Only if I enable the sorting for the columns I get a screwed up result !
My Column Heading Template is
<th class="t18ReportHeader" #ALIGNMENT# valign="Bottom" id="#COLUMN_HEADER_NAME#">
<img src="IMAGE.GET?p_text=#COLUMN_HEADER#&p_attribute=BG:EFEFEF:FC:000000:ANGLE:70">
</th>
With sorting enabled this shows up as:
<th class="t18ReportHeader" align="left" valign="Bottom" id="PERSON_ID">
<img src="IMAGE.GET?p_text= *<a href="javascript:$a_report('2152526465901175',false,false,false,'fsp_sort_1_desc')" title="Sort by this column">* Employee Name *</a><img src="/i/arrow_up_gray_dark.gif" width="13" height="12" alt="" alt="Sort by this column" />* &p_attribute=BG:EFEFEF:FC:000000:ANGLE:70">
</th>
As you can see the procedure IMAGE.GET?p_text= is not called with the right parameter (should be "IMAGE.GET?p_text=Text&p_attribute=...")
I also looked into the possibility to use PL/SQL heading and return the <IMG ...> code myself - but where would I store/manage the descriptions ? (Also this would break my Export functions)
My question is: are there any other substitution variables available to define the header text- and maybe the sort ? Or has anybody else any other idea ?
Thanks a lot
Thomas

Hi,
That is an interesting problem... The easiest option I see is to remove the img tag from the template and add it to the column header itself (in the report definition). For instance, put this in the column header:
<img src="IMAGE.GET?p_text=Employee Name&p_attribute=BG:EFEFEF:FC:000000:ANGLE:70"/>
I think this would work for sorting, but probably not for CSV export. What you could do for the CSV export would be create copies of all columns, set the column titles to plain text, and set the conditional display of them based on CSV output or not. A bit of pain but would be bearable if not too many columns...
I hope this helps...
Luis

What is the best file type to use when dealing with text data?

Hello,
I am trying to read off text information from a file stored on the phone. I am currently using a txt file to store the data; however the input streaming process is very slow. Is there another way, or file type I can use which is much quicker?
Regards,
vj

do buffering in stead of reading char by char.

Custom spry type menu using images instead of text

Similar Messages

Maybe you are looking for