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

準備中

スポンサーサイト

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

JavaScript*ロールオーバー*

このエントリーをはてなブックマークに追加
ロールオーバーについて。
リンクが貼ってある画像・ボタンなんかにカーソルを当てた時画像が切り変わったりするアレです。

↓以前はこんな書き方してました↓

< script type="text/javascript" >
< !--
function rollOver( imgname , file ){
document.images[imgname].src = file ;
}
-- >
< /script>
< /head >
< body >
~省略~
< a href="next.html" onmouseover="rollOver('nextpage','img1_on.jpg')" onmouseout="rollOver('nextpage','img1.jpg')" >< img src="img1.jpg" id="nextpage" >

この書き方だとロールオーバーする画像が多ければ多いほど記述が面倒な上、htmlが汚く見えます。

そこで、前回書いたJavaScript*文書を完全に読んだ後に関数を呼ぶ*を利用してみます。

!コピペする場合スぺース注意!
< script type="text/javascript" >
< !--
function rollOver(){
  var Imgs = document.getElementsByTagName('img') ; //すべてのイメージタグを取得
  var iSrc; // イメージのファイルのパスを収納
    for(var i = 0;i < Imgs.length ; i++){ //イメージ数だけ繰り返す
    if(Imgs[i].className == "rOver" ){ //イメージのクラス名がrOverの場合
      iSrc = Imgs[i].getAttribute( 'src' ) ; //イメージのファイルのパスを取得
      fType = iSrc.substring(iSrc.lastIndexOf( '.' ) , iSrc.length ) ; //.以降画像の拡張子取得
      cSrc = iSrc.replace( fType , '_on' + fType ); //イメージのファイルのパスを変更

      Imgs[i].setAttribute( 'cSrc' , cSrc ) ; //マウスオーバー時のイメージ

      Imgs[i].onmouseover = function(){  //マウスオーバー時、イメージを切り替える
      iSrc = this.getAttribute( 'src' ) ;
        this.setAttribute( 'src' , this.getAttribute( 'cSrc' )) ;
      }
      Imgs[i].onmouseout = function(){  //マウスアウトした時イメージを元に戻す
      if(!iSrc)iSrc = this.getAttribute('src').replace('_on'+fType,fType) ;
        this.setAttribute('src',iSrc) ;
      }
    }
  }
}
try{
  window.addEventListener('load',rollOver,false) ;
}
  catch(e){window.attachEvent('onload',rollover) ;
}
-->
< /script >

これをヘッダーに入れるだけで、class名をrOverにした画像はすべてロールオーバーします。

今後はもっとかっこいい動きをするソースを紹介できればと思います(^-^)/
スポンサーサイト

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

  1. 2012/07/16(月) 16:02:40|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:1
<<環境づくりまとめ1*Windows8アプリを作ろう* | ホーム | JavaScript*文書を完全に読んだ後に関数を呼ぶ*>>

コメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  1. 2012/09/07(金) 18:00:19 |
  2. |
  3. #
  4. [ 編集 ]

コメントの投稿


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

トラックバック

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