How to create a javascript event to open popup on click
<p>I have a popup that opens onmouseover and close onmouseout.</p>

<p>I want create a second event to open the popup on click, and instead of dissapear when onmouseout, it will stay visible until click the close event.
I want each event separate. If open onmouseover >> close onmouseout
If open on click >> close on click</p>

<p>This is the html and javascript code. I appreciate someone help me on this.
Thanks</p>

<p>The html/php:</p>

<pre><code>&lt;?php
echo '&lt;a onmouseover="showthecontent('.$listing['products_id'].');" onmouseout="hideddrivetip()" href="javascript:showthecontent('.$listing['products_id'].')" class="image_popup_lnk_qv" style="visibility: hidden" id="view_'.$listing['products_id'].'"&gt;
 &lt;img src="images/infobox/quick_view_listing.gif" style="border: 0px;"&gt;&lt;/a&gt;&amp;nbsp;&lt;div id="prd_'.$listing['products_id'].'"
   style="display: none; position:relative; padding:0px;"&gt;
&lt;input type="hidden" name="prd_click" id="prd_click" value=""&gt;'
?&gt;
</code></pre>

<p>The javascript:</p>

<pre><code>&lt;script type="text/javascript"&gt;

var offsetxpoint=10 //Customize x offset of tooltip horizontal
var offsetypoint=20 //Customize y offset of tooltip vertical
var ie=document.all
var ns6=document.getElementById &amp;&amp; !document.all
var enabletip=false
if (ie||ns6)
var tipobj =document.getElementById("image_popup");
var TO=null;
var Delay=100;
function ietruebody(){
return (document.compatMode &amp;&amp; document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" &amp;&amp; thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
TO=setTimeout(function(){ tipobj.style.visibility="visible"; },Delay);
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
var rightedge=ie&amp;&amp;!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&amp;&amp;!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint&lt;0)? offsetxpoint*(-1) : -1000

if (rightedge&lt;tipobj.offsetWidth)
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX&lt;leftedge)
tipobj.style.left="5px"
else
tipobj.style.left=curX+offsetxpoint+"px"

if (bottomedge&lt;tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
}
}

function hideddrivetip(){
if (ns6||ie){
    clearTimeout(TO);
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip


function showthecontent(productid)
{
  prddiv = "prd_"+productid;

  var tipval = document.getElementById(prddiv).innerHTML;
  ddrivetip(tipval,'white', 550);
}

function image_view(id)
{
    document.getElementById(id).style.visibility='';
}

function image_hide(id)
{
    document.getElementById(id).style.visibility='hidden';
}
&lt;/script&gt;
</code></pre>
