画像の話
■画像を使うには？
■マウスを乗せたときに説明を出すには？
■マウスを乗せたときにカーソルを変えるには？
■画像のリンクの枠を消すには？
■マウスを乗せると変わる画像(簡易版)
■マウスを乗せると変わる画像(先読み版)
■リンクに触れると画像が変わる
■リンクの説明を出す(FORM)
■リンクの説明を出す(ステータス)
■画像のボタン(IE)
■画像のズームイン(IE)

■背景色にマッチしない素材は使わない
■素材は正しいサイズで使う
■素材を加工して使うときは

■UNISYS の LZW 特許・GIF を使うと料金がかかる？
■GIF 画像って配布するとユニシスの特許に触れるんですか？
■画像のタグ

IMG タグを使います。SRC=に続いて画像ファイルを指定してください。



<IMG src="images/hira.gif" width="42" height="55" alt="ひらおよぎ〜" border="0">

html の置いてある場所から見てひとつ下の images フォルダにある hira.gif を指定しています。
画像が html と同じフォルダにあるなら　src="hira.gif"　となります。
画像がひとつ上のフォルダにあるときは　src="../hira.gif"　となります。

width=(画像の幅・ピクセル)　height=(画像の高さ・ピクセル)です。
これを入れると画像の表示が速くなります。


■Top

IMG タグで ALT="説明文" と入れます。



<IMG src="images/hira.gif" width="42" height="55" alt="ひらおよぎ〜" border="0">

■Top

画像を使ったリンクにマウスを乗せるとカーソルの形を変えます。
CSS ver2 で規定された機能で、ie4 以降に有効です。(ns では普通のカーソルです)

<A HREF="#" STYLE="cursor:wait">(画像タグ)</A>

href="#" にはリンク先URLを入れてください。

wait の部分でマウスカーソルの形を指定しています。(wait とすると処理待ちの砂時計がでます)

　STYLE="cursor: help"

　STYLE="cursor: wait"

　STYLE="cursor: crosshair"

　STYLE="cursor: move"

　STYLE="cursor: nw-resize"


矢印で出るものに
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
があります。これは方位と同じと考えると簡単です。nw-(north-west=北西つまり斜め左上)などなど。

ほかに text,auto,default,pointer などがありますが、text 以外は変化なしかも。

ページ一括で指定するには？
スタイルシートでセットします。アンカータグの hover(マウスを乗せたとき)の属性を次のようにします

<STYLE type="text/css">
<!--
a:hover { cursor: help; }
-->
</STYLE>

■Top

IMG タグで BORDER=0 と入れます。

　border="0"　なし
　border="0"

<IMG src="images/hira.gif" width="42" height="55" alt="ひらおよぎ〜" border="0">

■Top

ポイント
画像の IMG タグに name= で適当な名前(半角英数)をつけておきます。
name= でつけた名称 pen1 と、スクリプトのなかの pen1 を合わせます。
OnMouseOut の画像はマウスが離れて元に戻す画像なので、オリジナルと同じものを指定します。

A HREF="#" の部分に実際のリンク先を入れてください。
複数使うときは重複しない name をつけてください。

マウスが乗ったとき(OnMouseOver) は OnMouseOver=img_over('画像につけた name ',画像の登録番号)
マウスが外れたとき(OnMouseOut) は OnMouseOut=img_out('画像につけた name ',画像の登録番号)
で変えることができます。

タグを書きやすいように Over と Out で別の関数を呼ぶようにして、渡す画像番号を一緒にしました。

■変える元画像
<IMG src="ch_a017.gif" width="32" height="32" border="0" name="chavo">
このように name で適当な名前をつます。

■戻る
<A HREF="#" OnMouseOver="document.chavo.src='ch_a034.gif'" OnMouseOut="document.chavo.src='ch_a017.gif'">[戻る]</A>　
■進む
<A HREF="#" OnMouseOver="document.chavo.src='ch_a035.gif'" OnMouseOut="document.chavo.src='ch_a017.gif'">[進む]</A>

ポイント
画像の IMG タグに name= で適当な名前(半角英数)をつけておきます。
name= でつけた名称 chavo と、スクリプトのなかの chavo を合わせます。
複数のリンクタグからでも、同じ chavo を指定することで画像を入れ替えることができます。

