Mouseover translations?

[Phollos]

What it is now:
I'm working on a personal blog because I'll be visiting Sweden for 4 months. I've found / hacked a script that allows the user to mouseover swedish words and have a static translation box show the translation.

Working site at http://sverigejourney.tumblr.com

The current code I use to, say, translate "sverige" to "sweden" is:

<span id="trans">the translation will appear here</span>
<a onmouseover="document.getElementById('trans').firstChild.data = 'sweden'; return true;">sverige</a>

To be honest though I'm not exactly sure why this works. I'm not sure why it uses the <a> tags and I'm pretty sure it's javascript but I don't use an <script> coding in my html and it still works...

What I would like to do:

Because I'll be using this a lot on my page I'd like to create a function to shorten what I have to type.

Something along the lines of:

<a onmouseover="translate("sweden")">sverige</a>

But I'm really not all that experienced in javascript - anyone have any pointers? I'd really appreciate it!

-Jackson

[JugglerDrummer]

You are modifying the text-node that is the first child of the element "trans", setting its contents to the translation

<script type="text/javascript">
function translate(translation) {
document.getElementById('trans').firstChild.data = translation;
 return true;

</script>

Basically sets the contents of the translation box to whatever string you pass to it.

Usage:
(you need to either use escaped double quotes or single quotes in a double quoted string)

<a onmouseover="translate('sweden')">sverige</a>

<a onmouseover="translate('swedish version')">a word</a>

:)

[Airshow]

Phollos,

Here's a couple of ways to do it, one simple, the other smarter and more HTML-minimal.

Method 1: CSS

<style>
#trans { border:2px solid #999999; padding:2px; }
.trans { background-color:#ccFF00; }
</style>

Method 1: Javascript

<script>
//Script for simple approach
function translate(txt, el){
	document.getElementById('trans').innerHTML = txt;
	if(el) { el.onmouseout = function(){ translate('&nbsp;'); }; }
}
</script>

Method 1: HTML

<div id="trans">&nbsp;</div>
<p>Here's the simple way to do it - <span class="trans" onmouseover="return translate('Sweden', this);">Sverige</span>.</p>

Method 2: CSS

<style>
#trans { display:none; border:2px solid #999999; padding:2px; }
</style>

Method 2: Javascript

<script>
//Script for minimalist approach
onload = function(){
	if(document.getElementById){
		var trans = document.getElementById('trans');
		trans.style.display = 'block';
		var spans = document.getElementsByTagName('span');
		for(var i=0; i<spans.length; i++){
			if(t = spans[i].getAttribute('t')) {
				spans[i].onmouseover = function(){ document.getElementById('trans').innerHTML = t; }
				spans[i].onmouseout = function(){ document.getElementById('trans').innerHTML = '&nbsp;'; }
				spans[i].style.backgroundColor= '#FFCC00';
			}
		}
	}
}
</script>

Method 2: HTML

<div id="trans">&nbsp;</div>
<p>Here's the minimalist (smart***e) way to do it - <span t="Sweden">Sverige</span></p>

Create a two HTML test documents. In one, place method 1's CSS and JavaScript in the head and the HTML in the body. Then the same for method 2 in the other test doc.

Although the javascript for method 2 is longer, most of it only exeutes once when the page loads. The functions that execute each time the user places cursor on/off the translate text are no more complex than those in method 1.

Airshow

[Phollos]

Thanks so much for the quick replys!

I went ahead and tried out Juggler Drummer's code and it's exactly what I was looking for.

I'll definately go back and look over your approach though Airshow to learn a bit more =)

In the interest of helping anyone else curious about how this is done, here is the final code

<script type="text/javascript">
function translate(translation) {
document.getElementById('trans').firstChild.data = translation;
return true;
}
</script>

then the html would be:

<span id="trans">text appears here</span><br />
<a onmouseover="translate('sweden')">sverige</a><br />
<a onmouseover="translate('wednesday')">onsdag</a>

Again thanks so much!

-Jackson

[Airshow]

Here's something like Method 2 but simpler - and not involving a dedicated html element in which to display the translation:

onload = function(){
	if(document.getElementById){
		var trans = document.getElementById('trans');
		trans.style.display = 'block';
		var spans = document.getElementsByTagName('span');
		for(var i=0; i<spans.length; i++){
			if(t = spans[i].getAttribute('t')) {
				spans[i].setAttribute('title', t);
				spans[i].style.backgroundColor= '#FFCC00';
			}
		}
	}
}

Otherwise the same as my Method 2 (which would need a slight correction to handle multiple traslation instances - I overlooked something).

Airshow