|
Claims  |
|
|
What is claimed is:
1. In a computer system having a processor coupled to bus, a memory coupled to said bus and a display screen, instructions stored in said memory for generating a display
button on said display screen when executed by said processor, said instructions comprising:
first cell instructions for creating a first end cap display region and identifying a first graphic image for display in said first end cap display region;
second cell instructions for creating a second end cap display region and identifying a second graphic image for display in said second end cap display region;
third cell instructions for creating a text display region to be rendered between said first and second end cap display regions and having a character based textual link for display therein with a text background color;
fourth cell instructions for creating a first upper row display region of a first background color to be rendered between said first and second end cap display regions and above said text display region; and
fifth cell instructions for creating a first lower row display region of a second background color to be rendered between said first and second end cap display regions and below said text display region, wherein said display regions integrate
said graphic images and said textual link into one unified visual display button on said display screen and wherein said first and second graphic images are displayed whether or not said display button is selected and wherein further said first, second,
third, fourth and fifth cell instructions are of Hypertext Markup Language (HTML) format residing within a Web page definition, and
wherein said cell instructions compose said display button with said first and second graphic images, said character based textual link, said first upper row display region and said first lower row display region at a time when said Web page
definition is rendered.
2. Computer processed instructions stored in memory as described in claim 1 wherein said textual link is a program call to a function to be performed by said computer system upon a user selecting said text display region.
3. Computer processed instructions stored in memory as described in claim 1 wherein said textual link is an HTML hypertext link for causing said computer system to connect to a predetermined web site upon a user selecting said text display
region.
4. Computer processed instructions stored in memory as described in claim 1 further comprising:
sixth cell instructions for creating a second upper row display region of a third background color to be rendered between said first upper row display region and said text display region; and
seventh cell instructions for creating a second lower row display region of a fourth background color to be rendered between said first lower row display region and said text display region, said first and second upper row display regions and
said first and second lower row display regions creating a boundary adding depth to said display button and wherein said text background color matches one of said first and second graphic images.
5. Computer processed instructions stored in memory as described in claim 1 wherein said first and second graphic images on said display screen with said first upper row display region and said first lower row display region create a graphic
outline of said unified visual display button.
6. Computer processed instructions stored in memory as described in claim 5 wherein said first graphic image on said display screen supports, in meaning, said textual link of said text display region.
7. In a computer system having a processor coupled to bus, a memory coupled to said bus and containing hypertext markup language (HTML) cell instructions and a display screen, a method of displaying a display button for a web page, said method
comprising the steps of:
from first cell instructions, rendering a first graphic image into a first end cap display region on said display screen;
from second cell instructions, rendering a second graphic image into a second end cap display region on said display screen;
from third cell instructions, rendering a character based textual link having a text background color within a text display region displayed between said first and second end cap display regions, said text background color matching one of said
first and second graphic images, and
wherein said first graphic image on said display screen supports, in meaning, said textual link of said text display region;
from fourth cell instructions, rendering a first upper row display region having a first background color and displayed between said first and second end cap display regions and above said text display region; and
from fifth cell instructions, rendering a first lower row display region having a second background color and displayed between said first and second end cap display regions and below said text display region, and
wherein said display regions integrate said graphic images and said textual link into a unified visual display button displayed on said display screen and wherein said first and second graphic images are displayed whether or not said display
button is selected and wherein further said first, second, third, fourth and fifth cell instructions are of HTML format residing within a Web page definition, and
wherein said cell instructions compose said display button with said first and second graphic images, said character based textual link, said first upper row display region and said first lower row display region at a time when said Web page
definition is rendered.
8. A method as described in claim 7 further comprising the step of obtaining said character based textual link from a result of a run-time computer operation.
9. A method as described in claim 7 further comprising the steps of:
translating a first word in character based format of a first language into a second word in character based format of a second language; and
storing said second word in character based format into said third cell instructions as said character based textual link.
10. A method as described in claim 7 wherein said character based textual link is a link to a function to be performed by said computer system and further comprising the step of performing said function upon a user selecting said text display
region.
11. A method as described in claim 7 wherein said character based textual link is an HTML hypertext link to a predetermined web site and further comprising the step of connecting to said web site upon a user selecting said text display region.
12. A method as described in claim 11 further comprising the steps of:
from sixth cell instructions rendering a second upper row display region of a third background color to be rendered between said first upper row display region and said text display region; and
from seventh cell instructions creating a second lower row display region of a fourth background color to be rendered between said first lower row display region and said text display region, said first and second upper row display regions and
said first and second lower row display regions creating a boundary adding depth to said display button.
13. A method as described in claim 1 wherein said first and second graphic images on said display screen, said first upper row display region and said first lower row display region create a graphic outline of said unified visual display button.
14. A computer system comprising a processor coupled to a bus, a computer readable memory unit coupled to said bus and a display coupled to said bus, said computer readable memory unit containing instructions that when executed implement method
of displaying a display button for a web page, said method comprising the steps of:
from first cell instructions, rendering a first graphic image into a first end cap display region on said display screen;
from second cell instructions, rendering a second graphic image into a second end cap display region on said display screen;
from third cell instructions, rendering a character based textual link having a text background color within a text display region displayed between said first and second end cap display regions, said text background color matching one of said
first and second graphic images, and
wherein said first graphic image on said display screen supports, in meaning, said textual link of said text display region;
from fourth cell instructions, rendering a first upper row display region having a first background color and displayed between said first and second end cap display regions and above said text display region; and
from fifth cell instructions, rendering a first lower row display region having a second background color and displayed between said first and second end cap display regions and below said text display region, and
wherein said display regions integrate said graphic images and said textual link into a unified visual display button displayed on said display screen and wherein said first and second graphic images are displayed whether or not said display
button is selected and wherein further said first, second, third, fourth and fifth cell instructions are of HTML format residing within a Web page definition, and
wherein said cell instructions compose said display button with said first and second graphic images, said character based textual link, said first upper row display region and said first lower row display region at a time when said Web page
definition is rendered.
15. A computer system as described in claim 14 wherein said method further comprises the step of obtaining said character based textual link from a result of a run-time computer operation.
16. A computer system as described in claim 14 wherein said method further comprises the steps of:
translating a first word in character based format of a first language into a second word in character based format of a second language; and
storing said second word in character based format into said third cell instructions as said character based textual link.
17. A computer system as described in claim 14 wherein said character based textual link is a link to a function to be performed by said computer system and said method further comprises the step of performing said function upon a user selecting
said text display region.
18. A computer system as described in claim 14 wherein said character based textual link is a link to a predetermined web site and said method further comprises the step of connecting to said web site upon a user selecting said text display
region.
19. A computer system as described in claim 14 wherein said method further comprises the steps of:
from sixth cell instructions rendering a second upper row display region of a third background color to be rendered between said first upper row display region and said text display region; and
from seventh cell instructions creating a second lower row display region of a fourth background color to be rendered between said first lower row display region and said text display region, said first and second upper row display regions and
said first and second lower row display regions creating a boundary adding depth to said display button.
20. A computer system as described in claim 14 wherein said first and second graphic images on said display, said first upper row display region and said first lower row display region create a graphic outline of said unified visual display
button. |
|
|
|
|
Claims  |
|
|
Description  |
|
|
BACKGROUND OF THE INVENTION
(1) Field of the Invention
The present invention relates to the field of graphic user interfaces (GUls) within computer systems. More specifically, the present invention relates to a GUI that is particularly useful in applications relating to the internet.
(2) Prior Art
Browsers display on-screen buttons, links and icons that users select in order to navigate through the information presented at a world wide web (http://www) site or to transfer to other websites. One language called hypertext markup language or
HTML is often used to specially code the display screens or "web pages" that are presented on a display screen to a computer user that is connected to a particular website. Buttons and links that are used to initiate user actions in HTML are typically
presented using one of two different methods. One prior art method uses only text to represent a button and the other prior art method uses only a graphic image to represent the button.
In the first prior art method, buttons and links to other websites can display specified text (e.g., ASCII characters), but do not include an iconic picture associated with the button or link. Although text display alone is useful in many
applications, users and web page designers desire to use icons (graphic pictures) associated with buttons and links because the artistic features of a graphic picture are very beneficial. For instance, a button with a icon (e.g., an iconic button) is
faster to locate and recognize than a text only button because it offers more distinctive information, especially over repeated use. Secondly, the iconic button clarifies and confirms the meaning of the button and its user action beyond what is
achievable with a single word or phrase of text in a text only button. Lastly, the iconic button adds visual appeal to the web page thereby making use of the website more enjoyable by the user. This can translate into increased sales, increased
dissemination of information, increased advertisement coverage, etc., which are all desired by most web page designers and sponsors.
In the second prior art method, graphic pictures are provided in web pages; however, only the graphic picture is included without any character based text unless the English label is drawn into the iconic image (e.g., in bit-mapped or raster
format). Pictures are rarely so clear that they do not need a text label to supplement their meaning at least for the first time a user sees them. To solve this problem, many web page designers place English text in graphic form into the graphic
picture. However, placing English text into the picture in graphic form creates many problems.
The first problem is that graphic form text (e.g., bit mapped text) is not easily translatable between different languages (e.g., Italian, English, French, German, etc.). In order to translate graphic form text between languages, the translator
for each language needs to use a drawing tool to redraw all of the graphic form text inside the image that is to be translated. In this case, the task of translating web information is accomplished by hand where the images are redrawn by a skilled
artist and this technique requires a large amount of complex, custom and time consuming effort. What is desired instead is a display button for a web page that displays both an icon and character based text so that the text can be readily translated
using a semi-automated process of word and phrase substitution so that graphics artists and time consuming drafting tools are not required in the translation phase.
A second problem of having graphic-form text within a display button is that the graphic-form text is static. This prevents the insertion of dynamic status information (e.g., information capable of being changed or obtained at run-time) into the
display button. Dynamic status and content specific information can improve the usability of a web page. For instance, if a button is used to send email (electronic mail) to a manager currently assigned to approve a requisition for hire, it is not
currently possible to readily create, dynamically, a graphic image of the manager's name within the display button. Instead, web page designers create a generic and static email button that would have a graphic-form of the text "Email Approving Manager"
without any indication as to the manager's name within the display button.
Also, with a static image, it is not possible to illustrate to a user, in a display button, the results of a particular computer operation. For example, assume a button is used to display all the matching records of a computer operation (e.g., a
keyword search) rather than just a small subset. It would be advantageous to provide, in the display button, the actual number of records that are to be downloaded so that a user does not inadvertently download an inordinate number of records which
could overflow the computer memory. In this case it would be advantageous to provide a display button that indicated the number of records, e.g., "Download 254 Records." However, using the second method discussed above, since the graphic-form text
information is static, run-time computer results cannot be integrated into the display button.
Accordingly, what is needed is a display button for a web page that contains graphic images and text whereby the text can be readily translated between different languages without the need for the image to be redrawn using an artist and a drawing
tool package. What is needed further is a display button for a web page that contains graphic images and text whereby the information displayed incorporates dynamic information, such as status, names, and results of operations. The present invention
display button provides the above features and others not necessarily recited above but clear within further discussions of the present invention herein.
SUMMARY OF THE INVENTION
A display button is disclosed for a web page integrating both a graphic pictorial image with character based textual information into a single iconic button. By providing a graphic image within a display button, the present invention provides
the advantages of a graphic icon, e.g., speed of location and user recognition as well as increased meaning. Further, the present invention provides a mechanism whereby dynamic textual information (e.g., a link) can be filled-in at the time the button
is displayed and therefore the button text is not static but is rather dynamic. This is the case because the present invention builds the display button at the time of on-screen rendering thereby allowing the dynamic modification of the text link before
the button is displayed. By providing character based dynamic textual information, the present invention provides an iconic button whose information can be readily translated between various languages (e.g., Italian, English, French, German, etc.)
without requiring the image to be redrawn using complex and time consuming means, e.g., using an artist and a drawing tool. Instead, translation can be accomplished using automatic word and/or phrase conversion.
The display button of the present invention is preferably represented in a table structure within HTML. The table structure contains two end cells which display graphic images therein and in between them a slightly shorter text cell is inserted
that can display a character based text link. Filling the height difference between the text cell and the end cells are thin horizontal row cells that are colored to provide an edge boundary with shadowing to thereby create a standard three dimensional
(3D) look of a button. The background colors of all the cells are selected to create a visual image of a complete display button having both graphic images and textual information. All the graphical images, as well as the textual information, are
defined as links, responsive to a mouse click. A user can select areas of the display button to obtain further display information or to advance to another web page or another website (e.g., used as a link). The language, JavaScript, can be used to
proceduralize creation of the buttons, reducing the amount of code required for rendering multiple buttons on a web page.
More specifically, in a computer system having a processor coupled to bus, a memory coupled to the bus and a display screen, embodiments of the present invention include instructions stored in the memory for generating a display button on the
display screen when executed by the processor, the instructions comprising: first cell instructions creating a first end cap display region and identifying a first graphic image for display in the first end cap display region; second cell instructions
creating a second end cap display region and identifying a second graphic image for display in the second end cap display region; third cell instructions creating a text display region to be rendered between the first and second end cap display regions
and having a character based textual link for display therein with a text background color matching one of said first and second graphic images; fourth cell instructions creating a first upper row display region of a first background color to be rendered
between the first and second end cap display regions and above the text display region; and fifth cell instructions creating a first lower row display region of a second background color to be rendered between the first and second end cap display regions
and below the text display region, wherein the display regions integrate the graphic images and the textual information into one unified visual display button on the display screen.
BRIEF DESCRIPTION OF THE DRAWINGS
FIG. 1 illustrates a block diagram of a general purpose computer system that can be used to render display buttons in accordance with the present invention.
FIG. 2 illustrates a block diagram of a server or information source communicating with a user over a communication interface (e.g., the internet).
FIG. 3 is an illustration of a generic display button in accordance with the present invention.
FIG. 4 is a logical diagram of the cells used in rendering a display button in accordance with the present invention.
FIG. 5A is an illustration of an exemplary display button in accordance with the present invention showing the integration of graphic images and textual information for an "accept" action.
FIG. 5B is an illustration of an exemplary display button in accordance with the present invention showing the integration of graphic images and textual information for a "cancel" action.
FIG. 6 is a flow diagram of steps performed by the present invention for rendering a display button of a web page on a computer display screen.
FIG. 7 is a flow diagram of steps performed by the present invention for rendering multiple display buttons of a web page on a computer display screen in accordance with the present invention.
FIG. 8 is a flow diagram illustrating steps performed by the present invention for translating a set of display buttons of the present invention from one language to another.
FIG. 9 illustrates an exemplary web page implemented with display buttons of the present invention specifically showing the integration of real-time content specific information into a display button.
FIG. 10 illustrates an exemplary web page implemented with display buttons of the present invention specifically showing the integration of real-time result information into a display button.
DETAILED DESCRIPTION OF THE INVENTION
In the following detailed description of the web page display button of the present invention, numerous specific details are set forth in order to provide a thorough understanding of the present invention. However, it will be obvious to one
skilled in the art that the present invention may be practiced without these specific details. In other instances well known methods, procedures, components, and circuits have not been described in detail as not to unnecessarily obscure aspects of the
present invention.
NOTATION AND NOMENCLATURE
Some portions of the detailed descriptions which follow are presented in terms of procedures, logic blocks, processing, and other symbolic representations of operations on data bits within a computer memory. These descriptions and
representations are the means used by those skilled in the data processing arts to most effectively convey the substance of their work to others skilled in the art. A procedure, logic block, process, step, etc., is here, and generally, conceived to be a
self-consistent sequence of steps or instructions leading to a desired result. The steps are those requiring physical manipulations of physical quantities. Usually, though not necessarily, these quantities take the form of electrical or magnetic
signals capable of being stored, transferred, combined, compared, and otherwise manipulated in a computer system. It has proven convenient at times, principally for reasons of common usage, to refer to these signals as bits, values, elements, symbols,
characters, terms, numbers, or the like.
It should be borne in mind, however, that all of these and similar terms are to be associated with the appropriate physical quantities and are merely convenient labels applied to these quantities. Unless specifically stated otherwise as apparent
from the following discussions, it is appreciated that throughout the present invention, discussions utilizing terms such as "processing" or "computing" or "calculating" or "determining" or "displaying" or the like, refer to the action and processes of a
computer system (e.g., 112 of FIG. 1), or similar electronic computing device, that manipulates and transforms data represented as physical (electronic) quantities within the computer system's registers and memories into other data similarly represented
as physical quantities within the computer system memories or registers or other such information storage, transmission or display devices.
COMPUTER SYSTEM ENVIRONMENT
Refer to FIG. 1 which illustrates a computer system 112. Within the following discussions of the present invention, certain processes and steps are discussed (e.g., processes 400, 450, 500) that are realized, in one embodiment, as a series of
instructions (e.g., software program) that reside within computer readable memory units of system 112 and executed by processors of system 112. When executed, the instructions cause the computer system 112 to perform specific actions and exhibit
specific behavior which is described in detail to follow.
In general, computer system 112 used by the present invention comprises an address/data bus 100 for communicating information, one or more central processors 101 coupled with the bus 100 for processing information and instructions, a computer
readable volatile memory unit 102 (e.g., random access memory, static RAM, dynamic, RAM, etc.) coupled with the bus 100 for storing information and instructions for the central processor(s) 101, a computer readable non-volatile memory unit (e.g., read
only memory, programmable ROM, flash memory, EPROM, EEPROM, etc.) coupled with the bus 100 for storing static information and instructions for the processor(s) 101. System 112 also includes a mass storage computer readable data storage device 104 such
as a magnetic or optical disk and disk drive coupled with the bus 100 for storing information and instructions. Optionally, system 112 can include a display device 105 coupled to the bus 100 for displaying information to the computer user, an
alphanumeric input device 106 including alphanumeric and function keys coupled to the bus 100 for communicating information and command selections to the central processor(s) 101, a cursor control device 107 coupled to the bus for communicating user
input information and command selections to the central processor(s) 101, and a signal generating device 108 coupled to the bus 100 for communicating command selections to the processor(s) 101.
COMMUNICATION SYSTEM ENVIRONMENT
In one embodiment, the present invention can operate in conjunction with a number of different communication systems as shown in FIG. 2. FIG. 2 illustrates a hardware system 120 in which the present invention can be employed with an exemplary
multi-user communication interface (e.g., the "internet" in one implementation) 140. Although the internet 140 is used as one example, it is appreciated that the present invention can be employed in conjunction with many other communication systems.
The internet 140 is a well known world wide connection computer systems that operate using the well known internet protocol. The internet 140 is one type of multi-user computer system. Other internet applications (e.g., using specific protocols)
operate on top of the internet protocol. One such application is the well known world wide web or www internet application which operates using the hypertext transfer protocol (HTTP). HTTP uses coded information in the hypertext markup language (HTML)
to construct visual web pages which interact with internet users. The www internet application is a "demand system" in which a user requests information from a site and the site transfers the information back to the user on-line. Also well known is the
email internet application which operates using the simple mail transport protocol (SMTP). The email internet application is a "present system" in that an information transfer command originates from a sender site and information pursuant to that
command is presented to the target email address. Another internet application is the file transfer internet application which operates using the file transfer protocol (FTP).
In general, the internet 140 can be used to provide a communication interface (e.g., a logical connection) between a server computer 130 (of the design shown in FIG. 1) containing a source of information and a user having a computer system 112.
The user (and system 112) can obtain information from the information source system 130 by selecting certain choices presented in the form of visible objects within web pages. The web pages are forwarded in coded (in HTML) from the information source
system 130 to the user computer 112 and then constructed into visual pages using browser software that is installed on the user computer system 112. The visual pages are presented on display 104. Two exemplary web pages 600 and 700 are shown in FIG. 9
and FIG. 10. In one technique, the user interacts (e.g., using keyboard 106 or cursor control 107) with the web pages by selecting displayed buttons on the display screen 104. User selection of the display buttons can cause information in a web page to
appear, can cause different web pages to appear or can cause the internet interface 140 to connect (e.g., "navigate") to another information source having new web pages, etc.
DISPLAY BUTTONS OF THE PRESENT INVENTION
FIG. 3 illustrates a display button ("button") 200 implemented in accordance with the present invention as displayed on a display screen 104.
The display button 200 is a visually displayed object that is an integration of character based textual information, e.g., information represented in character form, and some graphic images. The integration is organized in such a way that the
overall display button object 200 appears to a viewer as a unified graphic image of a button having text and graphics displayed therein. The entire display button 200 appears to be a unified graphic object within a web page that the user can select for
a particular computer function. The combination of text and graphics offered by the display button 200 of the present invention is designed to give the user maximum information for recognition and location of the button 200 and also to inform the user
clearly as to the computer function that is performed when the button 200 is selected.
The display button 200 of the present invention is organized as follows. On the left side is a left end cap region having an end cap graphic image 210 displayed therein. In this example, the end cap graphic image 210 is the left rounded edge of
a generally oblong display button 200. On the right side is a right end cap region having an end cap graphic image 220 displayed therein. In this example, the end cap graphic image 220 is the right rounded edge of a generally oblong display button 200. Between the left 210 and right 220 end cap graphic images is located a text display region 250.
The present invention displays a character based textual link 260 in the text display region 250. The textual link 260 is a combination of characters, words, phrases, punctuation, etc., (collectively textual information) and a link. The texutal
link 260 causes the computer system 112 (and/or the server computer system 130) to perform a particular function defined within or by the link when a user selects the display button. Generally, the textual link 260 is an HTML hypertext link that causes
the computer system 112 (via the sever computer system 130) to connect to a particular website defined by the link upon a user selecting the text display region 250. Alternatively, the textual link 260 can cause a particular web page (e.g., other
information) to be displayed within a same website. It is appreciated that within the present invention, the textual link is dynamic in that it can be changed at any time just before rendering of the display button on display screen 104.
One of the left and right end cap graphic images 210 and 220 contains a graphic picture that supports the meaning of the textual link 260. This is shown by example to follow. However, both end cap graphic images can contain such a graphic
picture. Preferably, the background text color selected for region 250 is matched to the color of one or more of the graphic images 210 and 220 to give button 200 the appearance of a unified visual object to the user.
Between the left and right end cap graphic images 210 and 220 and above the text display region 250 of FIG. 3 is one or more upper row display regions 230. Between the left and right end cap images 210 and 220 and below the text display region
250 is one or more lower row display regions 240. The upper and lower row display regions 230 and 240 act as a visual molding bridging the left and right end cap images 210 and 220 around the textual display region. These display regions 230 and 240
act as a button boundary and can give button 200 depth. As discussed above, the background color of the text display region 250 is the same as the color of the left and right end cap images 210 and 220 making their separation invisible. By optionally
selecting matching background colors for the text display region and one or more of the upper or lower row display regions 230 and 240, the present invention can further create a single unified graphic image of a button 200 that incorporates a character
based textual link therein. However, by selecting lighter and darker colors for regions 230 and 240, the present invention offers a boundary edge image and depth shadowing to give button 200 visual depth perception.
This integrated visual result is advantageous because although the graphic display button 200 of the present invention appears to look fully graphic (e.g., bit mapped) in nature, it nevertheless contains a character based textual information
center 260 (in region 250) that is easily modified to contain various text messages. In other words, the character based textual link 260 is generally left out of the graphic images 210 and 220. The arrangement of the present invention allows an icon
(image 210 and/or image 220) to be combined with a label (text) which is translatable and can be dynamically inserted to become more specific to the action it performs for the user. However, the overall button 200 still appears like one unified visual
object to the user, as opposed to placing the image and text near each other and using only their proximity to suggest the text labels the picture. Therefore, the present invention offers all of the advantages of providing graphic images in a web page
button (e.g., ease of location, ease of user recognition and the conveyance of more content based information), it also offers dynamically modifiable character based textual information, e.g., of the link 260. In one embodiment, the textual link 260 is
in the form of an HTML hypertext link.
One exemplary type of character based coding that can be used within the present invention for text 260 is the ASCII format (American Standard Code for Information Interchange) for character codes wherein each letter of the alphabet (including
numbers and punctuation characters) is represented by a number. This type of representation is often called "textual, "text" or "character based" format. Representing information in text format is useful because words can be transmitted between
computers using numbers (signals) that are standardized. Computer systems 112 can automatically obtain, manipulate, transmit and store information represented in text formats.
The graphic images (e.g., 210 and 220) that are represented within the display button 200 of the present invention are generally contained in the end cap regions. Graphic images within the present invention are represented not as character codes
(as textual link 260), but as bit mapped data or "raster" data. In these formats, an image is represented as a two dimensional matrix of pixels (with color attributes, etc.) that form the image when displayed on a raster type screen 104.
FIG. 4 is a logical diagram of the display regions within the display button 200 of the present invention. In one embodiment, these display regions are constructed as data constructs within a table in HTML. Shown is the left end cap display
region 310 containing a graphic image 210 displayed therein. Shown also is the left end cap display region 320 containing the graphic image 220 displayed therein. The present invention allows the provision of multiple upper row display regions and
shown in FIG. 4 are two exemplary upper row display regions 330a and 330b although 3 or more could also be used. The present invention also allows the provision of multiple lower row display regions and shown in FIG. 4 are two exemplary lower row
display regions 340a and 340b although 3 or more could also be used. Each of the row display regions 330a, 330b, 340a, and 340b can be displayed with a selected background color.
The textual display region 250 located in the spatial center of the other display regions contains the character based textual link 260 as well as a selected background color. The background colors of the display regions of display button 200
and the graphic images 210 and 220 can be selected such that the an outer boundary or edge image is generated which gives a visually appealing rendition of a slightly three dimensional push button (see button 203, FIG. 10, etc.). Specifically, in one
embodiment the upper row regions 330a and 330b create a light shadow boundary (region 330a white and region 330b gray) while lower row regions 340a and 340b create a dark shadow boundary (region 340a gray or dark gray and region 340b dark gray or black)
or vice-versa.
It is appreciated that according to well known browser techniques for displaying cells within a table structure in HTML, the upper and lower display regions 330a-330b and 340a-340b and the text display region 250 automatically expand or contract
to accommodate the size of the textual link 260 placed within region 250. The upper and lower display regions 330a-330b and 340a-340b fill with color according to their length as determined by the textual link 260 regardless of how large or small the
text 260 stretches the text display region 250 to be. Within button 200 of FIG. 4, the background color of the text displays region 250 is designed the same or similar as the color of the left and right end cap images 210 and 220 making their separation
invisible.
In one embodiment of the present invention, the display button 200 of the present invention is realized using HTML code as a table structure of display cells. The display cells are then rendered, via browser software of system 112, within a web
page that is displayed onto a display screen 104. An example pseudo code representation of a display button 200 in accordance with the present invention is shown in Table I below. The code of Table I is stored in computer readable memory units of
system 112 and when executed (e.g., by a browser) creates a display button on screen 104. Associated with each display cell definition in Table I is its corresponding element number of FIG. 4.
TABLE I ______________________________________ 310: row, cell, spans 5 rows, link to GIF containing image 210 330a: cell, background color gray, GIF of one pixel 320: cell, spans 5 rows, link to GIF containing image 220 330b: row, cell,
background color white, GIF of one pixel 250: row, cell, background color gray, link to text 260 that does Y 340a: row, cell, background color dark gray, GIF of one pixel 340b: row, cell, background color black, GIF of one pixel.
______________________________________
In Table I, GIF stands for a graphic image file and its name and Y stands for a computer function that is to be performed upon user selection of the text display region 250 of the display button 200. In the table data structure of Table I, the
text display region 250 is active or "hot" in that a cursor selection in this screen area causes the computer function X to be implemented. For example, if the display button of Table I was a "cancel" button that indicated a certain computer record
should be eliminated, the function X would then perform this computer function when selected by a user. Also, it is appreciated that the color of the GIF images 210 and 220 is programmed to match the background color of the text display region 250.
It is appreciated that with respect to the internet 140 (FIG. 2) implementation, the function X can be invoked by the user interacting with the browser on system 112; however, in the general case, the function X is performed by the server system
130. In other situations, system 112 can also perform the function.
The display button represented by the cell data of Table I can be modified where the end cap regions 310 and 320 are also active regions. This is shown in Table II below:
TABLE II ______________________________________ 310: row, cell, spans 5 rows, link to GIF containing image 210 that does Y 330a: cell, background color gray, GIF of one pixel 320: cell, spans 5 rows, link to GIF containing image 220 that
does Y 330b: row, cell, background color white, GIF of one pixel 250: row, cell, background color gray, link to text 260 that does Y 340a: row, cell, background color dark gray, GIF of one pixel 340b: row, cell, background color black, GIF of one
pixel. ______________________________________
In the example of Table II, the user can select region 250, region 310 or region 320 to invoke the function Y. It is appreciated that in the general case each of the three regions above perform the same computer function (e.g., function Y) when
| | |