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;
}


トラックバックURL

コメントする

名前:
URL:
  情報を記憶: 評価:  顔   星
 
 
 
Profile
しぇんしぇい
西野流呼吸法とソシアルダンスと海外ミステリをこよなく愛しているおいさんの Diaryです。
記事検索
過去記事
Recent Comments
訪問者数

    天気情報
    Google Sitemaps用XML自動生成ツール
    livedoor Readerに登録
    RSS
    livedoor Blog(ブログ)