HOME| HOME > 画像の変化 > 画像が半透明になる | |||||||||||||||
画像が半透明になる |
|||||||||||||||
| オンマウスで画像が半透明に変わります。 | |||||||||||||||
| 簡単にページ内に変化を付けられるので、初心者でもすぐに導入できます。 | |||||||||||||||
オンマウスで半透明になる画像のサンプル |
|||||||||||||||
|
|||||||||||||||
| ※画像データはご自身でご用意ください。 | |||||||||||||||
| 設置方法 | |||||||||||||||
| 設置場所に以下をコピーして貼り付けて下さい。 | |||||||||||||||
 スタイルシート(CSS)記述例 |
|||||||||||||||
<STYLE type="text/css"> <!-- a img.css-hover{ opacity:1.0; filter: alpha(opacity=100); } a:hover img.css-hover{ opacity:0.6;/*半透明度60%に設定*/ filter: alpha(opacity=60);/*半透明度60%に設定*/ } a img{ border:none; } --> </STYLE> |
|||||||||||||||
| HTML記述例 |
|||||||||||||||
| 画像を挿入場所に設置し、以下の記述に書き換えて下さい。※例では画像はimgフォルダに保存しています。 | |||||||||||||||
<a href="#"><img src="img/1.jpg" alt="メリーゴーランド" class="css-hover" ></a> <a href="#"><img src="img/2.jpg" alt="紅葉" class="css-hover" ></a> <a href="#"><img src="img/3.jpg" alt="ひまわり" class="css-hover" ></a> <a href="#"><img src="img/4.jpg" alt="ホテルのプール" class="css-hover" ></a> |
|||||||||||||||
| こちらでJavascriptを使った画像に変化を加えるサンプルを公開してます>> | |||||||||||||||
|
|||||||||||||||
|
|||||||||||||||
|
|
|
|||
|
 |
 |
||
