I am trying to add a small innerhtml function to the top links of Magento. Instead of the default text links, I have hidden the texts ('My account', 'My wishlist', 'My cart', 'login/register') and given them images.See the image below.
What I'm trying to do is, that when you hover over one of the top links buttons, you get the appropriate label/name of that top link somewhere in a div next to the buttons. So if you hover over the 'My cart' link/button, you get to see the text 'My cart' in that corresponding div.The technical issue is not the innerhtml part, because I know how innerhtml works. My question is: Where and how do I implement the pieces of innerhtml code so that it works correctly for all the 4 toplinks?(Basically, it doesn't really matter that these text links are made into image links, but this is so you won't ask yourself "why would he want to do that?".)What I've tried is to add the parts tomystore\app\design\frontend\base\default\template\page\template\links.phtmlor (never both)mystore\app\design\frontend\base\default\template\page\template\linksblock.phtml.I used the following code pieces:\[code\]<script type="text/javascript"> function changeDescription(content) { document.getElementById('description').innerHTML = content; } </script>\[/code\]\[code\]<a href="http://stackoverflow.com/questions/13725393/#" onmouseover="changeDescription('<?php echo $this->getTitle() ?>')"> <!-- I also tried getLabel() instead of getTitle() -->\[/code\]\[code\]<div id="description"> lorem ipsum </div>\[/code\]And tried put in different places in those files (separately), but wherever I place the code, it messes up the \[code\]<ul>\[/code\] list and its list items.p.s. these 'buttons' are f*ugly, I know. It's just temporarily 