[belgirl]

HI everyone. I am using a peeling corner on my webpage--the script can be found here:

How to create a peeling corner on your website that can contain advertations or anything else.

However, I want the peeling corner to appear only if the user moves his mouse to attempt to hit the back button or close out the site. Anyone have any ideas on how this can be done? Below is the .<acronym title="JavaScript"><acronym title="JavaScript"><acronym title="JavaScript"><acronym title="JavaScript">js</acronym></acronym></acronym></acronym> code--thanks!

var jaaspeel = new Object();

jaaspeel.ad_url = escape('http://www.mydomain.com/');

jaaspeel.small_path = '/peel/small.swf';
jaaspeel.small_image = escape('/peel/small.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = '/peel/large.swf';
jaaspeel.big_image = escape('/peel/large.jpg');
jaaspeel.big_width = '650';
jaaspeel.big_height = '650';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;

function sizeup987(){
	document.getElementById('jcornerBig').style.top = '0px';
	document.getElementById('jcornerSmall').style.top = '-1000px';
}

function sizedown987(){
	document.getElementById("jcornerSmall").style.top = "0px";
	document.getElementById("jcornerBig").style.top = "-1000px";
}

jaaspeel.putObjects = function () {
// <jcornerSmall>
document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerSmallObject" width="'+jaaspeel.small_width+'" height="'+jaaspeel.small_height+'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.small_path +'?'+ jaaspeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+jaaspeel.small_params+'"/>');
// embed
document.write('<embed src="'+ jaaspeel.small_path + '?' + jaaspeel.small_params +'" name="jcornerSmallObject" wmode="transparent" quality="high" width="'+ jaaspeel.small_width +'" height="'+ jaaspeel.small_height +'" flashvars="'+ jaaspeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
document.write('</script>');
// </jcornerSmall>
// <jcornerBig>
document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerBigObject" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.big_path +'?'+ jaaspeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ jaaspeel.big_params +'"/>');
// embed
document.write('<embed src="'+ jaaspeel.big_path + '?' + jaaspeel.big_params +'" id="jcornerBigEmbed" name="jcornerBigObject" wmode="transparent" quality="high" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'" flashvars="'+ jaaspeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
// </jcornerBig>
setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000);
}
jaaspeel.putObjects();// JavaScript Document

[matthewjumpsoffbuildings]

im pretty sure it is impossible to trigger events when the user hovers over the browsers back or close buttons...

[End User]

Originally Posted by matthewjumpsoffbuildings

im pretty sure it is impossible to trigger events when the user hovers over the browsers back or close buttons...

That's correct, but you can trigger an event when they leave the page using onUnload();

[belgirl]

Oh really? Then how do they do it on this page?

trafficregenerator.com

[End User]

On that page they sense the position of your cursor, and when your cursor goes off the top of the page, it fires some javascript. It doesn't matter if your cursor is heading for the Back button or not, if it goes off the top of the screen, it triggers.

[belgirl]

Exactly. But their javascript is encrypted. So back to the original question: does anyone know of a javascript that can do this?

[End User]

Originally Posted by belgirl

Exactly. But their javascript is encrypted. So back to the original question: does anyone know of a javascript that can do this?

It would be pretty easy to write your own:

<html>
<head>
<script type="text/javascript">
function showPos(){
    var mp = 'X=' + window.event.clientX +  ' Y=' + window.event.clientY ;
    document.getElementById('mousePos').innerText = mp;

}  
</script>
</head>
<body onmousemove=showPos()>
<div id="mousePos"></div>
</body></html>

When 'Y' goes to '0', trigger your event. Here's a tutorial and code for creating the "corner peel" effect:

http://www.marcofolio.net/webdesign/...r_website.html

[belgirl]

Thanks but I already know how to do a peeling corner--the script I posted is from that website. Please read my original post.

Originally Posted by End User

It would be pretty easy to write your own:

<html>
<head>
<script type="text/javascript">
function showPos(){
    var mp = 'X=' + window.event.clientX +  ' Y=' + window.event.clientY ;
    document.getElementById('mousePos').innerText = mp;

}  
</script>
</head>
<body onmousemove=showPos()>
<div id="mousePos"></div>
</body></html>

When 'Y' goes to '0', trigger your event. Here's a tutorial and code for creating the "corner peel" effect:

How to create a peeling corner on your website that can contain advertations or anything else.

[End User]

Originally Posted by belgirl

Thanks but I already know how to do a peeling corner--the script I posted is from that website. Please read my original post.

I did. Here's what you asked: "...I want the peeling corner to appear only if the user moves his mouse to attempt to hit the back button or close out the site."

- You were told that it's not possible to detect the cursor hovering over the Back button. That's true, there's just no way to do that.

- You were also told that you could use onUnload() to trigger an event when the user begins to leave the current page, such as with the back button.

- I provided you code that would replicate the "trigger" effect on the trafficregenerator.com site that you mentioned, i.e. when a user moves their cursor off the page towards the top.

What more do you you want, specifically?

[belgirl]

First of all, to say "Here's a tutorial and code for creating the "corner peel" effect: http://www.marcofolio.net/webdesign/...r_website.html" is not reading my original post as I already referenced this page AND the actual code in my first post. To state that is repetitive and unnecessary.

Secondly my original post states "ATTEMPT to hit the back button or close out the site." Not hover. My example of trafficgenerator.com shows this example.

Thirdly, to state "It would be pretty easy to write your own:" is also an unnecessary comment. If it were easy or if I knew how to do it, I wouldn't be asking the question on the forum.

Lastly "onUnload" isn't working with this particular script and nor is the script you provided. If you are able to further provide insight, that's fine. Otherwise perhaps someone else who has programming knowledge can help.

Originally Posted by End User

I did. Here's what you asked: "...I want the peeling corner to appear only if the user moves his mouse to attempt to hit the back button or close out the site."

- You were told that it's not possible to detect the cursor hovering over the Back button. That's true, there's just no way to do that.

- You were also told that you could use onUnload() to trigger an event when the user begins to leave the current page, such as with the back button.

- I provided you code that would replicate the "trigger" effect on the trafficregenerator.com site that you mentioned, i.e. when a user moves their cursor off the page towards the top.

What more do you you want, specifically?