JP2002077583A - マークアップ言語における背景画像の表現 - Google Patents
マークアップ言語における背景画像の表現Info
- Publication number
- JP2002077583A JP2002077583A JP2000261782A JP2000261782A JP2002077583A JP 2002077583 A JP2002077583 A JP 2002077583A JP 2000261782 A JP2000261782 A JP 2000261782A JP 2000261782 A JP2000261782 A JP 2000261782A JP 2002077583 A JP2002077583 A JP 2002077583A
- Authority
- JP
- Japan
- Prior art keywords
- image
- background image
- mixed
- background
- color
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Controls And Circuits For Display Device (AREA)
- User Interface Of Digital Computer (AREA)
- Image Processing (AREA)
- Editing Of Facsimile Originals (AREA)
Abstract
(57)【要約】
【課題】 背景画像とメイン画像を重ねて表示させた場
合でもその両者を見易く表示させる表現方法を、マーク
アップ言語の文法の枠内における工夫によって実現す
る。また、背景画像の任意の位置を半透過させ、画像表
現に深みを与える技術を提供する。 【解決手段】 背景画像上に、透過色部分と不透過色部
分とが混交した混交画像を配置するとともに、当該混交
画像上にメイン画像を配置する。この混交画像は、ＨＴ
ＭＬにおけるテーブル又はレイヤーの背景画像として配
置する。混交画像のうち不透過色の部分は、背景画像を
透過しないので、メイン画像と背景画像とが近い色であ
っても、メイン画像を明瞭に判別することができる。一
方、混交画像のうち透過色の部分は、背景画像を透過す
るので、メイン画像の間を通して背景画像を見ることが
できる。
合でもその両者を見易く表示させる表現方法を、マーク
アップ言語の文法の枠内における工夫によって実現す
る。また、背景画像の任意の位置を半透過させ、画像表
現に深みを与える技術を提供する。 【解決手段】 背景画像上に、透過色部分と不透過色部
分とが混交した混交画像を配置するとともに、当該混交
画像上にメイン画像を配置する。この混交画像は、ＨＴ
ＭＬにおけるテーブル又はレイヤーの背景画像として配
置する。混交画像のうち不透過色の部分は、背景画像を
透過しないので、メイン画像と背景画像とが近い色であ
っても、メイン画像を明瞭に判別することができる。一
方、混交画像のうち透過色の部分は、背景画像を透過す
るので、メイン画像の間を通して背景画像を見ることが
できる。
Description
【０００１】
【発明の属する技術分野】本発明は、マークアップ言語
における背景画像の表現方法に関し、特に、ＷＥＢペー
ジなどにおいて背景画像上にメイン画像を重ねて配置す
る場合に、背景画像及びメイン画像の両者を見易くかつ
美しく表現するための方法に関する。
における背景画像の表現方法に関し、特に、ＷＥＢペー
ジなどにおいて背景画像上にメイン画像を重ねて配置す
る場合に、背景画像及びメイン画像の両者を見易くかつ
美しく表現するための方法に関する。
【０００２】
【従来の技術】ＨＴＭＬ（Hyper Text Markup Languag
e）に代表されるマークアップ言語は、互換性が高い、
ファイルサイズが小さい、テキストの他にイメージデー
タなどを貼り付けられる、などの優れた利点を有してお
り、インターネット上に公開されるＷＥＢページなどに
広く用いられている。
e）に代表されるマークアップ言語は、互換性が高い、
ファイルサイズが小さい、テキストの他にイメージデー
タなどを貼り付けられる、などの優れた利点を有してお
り、インターネット上に公開されるＷＥＢページなどに
広く用いられている。
【０００３】マークアップ言語で記述した文書にイメー
ジデータを貼り付ける場合には、例えば、ＨＴＭＬ文書
において、「BODY」の属性として「BACKGROUND="bg.gi
f"」のように記述し、イメージファイル「bg.gif」を当
該ＨＴＭＬ文書と同じフォルダに格納する。このＨＴＭ
Ｌ文書をブラウザ（閲覧ソフト）を用いて表示させる
と、イメージファイル「bg.gif」の内容が背景画像とし
て表示される。
ジデータを貼り付ける場合には、例えば、ＨＴＭＬ文書
において、「BODY」の属性として「BACKGROUND="bg.gi
f"」のように記述し、イメージファイル「bg.gif」を当
該ＨＴＭＬ文書と同じフォルダに格納する。このＨＴＭ
Ｌ文書をブラウザ（閲覧ソフト）を用いて表示させる
と、イメージファイル「bg.gif」の内容が背景画像とし
て表示される。
【０００４】
【発明が解決しようとする課題】しかしながら、図１に
例示するように、背景画像に重なるメイン画像が同色系
の文字である場合、背景画像とメイン画像の区別がつき
にくく、特にメイン画像が見づらくなってしまうことが
多い。
例示するように、背景画像に重なるメイン画像が同色系
の文字である場合、背景画像とメイン画像の区別がつき
にくく、特にメイン画像が見づらくなってしまうことが
多い。
【０００５】また、図２に例示するように、メイン画像
の表示部分の背景色を指定することにより、メイン画像
は見易くなる。しかし、背景画像のうち上記背景色を指
定した部分が消えてしまい、背景に画像を入れた意味が
半減してしまう。
の表示部分の背景色を指定することにより、メイン画像
は見易くなる。しかし、背景画像のうち上記背景色を指
定した部分が消えてしまい、背景に画像を入れた意味が
半減してしまう。
【０００６】マークアップ言語は、記述がシンプルでフ
ァイルサイズが小さいという利点を持つ一方で、表現の
バリエーションにおける制約が伴わざるを得ず、背景画
像を含むページの見易い表現を困難にしていた。
ァイルサイズが小さいという利点を持つ一方で、表現の
バリエーションにおける制約が伴わざるを得ず、背景画
像を含むページの見易い表現を困難にしていた。
【０００７】本発明は、背景画像とメイン画像を重ねて
表示させた場合でもその両者を見易く表示させる表現方
法を、マークアップ言語の文法の枠内における工夫によ
って実現することを目的とする。また、背景画像の任意
の位置を半透過させ、画像表現に深みを与える技術を提
供することを目的とする。
表示させた場合でもその両者を見易く表示させる表現方
法を、マークアップ言語の文法の枠内における工夫によ
って実現することを目的とする。また、背景画像の任意
の位置を半透過させ、画像表現に深みを与える技術を提
供することを目的とする。
【０００８】なお、本明細書において「画像」というと
きは、データの形式（イメージ、テキスト）を問わず、
ブラウザ上で視覚的に表示されるものすべて（色、絵、
線図、記号、文字など）をいうものとする。
きは、データの形式（イメージ、テキスト）を問わず、
ブラウザ上で視覚的に表示されるものすべて（色、絵、
線図、記号、文字など）をいうものとする。
【０００９】
【課題を解決するための手段】上記目的を達成するた
め、本発明は、背景画像および背景画像上に配置される
メイン画像を含むページを、マークアップ言語を用いて
表現する方法であって、前記背景画像上に、透過色部分
と不透過色部分とが混交した混交画像を配置するととも
に、当該混交画像上に前記メイン画像を配置することを
特徴とする。
め、本発明は、背景画像および背景画像上に配置される
メイン画像を含むページを、マークアップ言語を用いて
表現する方法であって、前記背景画像上に、透過色部分
と不透過色部分とが混交した混交画像を配置するととも
に、当該混交画像上に前記メイン画像を配置することを
特徴とする。
【００１０】上記方法において、前記混交画像における
透過色部分と不透過色部分との混交状態は、前記背景画
像または前記メイン画像の少なくとも一方における構成
模様より細かいことが望ましい。
透過色部分と不透過色部分との混交状態は、前記背景画
像または前記メイン画像の少なくとも一方における構成
模様より細かいことが望ましい。
【００１１】また、上記方法において、前記混交画像を
構成する各画素につき、隣接する画素のうち少なくとも
１つは異なる色の画素であることが望ましい。
構成する各画素につき、隣接する画素のうち少なくとも
１つは異なる色の画素であることが望ましい。
【００１２】また、上記方法において、前記混交画像の
ファイルサイズは、１ｋＢ以下であることが望ましい。
ファイルサイズは、１ｋＢ以下であることが望ましい。
【００１３】また、上記方法において、前記不透過色の
うち少なくとも一色は、前記背景画像の構成色のうち少
なくとも一色と色相及び明度の両者が近い色であり、か
つ、前記不透過色のうち少なくとも一色は、前記メイン
画像の構成色のうち少なくとも一色と色相又は明度の何
れかが遠い色であることが望ましい。
うち少なくとも一色は、前記背景画像の構成色のうち少
なくとも一色と色相及び明度の両者が近い色であり、か
つ、前記不透過色のうち少なくとも一色は、前記メイン
画像の構成色のうち少なくとも一色と色相又は明度の何
れかが遠い色であることが望ましい。
【００１４】また、上記方法において、前記混交画像
は、ＨＴＭＬにおけるテーブルの背景画像として配置さ
れることとしてもよい。
は、ＨＴＭＬにおけるテーブルの背景画像として配置さ
れることとしてもよい。
【００１５】また、上記方法において、前記混交画像
は、ＨＴＭＬにおけるレイヤーの背景画像として配置さ
れることとしてもよい。
は、ＨＴＭＬにおけるレイヤーの背景画像として配置さ
れることとしてもよい。
【００１６】本発明のサーバは、上記の方法を用いて表
現されるページをクライアント上のブラウザに提供する
ものである。
現されるページをクライアント上のブラウザに提供する
ものである。
【００１７】
【発明の実施の形態】次に、図面を参照しながら本発明
の実施の形態を説明する。
の実施の形態を説明する。
【００１８】（１．第１の実施形態）図５は、本発明の
第１の実施形態の方法により背景画像を表示するための
ＨＴＭＬによるソースコードを示す図であり、図６はこ
の実施形態の表示方法の原理を説明する図である。
第１の実施形態の方法により背景画像を表示するための
ＨＴＭＬによるソースコードを示す図であり、図６はこ
の実施形態の表示方法の原理を説明する図である。
【００１９】（１−１．原理の概要）図６に示されるよ
うに、この実施形態の方法では、背景画像の上に不透過
色と透過色とが混交した画像を重ね、更にその上にメイ
ン画像であるテキストの表示を重ねて配置している。不
透過色と透過色とが混交した画像のうち不透過色の部分
は、背景画像を透過しないので、テキストと背景画像と
が近い色であっても、テキストとそれ以外の部分とを明
瞭に区別することができ、テキストの判読を容易にす
る。一方、不透過色と透過色とが混交した画像のうち透
過色の部分は、背景画像を透過するので、テキストの間
を通して背景画像を見ることができる。
うに、この実施形態の方法では、背景画像の上に不透過
色と透過色とが混交した画像を重ね、更にその上にメイ
ン画像であるテキストの表示を重ねて配置している。不
透過色と透過色とが混交した画像のうち不透過色の部分
は、背景画像を透過しないので、テキストと背景画像と
が近い色であっても、テキストとそれ以外の部分とを明
瞭に区別することができ、テキストの判読を容易にす
る。一方、不透過色と透過色とが混交した画像のうち透
過色の部分は、背景画像を透過するので、テキストの間
を通して背景画像を見ることができる。
【００２０】（１−２．ソースコードの説明）図５の大
枠内に、ソースコードが示されている。「< >」で囲ま
れた部分は「タグ」と呼ばれ、ブラウザ上ではテキスト
として表示されない部分である。便宜的に、図５の大枠
の左側に、行番号が示されている。なお、このソースコ
ードは、ブラウザを備えたクライアント端末の記憶装置
内に格納されているか、電子的ネットワークを介して接
続されたサーバ装置内に格納されており、これをブラウ
ザによって閲覧することにより、所定の画面を表示させ
ることができる。
枠内に、ソースコードが示されている。「< >」で囲ま
れた部分は「タグ」と呼ばれ、ブラウザ上ではテキスト
として表示されない部分である。便宜的に、図５の大枠
の左側に、行番号が示されている。なお、このソースコ
ードは、ブラウザを備えたクライアント端末の記憶装置
内に格納されているか、電子的ネットワークを介して接
続されたサーバ装置内に格納されており、これをブラウ
ザによって閲覧することにより、所定の画面を表示させ
ることができる。
【００２１】第１〜４行は、「<HEAD>・・・</HEAD>」
で囲まれており、文書のヘッダ部分である。第５〜第２
１行は「<BODY・・・</BODY>」で囲まれており、本文の
部分である。第５行にあるように、この「BODY」には
「BACKGROUND="bg.gif"」という属性が指定されてい
る。このことは「bg.gif」というイメージファイルの内
容が背景画像となることを意味する。
で囲まれており、文書のヘッダ部分である。第５〜第２
１行は「<BODY・・・</BODY>」で囲まれており、本文の
部分である。第５行にあるように、この「BODY」には
「BACKGROUND="bg.gif"」という属性が指定されてい
る。このことは「bg.gif」というイメージファイルの内
容が背景画像となることを意味する。
【００２２】第９〜１９行は「<TABLE・・・</TABLE>」
で囲まれており、この範囲はテーブルである。一般にテ
ーブルは、表組みを記述するものである。しかし、ここ
で用いるテーブルは、行の数（「<TR・・・</TR>」の
数）及び列の数（「<TD・・・</TD>」の数）ともに１つ
である。第９行にあるように、このテーブルには幅
（「WIDTH="75%"」：ページ全体の７５％）、高さ（「H
EIGHT="80%"」：ページ全体の８０％）などが指定され
ており、ページ内における表組みの表示位置が指定され
ている。この例ではページ全体に対する比率で指定して
いるので、ブラウザのウィンドウサイズを拡大縮小する
ことにより、テーブルの大きさも変化する。
で囲まれており、この範囲はテーブルである。一般にテ
ーブルは、表組みを記述するものである。しかし、ここ
で用いるテーブルは、行の数（「<TR・・・</TR>」の
数）及び列の数（「<TD・・・</TD>」の数）ともに１つ
である。第９行にあるように、このテーブルには幅
（「WIDTH="75%"」：ページ全体の７５％）、高さ（「H
EIGHT="80%"」：ページ全体の８０％）などが指定され
ており、ページ内における表組みの表示位置が指定され
ている。この例ではページ全体に対する比率で指定して
いるので、ブラウザのウィンドウサイズを拡大縮小する
ことにより、テーブルの大きさも変化する。
【００２３】この表における唯一の欄である「<TD・・
・</TD>」では、第１１行にあるように「BACKGROUND="t
urquoise.gif"」と指定され、この欄内の背景画像とし
てイメージファイル「turquoise.gif」の内容が表示さ
れる。更に「<TD・・・</TD>」には、ブラウザ上で表示
されるテキストが記述されている。このテキストは、表
組みの中の上記欄内に記述されるので、テーブルの大き
さが変化した場合には、テキストの改行位置も変わる。
・</TD>」では、第１１行にあるように「BACKGROUND="t
urquoise.gif"」と指定され、この欄内の背景画像とし
てイメージファイル「turquoise.gif」の内容が表示さ
れる。更に「<TD・・・</TD>」には、ブラウザ上で表示
されるテキストが記述されている。このテキストは、表
組みの中の上記欄内に記述されるので、テーブルの大き
さが変化した場合には、テキストの改行位置も変わる。
【００２４】再度図６を参照して説明すると、背景画像
「bg.gif」は、ＨＴＭＬのBODYで背景画像として指定さ
れている。不透過/透過色の混交画像「turquoise.gif」
は、テーブルの欄内の背景画像として指定されている。
テキストは、この欄内のテキストとして記述されてい
る。
「bg.gif」は、ＨＴＭＬのBODYで背景画像として指定さ
れている。不透過/透過色の混交画像「turquoise.gif」
は、テーブルの欄内の背景画像として指定されている。
テキストは、この欄内のテキストとして記述されてい
る。
【００２５】（１−３．混交画像）混交画像における不
透過色と透過色との混交状態は、背景画像の構成模様よ
り細かいことが好ましい。これにより、混交画像を通し
て背景画像を見たときに、背景画像がより自然に見え
る。また、メイン画像の構成模様より細かいことが好ま
しい。これによりメイン画像をより明瞭に表示すること
ができる。特に、混交画像を構成する各画素は、隣接す
る画素のうち少なくとも１つは異なる色の画素であるこ
とが望ましい。すなわち、上下左右、右上、右下、左
上、左下に隣接する画素のすべてが同じ色となるよう
な、大きな色の塊は存在しないことが望ましい。
透過色と透過色との混交状態は、背景画像の構成模様よ
り細かいことが好ましい。これにより、混交画像を通し
て背景画像を見たときに、背景画像がより自然に見え
る。また、メイン画像の構成模様より細かいことが好ま
しい。これによりメイン画像をより明瞭に表示すること
ができる。特に、混交画像を構成する各画素は、隣接す
る画素のうち少なくとも１つは異なる色の画素であるこ
とが望ましい。すなわち、上下左右、右上、右下、左
上、左下に隣接する画素のすべてが同じ色となるよう
な、大きな色の塊は存在しないことが望ましい。
【００２６】この実施形態の混交画像は、２ピクセル四
方を繰返し単位とした、市松模様をなしている。そのた
め、混交画像のファイルサイズは極めて小さくて済む。
本発明における混交画像はこれに限らず、１ピクセル単
位の縦又は横のラインを、不透過色と透過色とで交互に
配置してもよいし、ランダム又はパターンをディザ表現
したものでも良い。
方を繰返し単位とした、市松模様をなしている。そのた
め、混交画像のファイルサイズは極めて小さくて済む。
本発明における混交画像はこれに限らず、１ピクセル単
位の縦又は横のラインを、不透過色と透過色とで交互に
配置してもよいし、ランダム又はパターンをディザ表現
したものでも良い。
【００２７】混交画像のファイルサイズは１ｋＢ（キロ
バイト）以下が好ましく、さらには２００バイト以下が
好ましい。本実施形態の混交画像は、１００バイト以下
である。なお、イメージファイルに格納された画像の大
きさが実際の背景の大きさに満たない場合には、当該背
景の範囲内でイメージファイルの内容が繰り返し表示さ
れるので、混交画像は繰返し単位またはその倍数に相当
する量のデータを備えていれば良い。
バイト）以下が好ましく、さらには２００バイト以下が
好ましい。本実施形態の混交画像は、１００バイト以下
である。なお、イメージファイルに格納された画像の大
きさが実際の背景の大きさに満たない場合には、当該背
景の範囲内でイメージファイルの内容が繰り返し表示さ
れるので、混交画像は繰返し単位またはその倍数に相当
する量のデータを備えていれば良い。
【００２８】混交画像における不透過色のうち少なくと
も一色は、背景画像の構成色のうち少なくとも一色と、
色相及び明度の両者が近い色であることが好ましい。こ
れにより、背景画像に混交画像を自然に溶け込ませ、違
和感のない画面を表現することができる。更に、混交画
像における不透過色のうち少なくとも一色は、メイン画
像の構成色のうち少なくとも一色と、色相又は明度の何
れかが遠い色であることが好ましい。これにより、背景
画像の如何に関わらずメイン画像が明瞭に表示されるよ
うにすることができる。
も一色は、背景画像の構成色のうち少なくとも一色と、
色相及び明度の両者が近い色であることが好ましい。こ
れにより、背景画像に混交画像を自然に溶け込ませ、違
和感のない画面を表現することができる。更に、混交画
像における不透過色のうち少なくとも一色は、メイン画
像の構成色のうち少なくとも一色と、色相又は明度の何
れかが遠い色であることが好ましい。これにより、背景
画像の如何に関わらずメイン画像が明瞭に表示されるよ
うにすることができる。
【００２９】（１−４．画面表示例）図３は、本発明の
第１の実施形態の方法により表示された画像の一例を示
す図である。図に示されるように、背景画像の一部とテ
キストとは、ほぼ同じ色であるが、テキストも明瞭に判
読できるし、背景画像も判別できる。更にはページ表現
に奥行き感が加わり、優れたデザインを可能にする。図
１及び図２と比較すればその違いは歴然である。更に観
察すると、背景画像の一部の色が薄くなっていることが
わかる。この例では混交画像の不透過色として白を用い
たため、背景画像を構成する画素が間引かれたのであ
る。
第１の実施形態の方法により表示された画像の一例を示
す図である。図に示されるように、背景画像の一部とテ
キストとは、ほぼ同じ色であるが、テキストも明瞭に判
読できるし、背景画像も判別できる。更にはページ表現
に奥行き感が加わり、優れたデザインを可能にする。図
１及び図２と比較すればその違いは歴然である。更に観
察すると、背景画像の一部の色が薄くなっていることが
わかる。この例では混交画像の不透過色として白を用い
たため、背景画像を構成する画素が間引かれたのであ
る。
【００３０】図４は、上記画像においてウィンドウのサ
イズないし形状を変更した場合の図である。ウィンドウ
の形状を変えたことにより、テーブルの大きさが変化
し、テキストの改行位置が変化したことが分かる。
イズないし形状を変更した場合の図である。ウィンドウ
の形状を変えたことにより、テーブルの大きさが変化
し、テキストの改行位置が変化したことが分かる。
【００３１】上述の実施例に対し、背景画像（「bg.gi
f」）に手を加えて背景画像の画素を一部間引くことに
より、テーブルを使わなくても図３と同様の画面を表現
することは可能である。しかし、その場合は画素を間引
いた部分が固定されているので、ウィンドウを拡大縮小
しても図４のように変化させることはできない。
f」）に手を加えて背景画像の画素を一部間引くことに
より、テーブルを使わなくても図３と同様の画面を表現
することは可能である。しかし、その場合は画素を間引
いた部分が固定されているので、ウィンドウを拡大縮小
しても図４のように変化させることはできない。
【００３２】（２．第２実施形態）図７は、本発明の第
２の実施形態の方法により背景画像を表示するための、
ＨＴＭＬによるソースコードを示す図であり、図８はこ
の実施形態の表示方法の原理を説明する図である。
２の実施形態の方法により背景画像を表示するための、
ＨＴＭＬによるソースコードを示す図であり、図８はこ
の実施形態の表示方法の原理を説明する図である。
【００３３】（２−１．ソースコードの説明）図７の第
１〜１３行は、「<HEAD>・・・</HEAD>」で囲まれてお
り、文書のヘッダ部分である。このヘッダ部分に、「la
yer1」と「layer2」の属性が定義されている。レイヤー
の属性としては、平面的な位置や大きさのほか、「z-in
dex」として上層／下層の関係も定義される。また、レ
イヤーの背景画像として、混交画像である「blue.gif」
や「yellow.gif」が指定されている。
１〜１３行は、「<HEAD>・・・</HEAD>」で囲まれてお
り、文書のヘッダ部分である。このヘッダ部分に、「la
yer1」と「layer2」の属性が定義されている。レイヤー
の属性としては、平面的な位置や大きさのほか、「z-in
dex」として上層／下層の関係も定義される。また、レ
イヤーの背景画像として、混交画像である「blue.gif」
や「yellow.gif」が指定されている。
【００３４】第１４〜３２行は「<BODY・・・</BODY>」
で囲まれており、本文の部分である。第１４行にあるよ
うに、この「BODY」では「bg.gif」というイメージファ
イルの内容が背景画像に指定されている。
で囲まれており、本文の部分である。第１４行にあるよ
うに、この「BODY」では「bg.gif」というイメージファ
イルの内容が背景画像に指定されている。
【００３５】第１６〜１９行の「<DIV ID="layer1">・
・・</DIV>」で、先の「layer1」が配置される。特にこ
のlayer1には、第１７〜１８行に示される第１のテキス
トが含まれている。
・・</DIV>」で、先の「layer1」が配置される。特にこ
のlayer1には、第１７〜１８行に示される第１のテキス
トが含まれている。
【００３６】第２０〜３１行の「<DIV ID="layer2">・
・・</DIV>」で、先の「layer2」が配置される。特にこ
のlayer2内には、更にテーブルが定義され、当該テーブ
ルの欄内の背景画像として、混交画像である「pink.gi
f」が指定されている（第２４行）。また、第２５〜２
８行に、第２のテキストが記述されている。
・・</DIV>」で、先の「layer2」が配置される。特にこ
のlayer2内には、更にテーブルが定義され、当該テーブ
ルの欄内の背景画像として、混交画像である「pink.gi
f」が指定されている（第２４行）。また、第２５〜２
８行に、第２のテキストが記述されている。
【００３７】（２−２．表示原理）上述の通り、この画
面は、背景画像と、layer1とlayer2とを備えている。背
景画像はＨＴＭＬのBODYで定義されている。Layer1では
混交画像「blue.gif」が定義されているほか、第１のテ
キストを有している。Layer2では混交画像「yellow.gi
f」が定義されているほか、テーブルを備え、そのテー
ブルに混交画像「pink.gif」と第２のテキストが定義さ
れている。
面は、背景画像と、layer1とlayer2とを備えている。背
景画像はＨＴＭＬのBODYで定義されている。Layer1では
混交画像「blue.gif」が定義されているほか、第１のテ
キストを有している。Layer2では混交画像「yellow.gi
f」が定義されているほか、テーブルを備え、そのテー
ブルに混交画像「pink.gif」と第２のテキストが定義さ
れている。
【００３８】このように、レイヤーを使えば混交画像を
複数重ねて配置することができ、ページデザインの自由
度が更に向上する。また、上記第１の実施形態と同様
に、ブラウザのウィンドウサイズを変更すれば混交画像
の大きさも変更される。
複数重ねて配置することができ、ページデザインの自由
度が更に向上する。また、上記第１の実施形態と同様
に、ブラウザのウィンドウサイズを変更すれば混交画像
の大きさも変更される。
【００３９】なお、上記各実施形態の説明において、イ
メージファイルとして「gif」という拡張子を持つＧＩ
Ｆ形式（Graphics Interchange Format）を例にとって
説明したが、これに限らず、例えばＰＮＧ形式（Portab
le Network Graphics Format）であっても良い。
メージファイルとして「gif」という拡張子を持つＧＩ
Ｆ形式（Graphics Interchange Format）を例にとって
説明したが、これに限らず、例えばＰＮＧ形式（Portab
le Network Graphics Format）であっても良い。
【００４０】
【発明の効果】以上説明したように、本発明によれば、
背景画像とメイン画像を重ねて表示させた場合でもその
両者を見易く表示させる表現方法を、マークアップ言語
の文法の枠内における工夫によって実現することが可能
となる。また、背景画像の任意の位置を半透過させ、画
像表現に深みを与える技術を提供することができる。
背景画像とメイン画像を重ねて表示させた場合でもその
両者を見易く表示させる表現方法を、マークアップ言語
の文法の枠内における工夫によって実現することが可能
となる。また、背景画像の任意の位置を半透過させ、画
像表現に深みを与える技術を提供することができる。
【図１】従来例による背景画像およびメイン画像の表示
例を示す図である。
例を示す図である。
【図２】従来例による背景画像およびメイン画像の表示
例を示す図である。
例を示す図である。
【図３】本発明の第１の実施形態の方法により表示され
た画像の一例を示す図である。
た画像の一例を示す図である。
【図４】上記画像においてウィンドウのサイズないし形
状を変更した場合の図である。
状を変更した場合の図である。
【図５】本発明の第１の実施形態の方法により背景画像
を表示するためのＨＴＭＬによるソースコードを示す図
である。
を表示するためのＨＴＭＬによるソースコードを示す図
である。
【図６】第１実施形態の表示方法の原理を説明する図で
ある。
ある。
【図７】本発明の第２の実施形態の方法により背景画像
を表示するための、ＨＴＭＬによるソースコードを示す
図である。
を表示するための、ＨＴＭＬによるソースコードを示す
図である。
【図８】第２実施形態の表示方法の原理を説明する図で
ある。
ある。
───────────────────────────────────────────────────── フロントページの続き Ｆターム(参考） 5B057 AA20 CA01 CA08 CA12 CA16 CB01 CB08 CB12 CB16 CE08 CE11 CE17 5C076 AA12 AA16 AA26 AA40 BA06 CA02 5C082 AA01 BA02 BA12 BA34 BA35 CA12 CA56 CB01 DA87 MM10 5E501 AA02 BA03 CA02
Claims (8)
- 【請求項１】 背景画像および背景画像上に配置される
メイン画像を含むページを、マークアップ言語を用いて
表現する方法であって、 前記背景画像上に、透過色部分と不透過色部分とが混交
した混交画像を配置するとともに、当該混交画像上に前
記メイン画像を配置することを特徴とする方法。 - 【請求項２】 請求項１において、 前記混交画像における透過色部分と不透過色部分との混
交状態は、前記背景画像または前記メイン画像の少なく
とも一方における構成模様より細かいことを特徴とする
方法。 - 【請求項３】 請求項１又は請求項２において、 前記混交画像を構成する各画素につき、隣接する画素の
うち少なくとも１つは異なる色の画素であることを特徴
とする方法。 - 【請求項４】 請求項１乃至請求項３の何れか一項にお
いて、 前記混交画像のファイルサイズは、１ｋＢ以下であるこ
とを特徴とする方法。 - 【請求項５】 請求項１乃至請求項４の何れか一項にお
いて、 前記不透過色のうち少なくとも一色は、前記背景画像の
構成色のうち少なくとも一色と色相及び明度の両者が近
い色であり、かつ、前記不透過色のうち少なくとも一色
は、前記メイン画像の構成色のうち少なくとも一色と色
相又は明度の何れかが遠い色であることを特徴とする方
法。 - 【請求項６】 請求項１乃至請求項５の何れか一項にお
いて、 前記混交画像は、ＨＴＭＬにおけるテーブルの背景画像
として配置されることを特徴とする方法。 - 【請求項７】 請求項１乃至請求項５の何れか一項にお
いて、 前記混交画像は、ＨＴＭＬにおけるレイヤーの背景画像
として配置されることを特徴とする方法。 - 【請求項８】 請求項１乃至請求項７の何れか一項に記
載の方法を用いて表現されるページをクライアント上の
ブラウザに提供するサーバ。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2000261782A JP2002077583A (ja) | 2000-08-30 | 2000-08-30 | マークアップ言語における背景画像の表現 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2000261782A JP2002077583A (ja) | 2000-08-30 | 2000-08-30 | マークアップ言語における背景画像の表現 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| JP2002077583A true JP2002077583A (ja) | 2002-03-15 |
Family
ID=18749568
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| JP2000261782A Pending JP2002077583A (ja) | 2000-08-30 | 2000-08-30 | マークアップ言語における背景画像の表現 |
Country Status (1)
| Country | Link |
|---|---|
| JP (1) | JP2002077583A (ja) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2009124749A (ja) * | 2003-10-10 | 2009-06-04 | Canon Inc | 処理装置及び処理方法 |
| JP2016092560A (ja) * | 2014-10-31 | 2016-05-23 | ブラザー工業株式会社 | 画像処理装置、および、コンピュータプログラム |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JPH10222338A (ja) * | 1997-02-03 | 1998-08-21 | Canon Inc | ウィンドウ表示制御装置、ウィンドウ表示制御方法、情報処置装置、情報処理方法および記憶媒体 |
| JPH1155687A (ja) * | 1997-08-08 | 1999-02-26 | Matsushita Electric Ind Co Ltd | 文字表示装置及び方法並びに文字表示プログラムを記録した記録媒体 |
| JPH11219242A (ja) * | 1998-02-02 | 1999-08-10 | Hitachi Ltd | ページ生成方法 |
| JP2000194476A (ja) * | 1998-12-28 | 2000-07-14 | Nec Corp | 重ね合わせ表示システムと重ね合わせ表示方法および重ね合わせ表示プログラムを記録した記録媒体 |
-
2000
- 2000-08-30 JP JP2000261782A patent/JP2002077583A/ja active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JPH10222338A (ja) * | 1997-02-03 | 1998-08-21 | Canon Inc | ウィンドウ表示制御装置、ウィンドウ表示制御方法、情報処置装置、情報処理方法および記憶媒体 |
| JPH1155687A (ja) * | 1997-08-08 | 1999-02-26 | Matsushita Electric Ind Co Ltd | 文字表示装置及び方法並びに文字表示プログラムを記録した記録媒体 |
| JPH11219242A (ja) * | 1998-02-02 | 1999-08-10 | Hitachi Ltd | ページ生成方法 |
| JP2000194476A (ja) * | 1998-12-28 | 2000-07-14 | Nec Corp | 重ね合わせ表示システムと重ね合わせ表示方法および重ね合わせ表示プログラムを記録した記録媒体 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2009124749A (ja) * | 2003-10-10 | 2009-06-04 | Canon Inc | 処理装置及び処理方法 |
| JP2016092560A (ja) * | 2014-10-31 | 2016-05-23 | ブラザー工業株式会社 | 画像処理装置、および、コンピュータプログラム |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Van Ham et al. | Beamtrees: Compact visualization of large hierarchies | |
| US6088708A (en) | System and method for creating an online table from a layout of objects | |
| US6434578B1 (en) | Generating instruction sequences using independently executable pane renderers | |
| JP4463215B2 (ja) | 立体化処理装置及び立体情報端末 | |
| US20100115439A1 (en) | Assigning screen designation codes to images | |
| CN102663126A (zh) | 一种在移动终端中显示网页的方法及装置 | |
| US20050086259A1 (en) | Viewing tabular data on small handheld displays and mobile phones | |
| RU2439676C2 (ru) | Передача символов в подпиксельном разрешении | |
| Rotard et al. | Tactile web browsing for blind people | |
| US7134083B1 (en) | Method and system for generating button and tab user interface control components within the context of a hypertext markup language (HTML) based web page | |
| EP1695292A1 (en) | System and method for custom color design | |
| CN105956133B (zh) | 智能终端上显示文件的方法及装置 | |
| CN104424174B (zh) | 文档处理系统和文档处理方法 | |
| JP2002077583A (ja) | マークアップ言語における背景画像の表現 | |
| US8988423B2 (en) | Electronic album generating apparatus, stereoscopic image pasting apparatus, and methods and programs for controlling operation of same | |
| JP5538159B2 (ja) | ページ数決定装置、ページ数決定方法、ページ数決定プログラム、及びコンピュータ読み取り可能な記録媒体 | |
| CN106488314A (zh) | 一种弹幕渲染方法 | |
| Quinn et al. | Readability of scanned books in digital libraries | |
| JP2020160600A (ja) | 配色診断装置、配色診断方法、及び、プログラム | |
| JP3813499B2 (ja) | 出力処理方法、出力処理装置、出力処理プログラム、および出力処理プログラムを記録した記録媒体 | |
| CN100388268C (zh) | 显示装置和显示方法 | |
| Chigona et al. | Contextualized text explanations for visualizations | |
| CN206193949U (zh) | 一种裸眼3d演示文档制作系统 | |
| Shah | Scalable Vector Graphics | |
| Bullard et al. | Producing web pages for assessment |