ページを選択して、テキストのポップアップ層を選択し、レイヤーのテキストまたは画像をクリックしてイベントを起動します.

実はこの機能はとても簡単で、多くの実現方法があります.今は二つの実現方法を抜粋します.一つは元のjsを使って実現します.一つはjqueryを使って実現します.実際のプロジェクトではkisyを使って実現しましたが、方法はほとんど同じです.本文はネット上の資料を参考にしました.侵害があれば、どうぞお許しください.
最初の方法は元のjsを使用します.まずイメージ要素を隠してから選択したテキストイベントを取得します.最後に選択したテキストの上にマウスがある時に画像や特定のテキストヒントを表示します.ヒントをクリックしてイベントをトリガします.

var hideImage = document.getElementById("hideImage");



var $selectFx = function(hideImage, eleContainer) {

	eleContainer = eleContainer || document;

	var getSelectTxt = function() {

		var txt = "";

		if(document.selection) {

			txt = document.selection.createRange().text;	// IE

		} else {

			txt = document.getSelection();

		}

		return txt.toString();

	};

	eleContainer.onmouseup = function(e) {

		e = e || window.event;

		var txt = getSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

		var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;

		if (txt) {

			hideImage.style.display = "inline";

			hideImage.style.left = left + "px";

			hideImage.style.top = top + "px";

		} else {

			hideImage.style.display = "none";

		}

	};

	hideImage.onclick = function() {

		var txt = getSelectTxt();

		alert(txt);//             

	};

}(hideImage);

の第二はjqueryを使って実現したもので、構想は大体一致しています.実現の難しさも同じです.jqueryを使って優雅さを実現します.

$(function () {

	$("#content").mouseup(function (e) {

		var x = 10;

		var y = 10;

		var text = "";

		if (document.selection) {

			text = document.selection.createRange().text;

		}

		else if (window.getSelection()) {

			text = window.getSelection();

		}

		if (text!= "") {

			var tip = "         ";

			var tooltip = "<div id='tooltip' class='tooltip'><a onclick=doit('"+r+"')>" + tip + "</a></div>";

			$("body").append(tooltip);

			$("#tooltip").css({

				"top": (e.pageY + y) + "px",

				"left": (e.pageX + x) + "px",

				"position": "absolute"

			}).show("fast");

		}

	}).mousedown(function () {

		$("#tooltip").remove();

	});

})



function doit(text) {

	if (text != "") {

		alert(text);//             

	}

}