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

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

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

The html/php:

    <?php
    echo '<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'].'">
     <img src="images/infobox/quick_view_listing.gif" style="border: 0px;"></a>&nbsp;<div id="prd_'.$listing['products_id'].'"
       style="display: none; position:relative; padding:0px;">
    <input type="hidden" name="prd_click" id="prd_click" value="">'
    ?>

The javascript:

    <script type="text/javascript">
    
    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 && !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 && 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" && 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&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
    
    var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
    
    if (rightedge<tipobj.offsetWidth)
    tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
    else if (curX<leftedge)
    tipobj.style.left="5px"
    else
    tipobj.style.left=curX+offsetxpoint+"px"
    
    if (bottomedge<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';
    }
    </script>


How to create a javascript event to open popup on click
===

I have a popup that opens onmouseover and close onmouseout.

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

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

The html/php:

    <?php
    echo '<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'].'">
     <img src="images/infobox/quick_view_listing.gif" style="border: 0px;"></a>&nbsp;<div id="prd_'.$listing['products_id'].'"
       style="display: none; position:relative; padding:0px;">
    <input type="hidden" name="prd_click" id="prd_click" value="">'
    ?>

The javascript:

    <script type="text/javascript">
    
    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 && !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 && 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" && 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&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
    
    var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
    
    if (rightedge<tipobj.offsetWidth)
    tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
    else if (curX<leftedge)
    tipobj.style.left="5px"
    else
    tipobj.style.left=curX+offsetxpoint+"px"
    
    if (bottomedge<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';
    }
    </script>

