HOME > 開発者向けBLOG > Webデザイン >  高さが違う画像置換

Technology Note 開発者向けBLOG

Webデザイン

高さが違う画像置換

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

高さが違う画像をhover時に表示する方法をご紹介いたします。

下記のような隣り合う、高さが違う画像を用意します。

高さが違う画像

a要素の背景で表示します。1行目の「ol.diff_navi li a」でa要素に対して通常時に表示させる画像の幅、高さが大きい方の画像のheightを指定し、「background: url(bg_diff_navi.gif) no-repeat;」で使用する画像を決めます。9行目の「background: url(bg_diff_navi.gif) no-repeat -100px;」でホバー時の画像と位置を指定しています。「-100px」はマウスがa要素にホバーした時、右にスライドして高さが大きい方の画像を表示させています。

1
2
3
4
5
6
7
8
9
10
ol.diff_navi li a {
  display: block;
  width: 100px;
  height: 34px; /* 高さが大きい方の画像のheightを指定 */
  background: url(bg_diff_navi.gif) no-repeat; /* 使用する画像を指定 */
}
 
ol.diff_navi li a:hover {
  background: url(bg_diff_navi.gif) no-repeat -100px; /* ホバー時の画像と位置を指定 */
}

ナビゲーション形式で記述しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ol class="diff_navi">
    <li>
        <a href="#">
            <span>
                ナビ1
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                ナビ2
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                ナビ3
            </span>
        </a>
    </li>
</ol>

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
ol.diff_navi {
  width: 400px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid #B7B7B7;
}
 
ol.diff_navi li {
  list-style-type: none;
  float: left;
  margin: 0 10px 0 0;
}
 
ol.diff_navi li a {
  display: block;
  width: 100px;
  height: 34px; /* 高さが大きい方の画像のheightを指定 */
  background: url(bg_diff_navi.gif) no-repeat; /* 使用する画像を指定 */
}
 
ol.diff_navi li a:hover {
  background: url(bg_diff_navi.gif) no-repeat -100px; /* ホバー時の画像と位置を指定 */
}
 
ol.diff_navi li a span {
  display: block;
  padding: 13px 0 0 0;
  font-size: 12px;
  text-align: center;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ol class="diff_navi">
    <li>
        <a href="#">
            <span>
                ナビ1
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                ナビ2
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                ナビ3
            </span>
        </a>
    </li>
</ol>

PAGETOP