action

web技

■上下に移動【html/css】
※画像にマウスオンすると画像が移動します。
※<img src"(画像の相対パス)" width="画像幅(px)" height="画像高(px)" border="画像枠幅(px)" style="position:relative;"(画像を相対位置で配置);>
※position属性をrelativeに設定するのがミソ。
※onmouseover/onmouseoutによりマウスが重なった(離れた)ときのtop属性を変更します。
※onmouseoverでのtop属性は、元の位置からの距離(px)で指定(上方向はマイナス、下方向はプラス)

-----次の行から(copy)-----
<img src="photo/001_s.JPG" width="133" height="100" border="0" style="position:relative;" onmouseover="this.style.top=-10" onmouseout="this.style.top=''">
-----上の行まで(copy)-----

■上下左右に移動【html/css】
※文字にマウスオンすると画像が移動します。
※<img src"(画像の相対パス)" id="画像ID" width="画像幅(px)" height="画像高(px)" border="画像枠幅(px)" style="position:relative;"(画像を相対位置で配置);>
※<br clear="all">でテキストの回り込みを解除([技g008]）
※文字にマウスオンしたときに画像が動くように、文字を<span></span>で囲み、その中にonmouseover/onmouseoutを記述します。
※onmouseover/onmouseoutによりマウスが重なった(離れた)ときのtop属性/left属性を変更します。
※onmouseoverで動かす画像を指定します。
　　onmouseｏｖｅｒ="IMG_5.style.top=．．．>（画像で設定したID
※onmouseoverでのtop属性/left属性は、元の位置からの距離(px)で指定
　　top属性(上方向はマイナス、下方向はプラス)
　　left属性(左方向はマイナス、右方向はプラス)

-----次の行から(copy)-----
<img src="photo/005_s.JPG" id="IMG_5" width="69" height="150" border="0" style="position:relative;"><br clear="all">
<span onmouseover="IMG_5.style.top=-30;IMG_5.style.left=-50;" onmouseout="IMG_5.style.top='';IMG_5.style.left='';"><u>上に30px/左に50px移動</u></span>　
-----上の行まで(copy)-----

解説等

◆画像や文字にマウスオンすると、画像が指定距離移動します。

◇style◇position◇relative

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----