Javascript hover over popup

JavaScript
1

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="http://free-website-translation.com/" id="ftwtranslation_button" hreflang="en" title="" style="border:0;"><img src="http://free-website-translation.com/img/fwt_button_en.gif" id="ftwtranslation_image" alt="Free Translation Widget" style="border:0;"/></a> <script type="text/javascript" src="http://free-website-translation.com/scripts/fwt.js" /></script>

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

Any help is appreciated.

2

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.

3

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.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>
<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
coverObj=document.getElementById(“cover”);
transObj=document.getElementById(“trans”);
}
// ---------
function show()
{ // show translate button
coverObj.style.display=“none”;
transObj.style.display=“block”;
}
//–>
</script>
<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; }
–>
</style>
</head>

<body onload=“init()”>

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

</body>

</html>