負けてたまるか。

脳トレ、プログラミング、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名の枠線(ボーダー)を指定します。



緑色の文字は、必要に応じて書き換えてください。
スポンサーサイト
| ホーム |

カレンダー

07 | 2017/08 | 09
- - 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 31 - -

最近の記事

月別アーカイブ

タグリスト

ブログ内検索

カテゴリー

RSSフィード

リンク

ブロとも申請フォーム

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