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

準備中

スポンサーサイト

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

マウスオーバーした個所の座標を取得*Javascript*

このエントリーをはてなブックマークに追加
クリックした個所の座標を取得するサンプルを作りました。

が、本来はマウスについて回るサンプルを作りたかったので改造してみました。
前の課題だったIE7以上はクリア。
もちろんfirefox、chrome確認済み。ただし、前みたいに決められたエリア内の情報を取得するわけではなくBody内の座標を限りなく取得します…。
そこのところ注意です。
スポンサーサイト

続きを読む>>

  1. 2013/01/06(日) 12:55:33|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

クリックした個所の位置を表示*Javascript*

このエントリーをはてなブックマークに追加
getBoundingClientRect()を使えば簡単にウィンドウ座標内での要素情報を取得することができます。
ただし、IE8以前では使用できません…。

また、ほかのやり方を考えておきます。また宿題が増えた…。

Javascript

head内に書くか、外部に置けるよう、window.onload = function(){~という形にしてあります。

サンプルを見る

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

  1. 2013/01/06(日) 10:38:33|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

サイズを取得後、中央に表示*Javascript*

このエントリーをはてなブックマークに追加
前回、まとめてポップアップウィンドウを作るでポップアップの出現場所をオートで表示させる設定について後程書きます、って言った以上書いておかねば。

今回は親要素の中央に子要素が表示される単純なプログラムにアレンジ。
IE7以上、firefox、chrome確認済みです。

対象の情報の取得

idなどを指定して取得したい対象を選択し、取得したいプロパティをセットします。 その他に下記の情報も取得できます。

offsetLeft…左からの距離
offsetTop…上からの距離

ただしブラウザーによって距離に誤差が出るので要注意。

サンプルはボタンをおして子要素のサイズを変えることができます。
表示位置をセットする計算はいたって単純ですが、サイズが変わってもきちんと真ん中に表示されます。
サンプルを見る
  1. 2013/01/06(日) 07:57:04|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

まとめてポップアップウィンドウを作る*Javascript*

このエントリーをはてなブックマークに追加
冬休みの課題として、まとめてポップアップウィンドウを作るJavascriptを書こうと思っていたのですが、ようやく着手できました。
ふぃ~。まだ改善しない点、ソースをきれいに書きなおさないといけないんだけど、とりあえず忘れないうちにメモっておきます。

ちなみに、firefox、IE9、Chromでは確認しました。
動きます。

CSS

親要素をdiv.pupupareaをrelativeにセット、ポップアップのspan.popupをabsoluteにセット。
マウスオーバーしたときにポップアップが現れるようにしたいので今は取り合えずvisivilityをhiddenにセットして隠しておきます。

位置もオートで設定したかったんですが、疲れたのでまた今度やりまする…。

HTML

マウスオーバーでポップアップしたいソースは全て下記のセットで作ります。
マウスオーバーのターゲットは何でもOK!
今回は<p>にしてみました。
class名とIDだけは同じにします。

Javascript

特定のタグのスタイルを変えるためにはオリジナルのIDを振ってやる必要があります。
HTMLの方ではすべてポップアップもマウスオーバーするターゲットのタグもIDが一緒が同じです。
それぞれのID名に単純にお尻に数をつけ置き換え、かぶらないようにします。

ソースの中では上のタグからID名 + 0、ID名 + 1、ID名 + 2~といった風にすべてIDに書き換えられているはずです。
このIDの数はついになっているので、
マウスオーバーすれば同じ数がついているポップアップが表示されるようにします。 背景を素材にしたりするだけで、とってもリッチなPOPUPが完成します。

サンプルを見る

追記

IE7~8ではgetElementByClassNameがサポートされてませんので、ポップアップ出現しません。
なのでgetElementByClassName→getElementByTagNameに変更。
さらにclassNameでふるいをかけるよう書き換えました。

html上、pタグとspanタグはそれぞれ、IDを書き換えます。 マウスオーバーのイベントはmOverの方だけに記述。
IE8だとCSSの問題でabsoluteとrelativeがうまく聞いてくれません…。
html5で書いたせいかな~、残念。8.7ともに角丸が聞かないのも仕方ないですね~。
あとはポップアップがたくさん重なるときは、配置場所を気を付けないと下のオブジェクトがかぶってしまいます。


サンプルを見る
  1. 2012/12/30(日) 05:55:33|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。