2009年08月05日
画像の表示をOFFにしたら
ちょっと前まではインターネットは電話線だった。
だからデータのやりとりに時間がかかった。
Webのページはできるだけテキスト表示を心がけた。
観る方はブラウザで画像表示をOFFにすることもあった。
今はブロードバンドが普及し、
光ケーブルの時代だからデータの大きさは気にしなくなった。
とはいえ画像をOFFにすることもある。
CSSでテキストを飛ばして背景画像を表示することが流行った。
これだと画像をOFFにしたら何も表示されない。
それにリンクが貼ってあったら悲惨なことになる。
だからテキスト飛ばしはしないで画像は表示する。
画像のaltとリンクのtitleで画像OFF時のテキストの代替とする。
オンマウス(a:hover)時は上の画像を非表示にすると、
背景画像が表示される。
<p class="back"><a href="#" title="hogehoge"><img
src="hoge.png" width="88" height="31" alt="hogehoge" /></a></p>
p.back {
background-image: url(./hoge2.png);
background-repeat: no-repeat;
}
p.back a {
display: block;
width: 88px;
height: 31px;
}
p.back a:hover {
background-color: transparent;
}
p.back a:hover img {
visibility: hidden;
}
だからデータのやりとりに時間がかかった。
Webのページはできるだけテキスト表示を心がけた。
観る方はブラウザで画像表示をOFFにすることもあった。
今はブロードバンドが普及し、
光ケーブルの時代だからデータの大きさは気にしなくなった。
とはいえ画像をOFFにすることもある。
CSSでテキストを飛ばして背景画像を表示することが流行った。
これだと画像をOFFにしたら何も表示されない。
それにリンクが貼ってあったら悲惨なことになる。
だからテキスト飛ばしはしないで画像は表示する。
画像のaltとリンクのtitleで画像OFF時のテキストの代替とする。
オンマウス(a:hover)時は上の画像を非表示にすると、
背景画像が表示される。
<p class="back"><a href="#" title="hogehoge"><img
src="hoge.png" width="88" height="31" alt="hogehoge" /></a></p>
p.back {
background-image: url(./hoge2.png);
background-repeat: no-repeat;
}
p.back a {
display: block;
width: 88px;
height: 31px;
}
p.back a:hover {
background-color: transparent;
}
p.back a:hover img {
visibility: hidden;
}