Simple ‘Display when Clicked’

@vwphillipsJun 04.2005 — #alternativly this modified script
[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 <!--
 // Simple PopUp spPart1 (04-02-2005)
 // by Vic Phillips http://www.vicsJavaScripts.org.uk
 
 // Application Notes
 // The PopUp may have an optional Title Panel.
 // Customising variables define the appearance.
 // The PopUp will normally be  positioned from the top left of the mouseover element.
 // The optional spPart3 will reposition the PopUp to ensure that it remains in view
 // when the element is positioned at the top and left extremities of the window.
 //
 // The PopUp is initialised by an onload event in the <body> tag calling function - spInitPopUp()
 // eg <body onload="javascript:spInitPopUp();" >
 // for normal application
 // The PopUp will become visible when function spTxtPopUp(this,'*MyText*') is actioned
 // eg <img src="Images/SampleImg.gif" width="80" height="30" onmouseover="javascript:spTxtPopUp(this,'*MyHTML*');">
 // where
 // *MyHTML* = any valid HTML to be displayed in the PopUp (string)
 //            this string can be specified as a string variable
 //  for more complex applications
 // the call is expanded to spTxtPopUp(this,'*MyText*',*Width*,*Height*,*Left*,*Top*)
 // *Width*  = the PopUp width
 // *Height* = the PopUp height
 // *Left*   = the horizontal(X) offset from the target object.
 // *Top*    = the vertical(Y)   offset from the target object.
 
 // Customising Variables
 
 // Customise
 var spZIndex=5;    // the PopUp must be above other elements
 var spPUOffSetX=5; // the distance from the target object position (simple applications)
 var spPUOffSetY=5; // the distance from the target object position (simple applications)
 var spPUDelay=500; // the PopUp display delay
 var spSpeed=10;    // the opening speed, 1 = slow, 10 = fast
 
 // The PopUp Appearance
 var spPUWidth=150;                    // the PopUp width (simple applications)
 var spPUHeight=50;                    // the PopUp height (simple applications)
 var spPUBGColor='white';              // the PopUp body color
 var spPUBorder='solid black 1px';     // the PopUp border
 
 // The PopUp Text
 var spPUTxtColor='black';  // the PopUp body text color
 var spPUTxtSize=12;        // the PopUp body text size
 var spPUTxtAlign='left';   // the PopUp body text alignment
 var spPUTxtTopOffset=0;    // the PopUp body text offset (to provide padding)
 var spPUTxtLeftOffset=12;  // the PopUp body text offset (to provide padding)
 
 // The PopUp Title Appearance
 // if a title is not required use - spTitle='';
 var spTitle='www.vicsJavaScripts.org.uk';   // The PopUp tile text
 var spTitleBGColor='#6699FF';               // The PopUp tile background color
 var spTitleTxtColor='black';                // The PopUp tile text color
 var spTitleTxtSize=10;                      // The PopUp tile size
 
 
 // example 'text string' to be used in PopUp call
 var WinterPalaceText='The Winter Palace<br>Luxor Egypt<br><br>';
 WinterPalaceText+='Built on the banks of the river Nile in 1886<br>'
 WinterPalaceText+='The Winter Palace still makes a statement<br>'
 WinterPalaceText+='with its facade of rosy-colouredstucco work.<br>'
 WinterPalaceText+='the interior spaces are expancive and rooms<br>'
 WinterPalaceText+='have lofty ceilings and French style windows.<br><br>'
 WinterPalaceText+='<a href="http://www.egyptmyway.com/hotels/luxor/oldwinter.html" >Click to find out More</a>';
 //-->
 </script>
 
 <script language="JavaScript" type="text/javascript">
 <!--
 // Simple PopUp spPart2 (04-02-2005)
 // by Vic Phillips http://www.vicsJavaScripts.org.uk
 
 // Functional Code
 
 
 // Do Not Change
 var spTO=null;
 var spTO1=null;
 var spAY=0;
 var spAX=0;
 var spAA=0;
 
 function spTxtPopUp(spobj,sptxt,spw,sph,spx,spy){
 spPUS.display='block';
 spH=spPUHeight;
 spPUS.height='0px';
 spPk.innerHTML=sptxt;
 if (spAA){ spA(spobj); }
 if (spw){
 spPUS.width=(spw)+'px';
 spH=sph;
 spPUS.top=(spTop(spobj)+spy)+'px';
 spPUS.left=(spLeft(spobj)+spx)+'px';
 }
 else {
 spPUS.width=(spPUWidth)+'px';
 spPUS.height=(spPUHeight)+'px';
 spPUS.top=(spTop(spobj)-spPUHeight-spPUOffSetY+spAY)+'px';
 spPUS.left=(spLeft(spobj)+spPUOffSetX+spAX)+'px';
 }
 spPkS.width=(spPU.offsetWidth-spPUTxtLeftOffset*2)+'px';
 spTO=setTimeout('spPUS.visibility='visible';',spPUDelay);
 // spobj.onmouseout=function(){ clearTimeout(spTO); spTO1=setTimeout('spPUS.visibility='hidden'',100); }
 spOpen();
 }
 
 function spOpen(){
 spPUS.height=(spPU.offsetHeight+spSpeed)+'px';
 if (spPU.offsetHeight<spH){ setTimeout('spOpen()',5); }
 else {spPUS.height=(spH)+'px'; }
 }
 
 function spInitPopUp(){
 if (spTitle==''){ spTitleTxtSize=0;  }
 spTTxt=document.createTextNode(spTitle)
 spT=document.createElement("DIV");
 spT.style.position='absolute';
 spT.style.width='100%';
 spT.style.height=(spTitleTxtSize*1.5)+'px';
 spT.style.top='0px';
 spT.style.left='0px';
 spT.style.backgroundColor=spTitleBGColor;
 spT.style.borderBottom=spPUBorder;
 spT.style.color=spTitleTxtColor;
 spT.style.fontSize=spTitleTxtSize;
 spT.style.textAlign='center';
 spT.appendChild(spTTxt);
 spPk=document.createElement("DIV");
 spPkS=spPk.style;
 spPkS.position='absolute';
 spPkS.top=(spTitleTxtSize*1.5)+'px';
 spPkS.textAlign= spPUTxtAlign;
 spPkS.top=(spTitleTxtSize*1.5+spPUTxtTopOffset+spTitleTxtSize/2)+'px';
 spPkS.left=(spPUTxtLeftOffset)+'px';
 spPU=document.createElement("DIV");
 spPUS=spPU.style;
 spPUS.position='absolute';
 spPUS.zIndex=spZIndex;
 spPUS.overflow='hidden';
 spPUS.visibility='hidden';
 spPUS.display='none';
 spPUS.backgroundColor=spPUBGColor;
 spPUS.border=spPUBorder;
 spPUS.color=spPUTxtColor;
 spPUS.fontSize=spPUTxtSize+'px';
 spPUS.textAlign='center';
 spPU.onmouseover=function(){ clearTimeout(spTO1); }
 // spPU.onmouseout=function(){ spTO1=setTimeout('spPUS.visibility='hidden';',100); }
 document.onclick=function(){ spTO1=setTimeout('spPUS.visibility='hidden';',100); }
 if (spTitle!=''){ spPU.appendChild(spT); }
 spPU.appendChild(spPk);
 document.getElementsByTagName('body')[0].appendChild(spPU);
 }
 
 function spLeft(spObj){
 spObjLeft=spObj.offsetLeft;
 while(spObj.offsetParent!=null){
 spObjParent=spObj.offsetParent;
 spObjLeft+=spObjParent.offsetLeft;
 spObj=spObjParent;
 }
 return spObjLeft;
 }
 
 function spTop(spObj){
 spObjTop=spObj.offsetTop;
 while(spObj.offsetParent!=null){
 spObjParent=spObj.offsetParent;
 spObjTop+=spObjParent.offsetTop;
 spObj=spObjParent;
 }
 return spObjTop;
 }
 
 //-->
 </script>
 </head>
 
 <body onload="javascript:spInitPopUp();">
 <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="50"
 onclick="javascript:spTxtPopUp(this,'The PopUp<br>can be used for<br>a simple menu<br>with low overheads',135,90,50,5);"
 >
 </body>
 
 </html>
 [/code]
Simple ‘Display when Clicked’

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Simple ‘Display when Clicked’

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴
