, the Spanish version of Harry Potter and the Sorcerer's Stone
. It's definitely improving my vocabulary, as there are many words I've needed to look up. I've listed many of them below, in the hopes this list may be helpful to others as well.
To make this slightly more relevant to my usual topic of programming languages, I've added Javascript that will show or hide the English translations, which will also show up if you hover over a link. (See the end for explanation of the Javascript.)
|
|
How the Javascript works
I'm including some programming content for my regular blog readers, since this is a bit off topic. If you're interested in the Spanish, you can stop reading here :-)I have two CSS classes, one for the enabled text, and one for the disabled text. I simply change the color to show and hide the text. The #f6f6f6 color is to match the background of my blog page, which isn't quite white.
<style TYPE="text/css">
.enabled {color: black}
.disabled {color: #f6f6f6}
</style>
Next, each word entry has a span tag around the English text that I want to show or hide:
<a href="http://..." title="to add">añadir</a> <span class="enabled"> - to add</span>Then, I have a Javscript function that will toggle the class for each span tag. It simply loops through all the span tags switching ones with the enabled class to the disabled class and vice versa. Other span tags are left alone.
<script language="JavaScript">
function toggle() {
elts = document.getElementsByTagName("span");
for (var i = 0; i < elts.length; i++) {
if (elts[i].className == "enabled") {
elts[i].className = "disabled";
} else if (elts[i].className == "disabled") {
elts[i].className = "enabled";
}
}
}
</script>
Finally, the button calls the Javascript toggle routine to toggle the visibility.
<button onclick="toggle();">Show/Hide English</button>