A HREF="#" の部分に実際のリンク先を入れてください。

マウスが離れたときは VALUE='' で空白にします。
テキスト窓の大きさは SIZE= で調整ください。

IE4〜 のタグに <BOTTUN> というタグがあります。これを使うと画像をボタンのようにできます。
しかしこれだとネットスケープではボタン中のリンクが有効になりません。
そこで両方でリンクとして使えるようにひねってみました。
ただしネットスケープでは普通の画像リンクになるだけで、ボタンには見えません。




<A HREF="web03d.htm">
<BUTTON onClick="window.location.href='web03e.htm'">
<IMG src="ch_a017.gif" width="32" height="32" border="0">
</BUTTON>
</A>

このように BUTTON タグをリンクのアンカーで囲います。するとネットスケープではアンカータグのみ有効になり、リンクとしての機能は保てます。

マウスをあてると画像がのびーる。ｉｅ４のみです。ネットスケープでは変化しません。

　　

<IMG src="ch_a017.gif" height="32" width="32" name="chavo3" onMouseOver="document.chavo3.height=64;document.chavo3.width=64" onMouseOut="document.chavo3.height=32;document.chavo3.width=32">

onMouseOut にはマウスが離れたときに戻すサイズを入れます。
クリックしたときにズームさせるなら、 OnMouseOver のかわりに onClick とします。

特に周囲がなめらかな画像(アンチエイリアシングのかかった画像)は、使用にあたり背景色とのマッチングが必要です。下のような例をたまに見かけますが、さて．．．

もうおわかりと思いますが、素材の周囲と背景色とがマッチせず非常にカッコわるいですね。
素材は背景とマッチしてはじめて演出効果がでます。ミスマッチで使うなら、むしろ使わないほうがはるかにすっきりします。見た目がおかしいということは、すなわちあなたのウェブがカッコ悪くなるということですので、使ってみて少しでも「変だな」と思った時は使うのを見合わせましょう。

無地や単純なパターンの素材は別として、素材はなるべくオリジナルのサイズで使いましょう。標準のときが最も奇麗に表示されます。タテヨコのサイズ指定が１ピクセルでも違うと微妙に崩れます。自分のウェブのワンポイントがどうも奇麗でないと思ったら、寸法指定が正しいかチェックしてみてください。

その素材の著作者が「加工可能」としている場合の話ですが、まず画像ツール上で「フルカラー」に増色しましょう。パソコンの画面発色数ももちろんフルカラー(24/32ビットカラー)にしておきます。そして加工が完了した最終段階で減色するようにしてください。

牛飼いウェブの素材を例にとれば、提供素材はファイルサイズを軽くするためにぎりぎりまで減色しカラーパレットを最適化しています。これを別のツールで加工すると、素材の種類やツールの性能によっては色合いがかなり落ちます。

それを最小限にとどめるためにいったんフルカラーまで増色させるわけですが、それでも GIF や JPG にしたときに汚くなったりファイルサイズが過大になったりする場合があります。それを調整してもうまくゆかないときはその加工ソフトの性能限界ですので、残念ですがそれ以上のものはできないということであきらめてください。

奇麗で軽い画像を効率よくつくるなら・・・やはり数万円クラスの加工ツールは必須と思います。

「イラストが自分のページで使えた、出せた」ということ自体に喜ぶあまり、その品質、みばえや配色とのマッチングまで配慮が及ばない。。というのはよくあることです。ウェブは「訪問してくれる人に気持ち良く」みていただいてこそ情報伝達もスムーズにゆき、価値があるもの。ミスマッチな素材なら無いほうがかえってすっきりしたりします。加工時の色落ちやくすみなどの品質劣化、周囲との違和感はないか、などなど。。。自分が訪問者になったつもりで冷静にチェックしてください。


■Top

一般にはあまり知られていませんが GIF 画像を読み出したり、GIF を制作するときに利用するプログラムの ほとんどは米国 Unisys 社の LZW という特許技術を利用しています。

この特許は GIF 画像の作成と表示の部分でも使われており、画像を表示したり加工するソフト(有償・無償問わず)をリリースするソフト制作者は 米国 Unisys 社の特許使用ライセンスを受けねばなりません。そしてこのライセンス料が高額なため、フリーソフトはほとんど全滅の状況です。

