105 lines
5.0 KiB
JavaScript
105 lines
5.0 KiB
JavaScript
/*
|
||
*使用方法
|
||
*
|
||
<A href="http://www.91tuku.com/krPhotoShow.asp?photo=/demo/contentsdetail/1111/getfile_main(50).jpg" target=_blank><br>
|
||
<IMG alt="<img src='http://upload.sj63.com/demo/Contentstop/1111/255(84).jpg' border='0' />" src="Background.gif" width="165" height="106" border=0><br>
|
||
</A>
|
||
*
|
||
*
|
||
*註：凡是在include此頁面後的頁面，只要圖片有 alt 屬性，都會有彈出式視窗.
|
||
include方式：<script language="JavaScript" src="../../App_Script/css/SetPicSmallPop.js"></script>
|
||
*/
|
||
|
||
|
||
var pltsPop=null;
|
||
var pltsoffsetX = 0; // 彈出視窗與Mouse左或右的距離 (3~12較合適)
|
||
var pltsoffsetY = 0; // 彈出視窗與Mouse上或下的距離 (3~12較合適)
|
||
var pltsTitle="";
|
||
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
|
||
function pltsinits()
|
||
{
|
||
document.onmouseover = plts;
|
||
document.onmousemove = moveToMouseLoc;
|
||
}
|
||
function plts()
|
||
{ var o=event.srcElement;
|
||
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
|
||
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
|
||
pltsPop=o.dypop;
|
||
//if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
|
||
if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined"&&(event.srcElement.id=="smallpic" || event.srcElement.id=="bigpic"))
|
||
{
|
||
pltsTipLayer.style.left=-1000;
|
||
pltsTipLayer.style.display='';
|
||
var Msg=pltsPop.replace(/\n/g,"<br>");
|
||
Msg=Msg.replace(/\0x13/g,"<br>");
|
||
var re=/\{(.[^\{]*)\}/ig;
|
||
if(!re.test(Msg))pltsTitle="已上傳圖片";
|
||
else{
|
||
re=/\{(.[^\{]*)\}(.*)/ig;
|
||
pltsTitle=Msg.replace(re,"$1")+" ";
|
||
re=/\{(.[^\{]*)\}/ig;
|
||
Msg=Msg.replace(re,"");
|
||
Msg=Msg.replace("<br>","");}
|
||
var content =
|
||
'<table style="FILTER:alpha(opacity=100);border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0" bgcolor="#ffffff"><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0">'+
|
||
'<tr id="pltsPoptop"><td height="20" bgcolor="#000000"><font color="#ffffff"><b><p id="topleft" align="center">'+pltsTitle+'</p><p id="topright" align="right" style="display:none">'+pltsTitle+'↗</font></b></font></td></tr>'+
|
||
'<tr><td "+attr+" style="padding-left:10px;padding-right:10px;padding-top: 8px;padding-bottom:6px;line-height:140%">'+Msg+'</td></tr>'+
|
||
'<tr id="pltsPopbot" style="display:none"><td height="20" bgcolor="#000000"><font color="#ffffff"><b><p id="botleft" align="left">↙'+pltsTitle+'</p><p id="botright" align="right" style="display:none">'+pltsTitle+'↘</font></b></font></td></tr>'+
|
||
'</table></td></tr></table>';
|
||
pltsTipLayer.innerHTML=content;
|
||
toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
|
||
moveToMouseLoc();
|
||
return true;
|
||
}
|
||
else
|
||
{
|
||
pltsTipLayer.innerHTML='';
|
||
pltsTipLayer.style.display='none';
|
||
return true;
|
||
}
|
||
}
|
||
|
||
function moveToMouseLoc()
|
||
{
|
||
if(pltsTipLayer.innerHTML=='')return true;
|
||
var MouseX=event.x;
|
||
var MouseY=event.y;
|
||
var popHeight=pltsTipLayer.clientHeight; //另開視窗的高度
|
||
var popWidth=pltsTipLayer.clientWidth; //另開視窗的寬度
|
||
|
||
|
||
pltsTipLayer.style.left=MouseX + pltsoffsetX ; //另開視窗x座標
|
||
if (event.srcElement.id=="smallpic"){ //判斷目前滑鼠移至的圖片是那一張
|
||
//pltsTipLayer.style.top=Label1.offsetTop - popHeight + pltsoffsetY; //另開視窗y座標 (若不使用masterpage時)
|
||
pltsTipLayer.style.top=ctl00_ContentPlaceHolder1_Label1.offsetTop - popHeight + pltsoffsetY; //另開視窗y座標 (若將include檔放在masterpage時)
|
||
}else if(event.srcElement.id=="bigpic"){
|
||
//pltsTipLayer.style.top=Label2.offsetTop - popHeight + pltsoffsetY; //另開視窗y座標 (若不使用masterpage時)
|
||
pltsTipLayer.style.top=ctl00_ContentPlaceHolder1_Label2.offsetTop - popHeight + pltsoffsetY; //另開視窗y座標 (若將include檔放在masterpage時)
|
||
}
|
||
|
||
return true;
|
||
}
|
||
pltsinits();
|
||
|
||
/*
|
||
parseInt(event.clientY)+parseInt(document.body.scrollTop); //取得滑鼠的絕對座標
|
||
window.screen.width==螢幕寬度
|
||
window.screen.availWidth==螢幕寬度-工具列寬度(EX:office快捷列)
|
||
window.screen.height==螢幕高度
|
||
window.screen.availHeight==螢幕高度-工具列高度(EX:開始列)
|
||
document.body.clientWidth==文件寬度-scrollbar(上下拉)寬度
|
||
document.body.offsetWidth==文件寬度
|
||
document.body.clientHeight==文件高度-scrollbar(左右拉)高度
|
||
document.body.offsetHeight==文件高度
|
||
document.body.scrollWidth==文件scrollbar(左右拉)總寬度
|
||
document.body.scrollHeight==文件scrollbar(上下拉)總高度
|
||
event.screenY
|
||
|
||
pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
|
||
pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
|
||
pltsTipLayer.style.top=588-popHeight;
|
||
pltsTipLayer.style.top=MouseY-popHeight+(document.body.clientHeight-MouseY);
|
||
alert(event.srcElement.id);
|
||
|
||
*/ |