|
HOME > 画像の変化 > 画像が小さくなる |
|
画像が小さくなる
|
|
|
|
|
|
|
|
|
|
|
|
オンマウスで画像が少し小さくなります。 |
|
|
HTMLに少し加えるだけで手軽に、画像にアクセントを加えることができます。 |
|
|
|
|
オンマウスで画像が少し小さくなるサンプル
|
|
|
|
|
※画像データはご自身でご用意ください。 |
|
|
|
|
設置方法 |
|
|
|
|
|
|
|
|
設置場所に以下をコピーして貼り付けて下さい。 |
|
|
|
|
 HTML記述例 |
|
|
|
|
|
|
|
|
<a href="#"><img src="img/1.jpg" style="width:120px;height:90px;" onmouseover="this.style.width='110px';this.style.height='83px';" onmouseout="this.style.width='120px';this.style.height='90px';"></a>
<a href="#"><img src="img/2.jpg" style="width:120px;height:90px;" onmouseover="this.style.width='110px';this.style.height='83px';" onmouseout="this.style.width='120px';this.style.height='90px';"></a>
<a href="#"><img src="img/3.jpg" style="width:120px;height:90px;" onmouseover="this.style.width='110px';this.style.height='83px';" onmouseout="this.style.width='120px';this.style.height='90px';"></a>
<a href="#"><img src="img/4.jpg" style="width:120px;height:90px;" onmouseover="this.style.width='110px';this.style.height='83px';" onmouseout="this.style.width='120px';this.style.height='90px';"></a>
|
|
縦90px、横120pxの画像がマウスが上に来ると縦83px、横110pxに縮小される設定に しています。 |
|
|
|
|
|
こちらでJavascriptを使った画像に変化を加えるサンプルを公開してます>> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