ウェブからダウンロードした画像を使うと問題があるのか？
これまではこのライセンスは、GIF を利用するソフトをつくるときに関わるもので、つくられた GIF を利用するときにはまったく無関係の ものでした。ところが UNISYS は 1999年2月に「ウェブサイト LZWライセンス」というオプションを発表しました。ライセンスを受けない ソフトで作った GIF をウェブで使うにライセンスが必要で、およそ５０万円を払えばどんな GIF 画像もウェブに置いてよいというものです。

ここで素朴な疑問が湧いてきます。フリー素材サイトなどで公開している GIF ファイルを使うことは問題がないのでしょうか？

この件に関しては UNISYS が日本語の説明を用意しています。
http://www.unisys.com/unisys/lzw/lzw-license_j.asp (別窓)

上記サイトより引用すると、
----------
ウェブサイトで、ライセンスのないソフトウェア開発者やサービスから上記に
記載された画像形式を受け取り 使用している場合、Unisys から LZW 特許を
使用するためのライセンスを取得しなければなりません。
----------
とあります。つまり[非ライセンスのソフトウェアで制作された画像]を利用する場合には (つまりそういう場合のみ)ライセンスをうけねばならない。と読めます。

本来 LZW特許は伸縮と展開のアルゴリズムに対する特許のためソフトウェアはそれにしばられることがあっても、 正規ライセンスを受けたソフトで制作された生産物であれば、その流通形態を規制することにまでは権利が及びません。

このあたりを明確にしたものがこちらで参照できます。(下記リンクの「GIF ライセンス論争」を参照)

http://cybiz.ne.jp/TidBITS-J/issues-j/TidBITS-jp-497.html#lnk3 (別窓)

どうやら、 CGI などを使ってウェブで利用される GIF を生成するシステムからライセンス料をとるために言い出したことのようです。

どのソフトで作った画像かわからないから大丈夫...ほとんどはそうです。が、試用版のなかには試用版の旨を GIF 画像内部のコメントエリアに記録するものがあります。少なくとも素材を配布するならば、正規ライセンスを 受けたソフトを使うべきでしょう。でないとダウンロードしたユーザーに迷惑がかかることにもなりかねません。


【追記】
GIF 画像って配布するとユニシスの特許に触れるんですか？

正規ライセンスを持つソフト、たとえばフォトショップで GIF 画像を作ってそれを配布するのは違法でしょうか？
これもまた違法という書き方をしたサイトがたまに、というか結構ありますが本当でしょうか？

いま GIF 画像はどんなところに使われているでしょう。ウェブとメールそれとソフトウェア？そんなことろです。 もしそれが違法というなら GIF は本質的に無価値ですね。ネットで使えるからここまで普及したのですから。

そもそもウェブサイトのコンテンツはサイトに置くだけで不特定多数への公開とみなされます。つまり画像を配ろうが配るまいがページを公開した瞬間からそれは不特定多数の第三者に対し二次利用に給することが可能な状態に置いたという解釈もできます。

すなわちこれが違法なら誰もそんな危険なシロモノは使いません。したがってソフトは売れず、ユニシスにも特許料は入りません。つまりユニシスの特許も無価値になってしまいます。自分で開発した技術を自分で抹殺する？せっかくお金になるのに？ ということで GIF が使われなくなると一番困るのはユニシスでしょう。

この点、なにか問題の本質がごちゃごちゃになっている気がします。
1) GIF画像のファイルサイズを圧縮する LZW技術はユニシスの特許である。
2) この技術を使うソフトウェアは、特許の利用許諾を受ける必要がある
3) 許諾を受けないソフトウェアは違法であり、それで制作された画像は利用できない

基本はこれだけ、じゃないんでしょうか。
LZW 特許はあくまでデータ処理のテクニックに関する特許です。だから作るときと見るときに使うソフトウェアにだけ関連する特許です。

ところで GIFのことは一時置いておいて、制作物を配布するという『行為』はユニシスの特許だと思いますか？
違いますよね。じゃあなんで配布するとダメという話が広がっているのでしょうか。本来がソフトウェアのアルゴリズムに関する特許なのになんでそれが配布という「行為」に関する許諾問題にすりかわるわけ？…だから本質がごっちゃになっているのではないかなと思うわけです。

