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 to
mystore\app\design\frontend\base\default\template\page\template\links.phtml
or (never both)
mystore\app\design\frontend\base\default\template\page\template\linksblock.phtml. I used the following code pieces:
<script type="text/javascript">
function changeDescription(content) {
document.getElementById('description').innerHTML = content;
}
</script>
<a href="#" onmouseover="changeDescription('<?php echo $this->getTitle() ?>')">
<!-- I also tried getLabel() instead of getTitle() -->
<div id="description">
lorem ipsum
</div>
And tried put in different places in those files (separately), but wherever I place the code, it messes up the <ul> list and its list items.
p.s. these 'buttons' are f*ugly, I know. It's just temporarily ;)
Edit:
My best try (amongst other different things I), probably, was to put it in links.phtml like this:
<script type="text/javascript"> function changeDescription(content) { document.getElementById('description').innerHTML = content; } </script>
<div id="description"> lorem ipsum </div>
<?php $_links = $this->getLinks(); ?>
<?php if(count($_links)>0): ?>
<ul class="links"<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?>>
<?php foreach($_links as $_link): ?>
<a href="#" title="<?php echo htmlspecialchars($this->getLabel()); ?>" onmouseover="changeDescription(this.title)">
<?php if ($_link instanceof Mage_Core_Block_Abstract):?>
<?php echo $_link->toHtml() ?>
<?php else: ?>
<li<?php if($_link->getIsFirst()||$_link->getIsLast()): ?> class="<?php if($_link->getIsFirst()): ?>first<?php endif; ?><?php if($_link->getIsLast()): ?> last<?php endif; ?>"<?php endif; ?> <?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo $_link->getAfterText() ?></li>
<?php endif;?>
</a>
<?php endforeach; ?>
</ul>
<?php endif; ?>
but to no avail. Whatever I do, it messes up the structure of the contents of the <ul>.