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

準備中

スポンサーサイト

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

まとめてポップアップウィンドウを作る*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* | ホーム | イラストに陰影*フォトショ*>>

コメント

コメントの投稿


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

トラックバック

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