Javascript hover over popup

I’m trying to add a translation widget to my site. It works fine but, the thing pops up the window when i hover over it. Is there any way to have it only open if it’s clicked on?

<a href="" id="ftwtranslation_button" hreflang="en" title="" style="border:0;"><img src="" id="ftwtranslation_image" alt="Free Translation Widget" style="border:0;"/></a> <script type="text/javascript" src="" /></script>

I’d just use Googles translate widget but for some reason firefox users see a constant loading progress bar, “transferring data from” which is just as annoying.

Any help is appreciated.

Its hard coded to use the onmouseover attribute so the only way to update it would be to host the script locally on your server.

There is a way to do it. Just use the image in a cover layer above the required button and make both the cover layer and the translation layer position:absolute and toggle between display:block and display:none. The cover layer needs an onclick handler to reveal the active button. The script below does all of this. One improvement would be to build in a timeout so that the non-active layer can be restored if the button is not being used after activating.

I have used in-line handlers to make it clear what is happening.

<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Translate Button</title>
<script type=“text/javascript”>
var coverObj, transObj; // global
function init()
{ // shorcut to active objects
// ---------
function show()
{ // show translate button“none”;“block”;
<style type=“text/css”>
body { margin:3px 0px; text-align:center; }
#wrap { position:relative; top:0px; left:0px; width:500px; height:400px; border:1px solid #666; margin:0px auto; }
#cover { position:absolute; top:0px; left:0px; width:152px; height:24px; cursor:pointer; }
#trans { display:none; position:absolute; top:0px; left:0px; width:150px; height:22px; text-align:left; border:1px solid blue; }

<body onload=“init()”>

<div id=“wrap”>
<div id=“cover” onclick=“show()”>
<img src=“” alt=“Free Translation Widget” style=“border:0” width=“150” height=“22”>
<!-- end cover –>
<div id=“trans”>
<a href=“” id=“ftwtranslation_button” hreflang=“en” title style=“border:0;”>
<img src=“” id=“ftwtranslation_image” alt=“Free Translation Widget” style=“border:0” width=“150” height=“22”></a>
<script type=“text/javascript” src=“”>
<!-- end trans –>
<!-- end wrap –>