HOME > 開発者向けBLOG > Webデザイン >  visibilityで画像置換

Technology Note 開発者向けBLOG

Webデザイン

visibilityで画像置換

こんにちは、ゼノフィ渡部です。

CSSのvisibilityで画像を置換する方法をご紹介いたします。

通常時の画像をimgタグで表示し、ホバー時の画像を背景で表示、そしてホバー時は不要なimgの画像を非表示にします。

visibilityで画像を置換する際のメリットは、通常時の画像はimgタグで表示させるので、ブラウザの印刷プレビュー、ページ設定の「背景の色とイメージを印刷する」などの設定をせずとも印刷できる点にあります。

「p.btn a:hover」でpタグのa要素がホバー時、置換用の画像を表示させます。

1
2
3

p.btn a:hover {
  background: url(btn_on.gif) no-repeat; /* ホバー時のボタン画像を指定 */
}

「p.btn a:hover img 」でpタグのa要素がホバー時、htmlファイルに記述しているimg画像を「visibility: hidden;」で非表示にしています。

1
2
3

p.btn a:hover img {
  visibility: hidden; /* ホバー時にimg画像を非表示に */
}

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

p.btn img {
  border: 0; /* img画像の余分なボーダーを消去 */
}
 
p.btn a {
  display: block; /* aタグをブロック要素に */
  width: 113px;
  height: 43px;
}
 
p.btn a:hover {
  background: url(btn_on.gif) no-repeat; /* ホバー時のボタン画像を指定 */
}
 
p.btn a:hover img {
  visibility: hidden; /* ホバー時にimg画像を非表示に */
}

HTML

1
2
3
4
5

<p class="btn">
    <a href="#">
        <img src="btn_off.gif" width="113" height="43" alt="ボタン" />
    </a>
</p>

<

>

PAGETOP