HOME| HOME > 画像の変化 > 画像が少し動く | |||||||||||||||||||||||||
画像が少し動く |
|||||||||||||||||||||||||
| オンマウスで画像が少し動きます。 | |||||||||||||||||||||||||
| 下記のサンプルのようにボタンのアクセントでよく使われます。 | |||||||||||||||||||||||||
オンマウスで画像が少し動くサンプル |
|||||||||||||||||||||||||
|
|||||||||||||||||||||||||
| こちらのボタンは素材工房TAKEで無料配布しています>> | |||||||||||||||||||||||||
| 設置方法 | |||||||||||||||||||||||||
| <head>と</head>の間に下記をコピーして貼り付けて下さい。 | |||||||||||||||||||||||||
| 外部スタイルシートでも利用できます。 | |||||||||||||||||||||||||
 HTML記述例 |
|||||||||||||||||||||||||
<STYLE type="text/css"> <!-- a img:hover { position:relative; top:2px; /*下に2px動く*/ left:2px; /*右に2px動く*/ } --> </STYLE> |
|||||||||||||||||||||||||
| これで、画像にリンクを付ければ、OKです。 | |||||||||||||||||||||||||
| これだけだとリンクの付いた画像がすべて動いてしまうので、 | |||||||||||||||||||||||||
| 特定の画像だけを動かす場合は、スタイルシートで指定が必要です。 | |||||||||||||||||||||||||
| こちらでJavascriptを使った画像に変化を加えるサンプルを公開してます>> | |||||||||||||||||||||||||
|
|||||||||||||||||||||||||
|
|||||||||||||||||||||||||
|
 |
|
|||
|
 |
 |
||
