HTMLでアイコン表示？

質問

HTMLには素人です。
通常、Webサイトに　testABC.xls　という名のファイルをおき、ダウンロードさせるには、

<a href="testABC.xls">testABCダウンロード</a>

と書くと思います。
こでで画面に「testABC.xlsダウンロード」という文字が表示され、クリックしてダウンロードできます。

しかし、あるサイトでは、「testABC.xlsダウンロード」という文字の変わりに、エクセルのアイコンが表示され、その下に小さくファイル名、testABC.xlsが表示されていました。
ソースを見ると、

<A HREF="/yyy.nsf/xxxxx/zzz/$FILE/testABC.xls"><IMG SRC="/yyy.nsf//xxxxx/zzz/Body/0.137C?OpenElement&FieldElemFormat=gif" WIDTH=155 HEIGHT=48 BORDER=0></A>

となっていました。
ためしに、右クリックして「名前をつけて画像を保存」をやったら、0.gifという名前のgifファイルが保存されました。
これは、あらかじめファイル名を付したアイコンをGif画像で作成してサイト上においているのでしょうか？
それとも何らかのワザなのでしょうか？ご教示くださいませ。

回答No.1

namiri_e · ベストアンサー

＞あらかじめファイル名を付したアイコンをGif画像で作成してサイト上においているのでしょうか？

その通りです。

<a>～</a>タグではさんだ部分がクリックしてリンクする部分になりますが、そこはテキストだけでなく、<img>タグにより画像にすることも出来ます。

通常は<img src="●●●.gif">などとして画像を指定します。

このサイトの場合「0.137C?OpenElement&FieldElemFormat=gif」というのは、HTMLとは別の何らかのプログラムを介してアクティブに画像を表示させているようです。（言わばここは“何らかのワザ”といえますね。）

ちなみに、保存したときに0.gifとなったのは、0.137C…という部分の最初のピリオドをファイル名と拡張子の区切りと認識したからですね。

お礼

ありがとうございます。
OpenElement&FieldElemFormat=gifと書き加えればそうなるのかと思いましたが甘かったです。

>HTMLとは別の何らかのプログラムを介してアクティブに画像を表示させているようです

やっぱりそうですよね。それぞれのファイル名入りの画像を一つずつ作成したのでは手間がかかりすぎますから。

回答No.2

noname#96725

こんにちは。
それは画像ファイルをウェブ上の自分のHPフォルダの中に置いて、それを参照しているものです。実際に良く使われている方法です。

これをご自分のHPに応用させるには；
アイコン画像を置いた場所を例えばpartsフォルダの中のgazouフォルダの中で、画像名をicon.gifだったとして、そのアイコンを表示させたいHTMLファイルがFフォルダの中にあったとすれば、partsフォルダとFフォルダが同じ階層にある事を前提とすれば、表記は以下のようになります。

<a href="リンクさせたいファイルを置いているパス/リンクさせたいファイル名+拡張子"><img src="../parts/gazou/icon.gif" width="30" height="25" border="0" alt="エクセルへ"></a>

アイコン画像はダウンロードするなり自分で作るなりして上の例のようにHP内の適当なフォルダに入れて置かなければなりません。

ご質問とは直接関係はありませんが、その元画像を作るならば画像ソフトを使って100ピクセル角くらいの大きさに作っておいて、それを上の例のように例えば30ピクセルなどと数字を記入して縮小表示した方がきれいです。幅及び高さの数値は実際に結果を見ながらその場に相応しいように微妙に調節したほうが良いでしょう。なお、alt="エクセルへ"を入れるとそのアイコンをポイントした時に「エクセルへ」と文字が現れますから閲覧者が迷わずに済みます。もっともご質問の文中にあったようにそれを文章として明示的に記入すれば（例えば<p></p>の間に書けば）もっと迷わずに済みますけど。

お礼

有難うございます。
わたしの考えが甘かったようです。