Layer Genie Support Product Page

This topic is locked
This topic was archived

reverse effects

Asked 21 Mar 2003 14:20:21
1
has this question
21 Mar 2003 14:20:21  ben posted:
I am trying to reverse the effects of your layer genie fade effects. What I am trying to achieve is when I roll over a button a seperate visible layer fades out and when I roll off it fades back in. How can I achieve this with layer genie??

Replies

Replied 21 Mar 2003 14:32:24
21 Mar 2003 14:32:24 Marja Ribbers-de Vroed replied:
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
I am trying to reverse the effects of your layer genie fade effects. What I am trying to achieve is when I roll over a button a seperate visible layer fades out and when I roll off it fades back in. How can I achieve this with layer genie??
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
Do you mean the layer should be visible until the onMouseOver event for the button is triggered?
If so, you could do that like this:
<ul>
<li>set the layer's initial visibility to 'hidden'</li>
<li>apply the Show Layer Genie behavior to the onLoad event of the &lt;body&gt; tag so the layer is made visible onLoad</li>
<li>apply the Hide Layer(s) Genie behavior to the (onMouseOver) event for the button (because the 'effect' settings for the layer were defined onLoad, the hide effect can be reversed)</li>
<li>re-apply the Show Layer Genie behavior to the (onMouseOut) event of the button</li>
</ul>
Hope this helps.

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/


Edited by - MarjaR on 21 Mar 2003 14:34:11
Replied 21 Mar 2003 14:40:58
21 Mar 2003 14:40:58  ben replied:
I tried following your steps but after I set the show layer genie to the &lt;body&gt; tag and selected the image to apply the hide behaviour - the Hide Layer(s) option was still greyed out?? am I missing a setting when initially applying the Show Layer behaviour?
Replied 21 Mar 2003 15:04:08
21 Mar 2003 15:04:08 Marja Ribbers-de Vroed replied:
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
I tried following your steps but after I set the show layer genie to the &lt;body&gt; tag and selected the image to apply the hide behaviour - the Hide Layer(s) option was still greyed out?? am I missing a setting when initially applying the Show Layer behaviour?
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
You may need to save the page after applying Show Layer Genie to the onLoad event.

If that doesn't work, then please show me your page, so I can have a look at your code.


--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/
Replied 21 Mar 2003 15:22:47
21 Mar 2003 15:22:47  ben replied:
I still could not get it to work <img src=../images/dmxzone/forum/icon_smile_sad.gif border=0 align=middle> I have posted my page code clean so you can try and achieve the same effect.

What I am trying to do is to create a fade effect of div "btnWebsiteOn"when I rollover the image "btn_extranet_on.gif" contained in the div "btnExtranetOn" nested inside div "btnExtranetOff". And for the reverse to happen when I roll off.

----------8&lt;----------

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;script language="JavaScript" type="text/JavaScript"&gt;
&lt;!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape"&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//--&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body bgcolor="#5A7EDC"&gt;
&lt;div id="btnExtranetOff" style="position:absolute; left:359px; top:136px; width:55px; height:54px; z-index:1;"&gt;
&lt;div id="btnExtranetOn" style="position:absolute; left:0px; top:0px; width:55px; height:54px; z-index:1;"&gt;
&lt;div id="btnExtranetHighlight" style="position:absolute; left:0px; top:0px; width:55px; height:54px; z-index:1; visibility: hidden;"&gt;&lt;a href="javascript:;"&gt;&lt;img src="images/btn_highlight.gif" width="55" height="54" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;img src="images/btn_extranet_on.gif" width="55" height="54"&gt;&lt;/div&gt;
&lt;img src="images/btn_extranet_off.gif" width="55" height="54"&gt;&lt;/div&gt;
&lt;div id="btnWebsiteOff" style="position:absolute; left:359px; top:44px; width:55px; height:54px; z-index:2;"&gt;
&lt;div id="btnWebsiteOn" style="position:absolute; left:0px; top:0px; width:55px; height:54px; z-index:2; visibility: hidden;"&gt;
&lt;div id="btnWebsiteHighlight" style="position:absolute; left:0px; top:0px; width:55px; height:54px; z-index:2; visibility: hidden;"&gt;&lt;a href="javascript:;"&gt;&lt;img src="images/btn_highlight.gif" width="55" height="54" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;img src="images/btn_extranet_on.gif" width="55" height="54"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Replied 21 Mar 2003 15:30:16
21 Mar 2003 15:30:16 Marja Ribbers-de Vroed replied:
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
I still could not get it to work <img src=../images/dmxzone/forum/icon_smile_sad.gif border=0 align=middle> I have posted my page code clean so you can try and achieve the same effect.

