prototype.jsでイメージのポップアップを作成する

prototype.jsでイメージのポップアップを作成する

• ツールチップ＝ポップアップの要素をゴリゴリとつくり、
• 現在のDOMオブジェクトに追加して
• 表示。
• 必要がなくなれば、消して
• 最期に要素を削除してしまう。

			//ロード時のイベント
			Event.observe(document, "dom:loaded", function(){
			
				//alert("");
				
				var myli=$("mypiclist").getElementsByTagName("img");
					
				//alert(myli[0].src);
				for (var i=0; myli.length > i;i++){
					//p86 Event.observe // イベントハンドラを設定
					Event.observe(myli[i], "mouseover", mover_handler);
					Event.observe(myli[i], "mouseout", mout_handler);
			
				}
				
			});
			
			
			
			
			function mover_handler(e){
				//イベント元のアイテム取得
				var it = e.element();
				var p = Position.positionedOffset(it);
				
				//ポップアップウィンドウ作成　thisはこの関数自身を指す。便利なオブジェクト？！
				this.element=document.createElement("div");
				this.element.id="popwindow";
				
				//body要素を取得して、bodyに追加	
				var addb=document.getElementsByTagName("body").item(0);
				addb.appendChild(this.element)
				
				var str="";
				str = "<img width=\"320\" height=\"240\" src=\"" + it.src + "\" />";
				
				$("popwindow").innerHTML=str;
				//スタイルを設定しています
				$("popwindow").setStyle('display: none');
				$("popwindow").setStyle({top: + (p[1]+60) + 'px'});
				$("popwindow").setStyle({left: + (p[0]) + 'px'});
				
				//scriptaculous.jsを使用 
				//因みに[http://javascriptist.net/]に非常に多くの分かりやすいサンプルが掲載されています！
				new Effect.Appear("popwindow", {
					from:0.1, // 開始時透明度
					to:1.0, // 終了時透明度
					delay:0, // 開始までの秒数
					fps:60, // フレームレート
					duration: 1.0, // アニメーションする時間(秒)
					beforeStartInternal: function(effect) {
						//スタート前の処理
					},
					afterFinishInternal: function(effect) {
						//終了後のしょり
					}
				});
				//alert("");//デバグ用
			}
			
			function mout_handler(e){
				//ポップアップを消す
				
			    var it = e.element();
			    
			    if (it.tagName == "IMG"){
			    	if ($("popwindow")) {
						//かくして
				     	$("popwindow").hide();
						//要素を削除する場合はいつも、
						//親要素から子要素（popwindow）を消す、手順になるようだ。
				    	this.element = document.getElementById("popwindow");
				    	var paele =this.element.parentNode;
				    	paele.removeChild(this.element);
				    	//alert("");//デバグ用
			    	}
			    }
			
			}