(solved) Hovering text

[Sauruzin]

Hello everybody,

I'm building a simple gallery with some help of the menumanager. I want menu-items to appear as a gallery. When hovering the menu text should appear in a dynamic div (the image is also in that div). I tried to use {$node-->id} to tell in wich div the text should appear but apparently it's not working. If i replace al the {$node-->id} with a random number, it's working. Can someone tell me what i'm doing wrong?

This is my code:

Code: Select all

{literal}
<__script__ type="text/javascript">
function showDescription{/literal}{$node->id}{literal}(text){
  document.getElementById('{/literal}1{literal}').innerHTML = text;
}
function clearDescription{/literal}{$node->id}{literal}(){
  document.getElementById('{/literal}1{literal}').innerHTML = '';
}
</__script>
{/literal}
{if $count > 0}
<ul class="clearfix">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li>
<div id="projectenmatrix"><div id="{$node->id}">dfgdfgdfgdfg</div></div>
<a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if} title="{$node->menutext}"> <img src="uploads/images/Gallery/{$node->alias}/1.jpg" width="125px" onmouseover="showDescription{$node->id}('{$node->menutext}')" onmouseout="clearDescription{$node->id}();" ></a> 
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

[Dr.CSS]

Do you have a working example of what you want?...

[Sauruzin]

Do you have a working example of what you want?...

Not really, but basically this is what i want to do.

Code: Select all

<__script__ type="text/javascript">
function showDescription(text){
  document.getElementById('information').innerHTML = text;
}
function clearDescription(){
  document.getElementById('information').innerHTML = '';
}
</__script>
<img src="/img2.jpg" onmouseover="showDescription('This is another description, it can also be whatever.')" onmouseout="clearDescription();"/>
<div id="information"></div>

As you can see, as soon as you hover img 2.jpg, the text will appear in the div information. The problem with my other script is that the div information has to be dynamic. This image shows what i want to make. Maybe there's a much easier solution for. Some help or ideas would be appreciated.

[Dr.CSS]

You could use page image and menu text with the text being in a span that is display:none then on hover display:block, this menu uses the page image and menu text, you don't have to have it move like I do that is just some funky JS to do fish eye effect...

http://mit-computers.com/index.php/how- ... types.html

[Sauruzin]

You could use page image and menu text with the text being in a span that is display:none then on hover display:block, this menu uses the page image and menu text, you don't have to have it move like I do that is just some funky JS to do fish eye effect...

http://mit-computers.com/index.php/how- ... types.html

Awesome, it works! Thanks alot. I've made a few ajustments in the CSS because its not working when you put the images below eachother.

This is my code for people who are interested.

Code: Select all

{if $count > 0}
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}
{elseif $node->index > 0}
{/if}

{if $node->current == true}
<a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
{$node->menutext}
{elseif $node->type == 'separator'}
<hr class="separator" />
{else}
<div id="matrixmenucontainer">
<div class="matrixmenuoverlay">
<a class="dock-item_projectenmatrix" href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if} title="{$node->menutext}"><span>{$node->menutext}</span> 
<div id="matrixmenucontainerimg">
<img src="uploads/images/Gallery/{$node->alias}/1.jpg" width="125px" height="90px" onmouseover="doStuff(this)"></a>
</div>
</div>
</div>
{/if}
{/foreach}
{repeat string="" times=$node->depth-1}
{/if}

[Dr.CSS]

Glad you were able to get it working, just so you know you don't have to use the onmouseover="doStuff(this) as this can be controlled by CSS...