目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

JavaScript*文書を完全に読んだ後に関数を呼ぶ*

このエントリーをはてなブックマークに追加
Javascriptをあっちこっちに書き込むとソースも見た目に汚いので一か所に書きたい。
もしくはHTML内に記述したくない。

function msgShow(){
< script type="text/javascript" >
< !--
  var Imgs = document.getElementsByTagName( 'img' );  //イメージタグを取得

  function msg(){
    alert( 'マウスオーバー中' ); //アラート※関数
  }

  for( var i = 0 ; i < Imgs.length ; i++ ){  //イメージタグの数だけ繰り返す
    Imgs[i].onmouseover = msgShow; //イメージにマウスオーバーした時、アラート表示

    //※もしImgs[i].onmouseover = alert( 'マウスオーバー中' );と記述すると
    //mouseover時にアラートが表示されないので注意
}
-- >
< /script >
< body >
< img src="img1.jpg" >
< img src="img2.jpg" >
~省略~

すべてのイメージにマウスオーバーした時、アラート文を表示する関数ですが、htmlの文書をすべてロードした後でないと関数が動作しないので下記のように文書の終盤に関数を呼び出すかjavascript自体最後に記述してやるあります。

< img src="img1.jpg" >
< img src="img2.jpg" >
~省略~
< script type="text/javascript">
< !--
msgShow();
-- >
< /scrip >
< /body >
< /html >

どちらにしてもソースがきれいじゃないので、
個人的にはJavascriptはヘッダーに書くか外に出したいので…

< script type="text/javascript" >
< !--
function msgShow(){

  var Imgs = document.getElementsByTagName( 'img' ) ;

  function msg(){
    alert( 'マウスオーバー中' );
  }

  for( var i = 0;i < Imgs.length ; i++ ){
    Imgs[i].onmouseover = msgShow;
}

try{
  window.addEventListener( 'load' , msgShow , false );
}
  catch(e){ window.attachEvent( 'onload' , msgShow );
}


-- >
< /script >

と追記します。
window.addEventListener()を使って文書をロード('load')し終わった後、msgShowの関数を呼び出します。
ポイントはaddEventListenerメソッドが使えないIE(新しいのでは使えるかも)。try-catch文でaddEventListenerが使えない場合(false)同等のメソッドattachEventで切り替えます。
スポンサーサイト

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2012/07/16(月) 10:10:27|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0
<<JavaScript*ロールオーバー* | ホーム | JavaScript*知っておくと便利♪整数⇒少数*>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://gatoprateado.blog.fc2.com/tb.php/25-f9433b7f
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。