|
HOME > 画像の変化 > 滑らかに半透明に変わる |
|
滑らかに半透明に変わる
|
|
|
|
|
|
|
|
|
|
|
|
画像がオンマウスで滑らかに半透明に変わります。 |
|
|
Javascriptを使って、画像を滑らかに半透明に変えています。 |
|
|
|
|
オンマウスで画像が滑らかに半透明に変わるサンプル
|
|
|
|
|
※画像データはご自身でご用意ください。 |
|
|
|
|
設置方法 |
|
|
|
|
|
|
|
|
jquery.js をこちらよりダウンロードして下さい。 |
|
|
rollover.js をこちらよりダウンロードして下さい。 |
|
|
ダウンロードしたJavascriptファイルを、jsとういう名前の フォルダを作成し、フォルダ内に保存して下さい。 |
|
|
|
|
|
|
|
|
|
|
 HTML記述例 |
|
|
|
|
<head>と</head>の間に下記を記述してください。 |
|
|
HTMLにJavascriptを読み込ませます。 |
|
|
|
|
<script src='js/jquery.js'></script>
<script src='js/rollover.js'></script>
|
|
|
|
|
|
|
|
HTML記述例 |
|
画像を挿入場所に設置し、以下の記述に書き換えて下さい。※例では画像はimgsフォルダに保存しています。 |
|
サンプルでは画像にリンクを付けていますが、リンクなしでも使用できます。 |
|
|
|
|
<a href="#"><img src='imgs/img1.jpg' class='overimg'
/></a>
<a href="#"><img src='imgs/img2.jpg' class='overimg'
/></a>
<a href="#"><img src='imgs/img3.jpg' class='overimg'
/></a>
<a href="#"><img src='imgs/img4.jpg' class='overimg'
/></a>
|
|
|
|
|
|
|
注意点 |
|
必ずスタイルシートに下記を加えて下さい。
リンクの画像の枠を消す指定です。 |
|
|
|
|
|
|
|
|
|
こちらでJavascriptを使った画像に変化を加えるサンプルを公開してます>> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
