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