Browse Prior Art Database

Efficient 3D Buttons in Dynamic Hyper Text Markup Language Pages

IP.com Disclosure Number: IPCOM000122961D
Original Publication Date: 1998-Jan-01
Included in the Prior Art Database: 2005-Apr-04
Document File: 4 page(s) / 329K

Publishing Venue

IBM

Related People

Lection, DB: AUTHOR

Abstract

One user-interface technology that is taking the World Wide Web by storm is Dynamic Hyper Text Markup Language (HTML). Dynamic HTML allows pages to come alive in graphical ways that were not before possible or practical.

This text was extracted from an ASCII text file.
This is the abbreviated version, containing approximately 52% of the total text.

Efficient 3D Buttons in Dynamic Hyper Text Markup Language Pages

      One user-interface technology that is taking the World Wide Web
by storm is Dynamic Hyper Text Markup Language (HTML).  Dynamic HTML
allows pages to come alive in graphical ways that were not before
possible or practical.

      Dynamic text styles can be added using style sheets.  Animation
and graphics can be accomplished by adding layers to a page.  Tying
all of this advanced function together is a programming language
called Javascript which allows the programmer to write special
programming into a page to deal with user input and react to the user
in a personal way.

      Efficient Dynamic HTML Pages, The Dilemma

      Dynamic HTML provides great capability to customize the user
interface using images and image technology.  However, dynamic HTML
does not support drawing operations, so all graphical operations must
be done using images.

      This becomes problematic when trying to create push buttons in
dynamic HTML page.  In today's environment, art developers develop a
set of buttons by providing a background image.  From the background
image, each button is made from a "cutout" of the background image.
This cutout image is then duplicated twice.  The edges of each of
these images  are colored to yield a button face that looks pressed
or indented, a button face which looks raised, and a default image
which focus emphasis.

      When these cutout images are layered over the original
background image at the proper point, the button appears raised,
lowered, or with focus emphasis.

      This is very straightforward, but consider a page that has many
buttons, or worse, several groups of buttons.  The worst case formula
of the number of images is the following:
      ( ButtonGroups * 1 ) + ( NumberOfButtons * 3 )

      Browsing the internet one can find many pages which, due to the
large number of images contained in the page, tax the browser and the
machine's available memory.

      Web browsers support the display of transparent images.  The
GIF89a format supports transparent backgrounds.  The following image
examples were produced with a shareware drawing program and have
transparent backgrounds:

      An Efficient Solution

      Using transparent images a set of button masks can be
developed.  Each mask is developed to encompass an area of a
background image.  When the mask is applied, a button appears out of
background.  The mask edge colors are selected of the proper colors
to make a raised look, lowered look, or a highlighted look.

      This image depicts a set of masks that can be used to overlay a
gray background image and create raised, lowered, or highlighted
buttons.

This is an example gray background without masks button masks
ove...