ライセンスのないソフトウェアは特許を侵害しています。そうしたソフトで作られた画像と知りながら配布することは非ライセンスソフトの普及を促すことに通じるので『特許権の侵害の幇助』にあたる行為といえます。こういうケースであれば LZW 圧縮技術とはまた別の意味で違法性があるかもしれないといえるでしょう。

しかしながら適法なソフトウェアで作られた画像の配布行為まで違法というその根拠は？
おまけにとあるサイトでは個人のサイトで使うならいい等の説明まである？ダメですよ。それを違法というなら個人でも使えません。ネット上に公開しただけで「二次利用による意図しない再配布」が発生する可能性がありますから。 プロがクライアントのサイトを作るときは？これはあきらかに自分のサイトではないから特許侵害？

ところで何の特許侵害でしょうか。画像配布行為の特許ですか？そんなものは存在しませんが。。？
GIF だからダメ？　適法なソフトで作って適法なソフトで見るのに何か問題が？
ユニシス自身「米国 UNISYS 社の特許は、この GIF そのものに対するものではなく」と言ってますが。

とまあ、そのあたりが混乱かつナンセンスと思うゆえんです。

たとえば。。
http://www.unisys.com/unisys/lzw/lzwfaq_j.html
ここにユニシスの英語サイトの LZW ライセンスの和訳があります。
これを読んでもどこにも再配布はダメとは書いていないのです。

ただし、上記文書のなかで誤解を招きやすい表現として
『販売者・配給者がUnisysライセンス契約を取得している場合でも所期の目的を果たさないことがあります。たとえば、スタンドアロンソフトウェア用の典型的なUnisysライセンスは、複製・修正・再販・ネットワーク上のサーバーでの使用・インターネット／イントラネット／エクストラネットまたはウェブサイト操作への使用を許可しません。』

というのがあります。え？インターネットで使えないの？じゃあ再配布はやっぱりダメ？
いえいえ、文中に『スタンドアロンソフトウェア用の Unisysライセンスは』と明示してありますね？つまりこの場合は LZW アルゴリズムを対象のソフトが使用してよい という契約状態…あくまでソフト内部のアルゴリズムに対しての許諾の有効性について述べていることに注意…をさす意味なので、その許諾は (それ自体スタンドアロンつまり単独使用が前提のソフトに与えた許諾だから) コピーしたり再販したり、サーバーやネットワーク上など共有空間で使うことは認められていません、という意味です。←英語原文を読んだわけではありません。公式和訳を見ての見解です。

とある個人専用向けソフトウェア−正規ライセンス済み−を買って、サーバーに置いてみんなで使うのはダメよ、とまあその程度の意味ではないでしょうか。ソフトを使用して得られた著作物に関しての記述ではないのです。


思うところあって個人的に GIF を使わない、というのはもちろん自由だし否定しませんが、 配布は違法といいきってしまうのはちょっと無理があると思います。少なくとも ライセンスを受けたソフトで制作された著作物を第三者に公開してはダメ、という明確な判断を示した公式な資料は現時点では見当たらないのです。もしご存知でしたら教えてください。

もしユニシスが自社特許の及ばない範囲にまで利権を主張し、そしてそれが認められたとしたなら、おそらくそれは世界から GIF が消える日かつ画像の著作権の扱いに新解釈が加えられる日となるのではないでしょうか。

あ、誤解のないよう申し添えますが、私は特段 GIF の擁護者ではありません。
GIF=配布もＮＯ という話が結構ある割にその情報の根拠が明確ではないので...たとえばユニシスのこの公式文書のこの記述がその根拠だ、実例はこれこれだ、というようなレポートが一切ないので真偽の判断がつかないのです。 もしかしてそれはキモだめしの最中に自分の影におびえているようなものなんじゃ？ と思っているわけでして、GIF がダメになったらそのときはそのときであわてず騒がず別のフォーマットに移行するだけの話です。

■Top

画像の表示には<IMG> タグを使います。よく使うものには次のようなオプションがあります。
(クリッカブルマップなどのタグは省いています)