...
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
There is no Show Layer Genie behavior on that page yet.
And the Hide Layer(s) Genie behavior will only be available when there is at least one call to the 'show' behavior already on the page.

So:<ul>
<li>apply 'Show Layer Genie' to the onLoad event of the page</li>
<li>save the page</li>
<li>apply the 'Hide Layer(s) Genie' behavior to the (onMouseOver) event of the image</li>
<li>apply the 'Show Layer Genie' behavior to the (onMouseOut) event of the image</li>
</ul>

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/
Replied 21 Mar 2003 15:37:26
21 Mar 2003 15:37:26  ben replied:
yes I know, I posted it initially clean because I was not sure if you had any issues about posting your code. But here is the code with the show layer genie applied to the onload event. Although the hide layer behavious is still not visible when I select the image btn_extranet_on.gif inide of div "btnExtranetOn" to hide div "btnWebsiteOn".

----------8&lt;----------

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;script language="JavaScript" type="text/JavaScript"&gt;
&lt;!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape"&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?")&gt;0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i&lt;d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i&lt;d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function flvS1(v1){//v1.0
var v2=v1.indexOf("?",v3=(v2&gt;-1)?v1.substring(v2+1):"";var v4=(v3!=""?v1.substring(0,v2):v1;var v5=(v3!=""?parent.frames[v3].document:document;var v6=0,v7=0,v8;if (v5.layers){var v9=false,v6=v7=0;v8=v5.anchors[v4];if (v8){v9=true;}else {if (v5.layers.length&gt;0){for (j=0;j&lt;v5.layers.length;j++){v8=v5.layers[j].document.anchors[v4];if (v8){v9=true;v6=v5.layers[j].left;v7=v5.layers[j].top;break}}}}this.x=v6+v8.x;this.y=v7+v8.y;return;}if (v5.all){v8=v5.all[v4];}else if (v5.getElementById){v8=v5.getElementById(v4);if (!v8){var v10=v5.getElementsByName(v4);v8=v10[0];}}else {this.x=0;this.y=0;return;}if (v8){v6+=v8.offsetLeft;v7+=v8.offsetTop;while (v8.offsetParent){v8=v8.offsetParent;v6+=v8.offsetLeft;v7+=v8.offsetTop;}}this.x=v6;this.y=v7;}

function flvS3(v1){//v1.2
var v2=MM_findObj(v1);if (!v2){this.x=this.y=this.h=this.w=0;return;}var v3,v4,v5,v6,v7=(document.layers)?v2:v2.style;v3=isNaN(parseInt(v7.left))?v2.offsetLeft<img src=../images/dmxzone/forum/icon_smile_tongue.gif border=0 align=middle>arseInt(v7.left);v4=isNaN(parseInt(v7.top))?v4=v2.offsetTop<img src=../images/dmxzone/forum/icon_smile_tongue.gif border=0 align=middle>arseInt(v7.top);if (v2.offsetHeight){v5=v2.offsetHeight;v6=v2.offsetWidth;}else if (document.layers){v5=v7.clip.height;v6=v7.clip.width;}else {v5=v6=0;}this.x=parseInt(v3);this.y=parseInt(v4);this.h=parseInt(v5);this.w=parseInt(v6);}

function flvS4(){//v1.0
var v1=arguments,v2=v1[0],v3=v1[1],v4=MM_findObj(v2),v5=v6=0;if (!v4&&document.all){v4=document.all[v2];}if (!v4){this.x=0;this.y=0;return;}var v7=(document.getElementById||document.all),v8=document.layers,v9=v2.indexOf("?";if (v9&gt;-1){v2=v2.substring(0,v9);}if (v8){for (var v10=0;v10&lt;v8.length;v10++){var v11="document."+v8[v10].id;if (eval(v11+".document."+v2)){v5=eval(v11+".left";v6=eval(v11+".top";break;}}}if (v7){v5+=v4.offsetLeft;v6+=v4.offsetTop;while (v4.offsetParent){v4=v4.offsetParent;v5+=v4.offsetLeft;v6+=v4.offsetTop;}}else if (v8){v5+=v4.x;v6+=v4.y;}this.x=v5;this.y=v6;}

function flvS8(v1,v2,v3){//v1.0
var v4=(document.layers)?v1:v1.style;var v5=flvS5();eval("v4.left='"+v2+v5+"'";eval("v4.top='"+v3+v5+"'";}

function flvS5(){//v1.0
var v1=((parseInt(navigator.appVersion)&gt;4||navigator.userAgent.indexOf("MSIE"&gt;-1)&&(!window.opera))?"px":"";return v1;}

function flvS6(){//v1.0
var v1=(arguments.length&gt;0)?arguments[0]:window;if (v1.innerWidth){this.x=v1.pageXOffset;this.y=v1.pageYOffset;}else {v1=v1.document;if (v1.documentElement&&v1.documentElement.clientWidth){this.x=v1.documentElement.scrollLeft;this.y=v1.documentElement.scrollTop;}else if (v1.body){this.x=v1.body.scrollLeft;this.y=v1.body.scrollTop;}else {this.x=0;this.y=0;}}}
//--&gt;
&lt;/script&gt;
&lt;script language="JavaScript" type="text/JavaScript" src="dmxLayerGenie-sc.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body bgcolor="#5A7EDC" onLoad="dmxFLG1('btnWebsiteOn',0,0,'',0,'',0,0,0,0,0,0,0,0,0,0,0,0,0)" onResize="dmxFLG3();"&gt;
&lt;div id="btnExtranetOff" style="position:absolute; left:359px; top:136px; width:55px; height:54px; z-index:1;"&gt;
&lt;div id="btnExtranetOn" style="position:absolute; left:0px; top:0px; width:55px; height:54px; z-index:1;"&gt;
&lt;div id="btnExtranetHighlight" style="position:absolute; left:0px; top:0px; width:55px; height:54px; z-index:1; visibility: hidden;"&gt;&lt;a href="javascript:;"&gt;&lt;img src="images/btn_highlight.gif" width="55" height="54" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;img src="images/btn_extranet_on.gif" width="55" height="54"&gt;&lt;/div&gt;
&lt;img src="images/btn_extranet_off.gif" width="55" height="54"&gt;&lt;/div&gt;
&lt;div id="btnWebsiteOff" style="position:absolute; left:359px; top:44px; width:55px; height:54px; z-index:2;"&gt;
&lt;div id="btnWebsiteOn" style="position:absolute; left:0px; top:0px; width:55px; height:54px; z-index:2; visibility: hidden;"&gt;
&lt;div id="btnWebsiteHighlight" style="position:absolute; left:0px; top:0px; width:55px; height:54px; z-index:2; visibility: hidden;"&gt;&lt;a href="javascript:;"&gt;&lt;img src="images/btn_highlight.gif" width="55" height="54" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;img src="images/btn_extranet_on.gif" width="55" height="54"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Replied 21 Mar 2003 15:41:57
21 Mar 2003 15:41:57 Marja Ribbers-de Vroed replied:
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
yes I know, I posted it initially clean because I was not sure if you had any issues about posting your code. But here is the code with the show layer genie applied to the onload event. Although the hide layer behavious is still not visible when I select the image btn_extranet_on.gif inide of div "btnExtranetOn" to hide div "btnWebsiteOn".
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
Aha... I've reproduced the issue

The existence of the 'show' trigger on the &lt;body&gt; tag doesn't get recognised by DW properly.
Apply the 'Show' trigger to the image before trying to apply the 'Hide' trigger.

That should solve it. Let me know if it doesn't.

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/
Replied 21 Mar 2003 15:53:32
21 Mar 2003 15:53:32  ben replied:
nope still no joy <img src=../images/dmxzone/forum/icon_smile_sad.gif border=0 align=middle> I tried applying the show effect to the image and to the image and the body tag and I am able to get the hide layer genie option now but when I move over the image the target layer still remains visible. If I am not understanding the procedure would I be too much of a pain to ask you to post the correct generated code so that I can repaste it into my copy of DMX so I can see how it is working?

Sorry for the hastle
Replied 21 Mar 2003 16:26:12
21 Mar 2003 16:26:12 Marja Ribbers-de Vroed replied:
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
nope still no joy <img src=../images/dmxzone/forum/icon_smile_sad.gif border=0 align=middle> I tried applying the show effect to the image and to the image and the body tag and I am able to get the hide layer genie option now but when I move over the image the target layer still remains visible. If I am not understanding the procedure would I be too much of a pain to ask you to post the correct generated code so that I can repaste it into my copy of DMX so I can see how it is working?

Sorry for the hastle
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
No hastle.. that's what we're here for... to help you use our extensions.

I've put up a little demo at www.ribbers-zeewolde.nl/demo/layergenie/ben.htm
Analyse the source code of that page and see if that helps you.

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/
Replied 21 Mar 2003 16:28:07
21 Mar 2003 16:28:07  ben replied:
You are an absolute sweetie <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle> thanks

Reply to this topic