負けてたまるか。

脳トレ、プログラミング、PHP、WEB製作などのメモ

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--.--.-- --:-- | スポンサー広告 | トラックバック(-) | コメント(-) | Edit
サムネイル表示の画像にマウスカーソルを合わせると、左に大きな画像を表示します。

また、枠線(ボーダー)の色、画像の上の文字がそれぞれ変化します。




ソース

<script type="text/javascript"><!--

myImage = ["main2.jpg","main3.jpg","main4.jpg"]; // 画像
yoso = myImage.length; // 画像の要素数

document.write("<div id='result'>マウスを乗せると…</div>"); // id名「result」
document.write("<img src="+myImage[0]+" width=150 height=180 id=pic>"); //id名「pic」

for(i=0; i<yoso; i++) // 0~要素数だけ繰り返し。
{
document.write("<img src='"+myImage[i]+"' width=80 height=100 onmousemove='func(this)'>"); // 画像を表示。マウスカーソルが上に乗ったらfunc関数を実行。引数はコレ(イメージオブジェクト)。
}

function func(obj) // func関数。引数を受け取ってopjに代入。
{
document.getElementById("result").innerHTML=obj; // id名resultにobjを記述。
document.getElementById("pic").src=obj.src; // id名「pic」の画像ソースをobjの画像ソースに書き換える。
document.getElementById("pic").style.border="4px solid red"; // id名「pic」の枠線(ボーダー)を変更。
}

// --></script>


解説

表示したい場所にスクリプトを記述します。



myImage = [要素1, 要素2, 要素3]

配列を表します。



myImage.length

画像の要素数を取り出します。



onmousemove = 'func(this)'

マウスカーソルが上に乗ったら、func関数を実行します。引数はthisです。



function func(obj)

func関数です。引数受け取り、objに代入します。



document.getElementById("ID名")

ID名を参照します。



document.getElementById("ID名").innerHTML=処理

ID名のHTML内を書き換えます。



document.getElementById("ID名").src

ID名のソースを参照します。



document.getElementById("ID名").style.border = "スタイルシート"

ID名の枠線(ボーダー)を指定します。



緑色の文字は、必要に応じて書き換えてください。
スポンサーサイト
X座標とY座標

document.オブジェクト名.style.left = X座標 … 画像のX座標を指定
document.オブジェクト名.style.top = Y座標 … 画像のY座標を指定


オブジェクト名

オブジェクト名 … オブジェクト名を指定すると、オブジェクトの色やサイズなどの状態を変更できます。

name属性でオブジェクト名を指定
document.namezokusei.style.top = X座標

参照番号(ページ先頭からの画像数)でオブジェクト名を指定
document.images[0].style.top = X座標

画像名でオブジェクト名を指定
document.images["namezokusei"].style.top = X座標


ソース

<script type="text/javascript"><!--x = 0;v = 3;function kansu() {        x += v;        // x = x + v; xにvをどんどん足していく        if(x>400 || x<0){        // もしx座標が400を超えたら。又はx座標が0未満になったら。                        v = -v;                // 右までいったら左に反転、左までいったら右に反転させる                }document.enen.style.left = x;// オブジェクト名enenのX座標を指定}setInterval('kansu()',20);// 0.02秒毎にkansu()を実行// --></script><img src="main3.jpg" name="enen" style="position:relative; left:0; top:0;">// 画像(main3.jpg)を表示
式1 || 式2 … もし式1だったら。または式2だったら処理を実行。
v = -v … 右までいったら左に反転、左までいったら右に反転。

document.オブジェクト名.style.left … オブジェクト名のX座標を指定。
setInterval() … 一定毎に処理を実行。

name … オブジェクト名を指定

position:relative … 画像の位置(相対指定)
potision:absolute … 画像を位置(絶対指定)
left:0 … X座標を0に指定
top:0 … Y座標を0に指定



サンプル

ボタンをクリックで画像が左右に移動します。





追記:ブログにアップしたら動かなくなっちゃいました。なんでだろ・・。
| ホーム |

カレンダー

08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

最近の記事

月別アーカイブ

タグリスト

ブログ内検索

カテゴリー

RSSフィード

リンク

ブロとも申請フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。