人気ブログランキング | 話題のタグを見る
CSSでなんちゃってロールオーバー
ロールボタンというのがある、リンクにマウスポイントを乗せると画像が変わる。

リンクがわかりやすくていいのだが、なかなか面倒くさい。

そこでCSSの透過を使って、画像1枚で同様の効果をだしてみた。

ソースがシンプルで、動きも速いのではなかろうか。

サンプルはhttp://8pweb.com/ucar/css-sample.htmlである。

HERD部分に

<style media="screen" type="text/css">
<!--
.menulink{
text-align:center;
position: relative;
}

.menulink a .menuimg{
filter: alpha(style=0, opacity=50);
opacity:0.5;
}

.menulink a.menuitem:hover .menuimg{
filter: alpha(style=0, opacity=100);
opacity:1.0;
}
-->
</style>

として、リンク部分は、
<div class="menulink">
<a href="#" class="menuitem">
<img src="uimgs/csssam1.jpg" class="menuimg" border="0" width="120" height="40" alt="cssサンプル">
</a>
</div>

である


テーブルで背景を黒くした画像もやってみた。
<table border="0"><tr><td bgcolor="#000000" width="120" height="40" class="menulink">
<a href="#" class="menuitem">
<img src="uimgs/csssam2.jpg" class="menuimg" border="0" width="120" height="40" alt="cssサンプル">
</a>
</td></tr></table>

by digressive | 2009-11-18 02:59 | 熟年マカー失業録 | Comments(2)
Commented by かえる at 2009-11-20 12:09 x
たしかに、速いっす!
Commented by goedkope n at 2014-06-07 07:06 x
of the fact that we turned "39" yet once again, this year, our skin begs to differ.
<< カミングアウト 変換プラグフェチ 最新のSEO技術に対応したホー... >>




フリーページあります。

non6 museum

non6 tools

non6 memo



人間は、考える足である。
by ラーメン
S M T W T F S
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
カテゴリ
全体
熟年マカー失業録
DTPに花束を
すみません、取り乱しました。
マカーはケチだから
Ubuntu
プアオーディオ
ペンタブしよう
non6 nuseum
リンク
_f0021035_17382547.gif



ホームページ作成
WEBデザイン(Perl PHP MySQL)
グラフィックデザイン
CI 各種印刷物 広告 SP
はじめました。



NON6 MUSEUM ANEX


■□■□■□




RandomReading《読書記録》
通勤電車が私の書斎さ。
■□■□■□





WEBカラーネーム

WEBカラーチャート

植草一秀の『知られざる真実』
頑張れミラーマン

世に倦む日々
無料版です

天木直人.com
多少偏向していそうだが、
文春よりは参考になる


きっこのブログ
謎のブログ、リンクしていいのかな?

とりまきメモ
ブログというより、日記帳ですね。

LINK MEMO
小生の勝手なリンク集

pixiv

お気に入りブログ
世に倦む日日
絵と音楽のコラボレーショ...
ライフログ
検索
タグ
ブログパーツ
  • 仕様の関係で、右クリックできません。