Page 1 of 1
(solved) Hovering text
Posted: Thu Jan 27, 2011 7:21 pm
by 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}
Re: Hovering text
Posted: Thu Jan 27, 2011 10:45 pm
by Dr.CSS
Do you have a working example of what you want?...
Re: Hovering text
Posted: Sat Jan 29, 2011 12:17 pm
by Sauruzin
Dr.CSS wrote: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.
Re: Hovering text
Posted: Sat Jan 29, 2011 8:52 pm
by 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
Re: Hovering text
Posted: Sun Jan 30, 2011 4:33 pm
by Sauruzin
Dr.CSS wrote: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}
Re: (solved) Hovering text
Posted: Sun Jan 30, 2011 5:05 pm
by 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...