How do they make it?

**newest** · 01-27-2009, 11:49 PM

I don't even know what it is called. I am looking for a script that just like www.ask.com.

When we peel the left hand side of the top, it will open a selection box. Any help will be appreciated. Thanks.

**Nile** · 01-28-2009, 12:55 AM

Something like this?:

Code:

<html>
<head>
<title>Peel</title>
<style type="text/css">
* { margin: 0; padding: 0; }
#block {
  border: 5px solid #27B717;
  width: 200px;
  height: 60px;
  background: #FFF;
  font-size: 14px;
  font-family: arial, verdana;
  margin: 500px;
  padding-top: 40px;
  font-weight: bold;
  text-align: center;
  visibility: hidden;
}
</style>
<script type="text/javascript">
var $ = function(el){ return document.getElementById(el); }
var visible = function(){
  for(i=0;i<arguments.length;i++){
    $(arguments[i]).style.visibility = ($(arguments[i]).style.visibility == 'visible') ? 'hidden' : 'visible';
  }
};
</script>
</head>
<body>
<img src="http://www.driedfruitguy.com/organic/images/banana1.jpg" height="100px" onclick="visible('block');"/>
<div id="block">
Peeled!
</div>
</body>
</html>

**newest** · 01-28-2009, 03:22 AM

Originally Posted by Nile

Something like this?:

Code:

<html>
<head>
<title>Peel</title>
<style type="text/css">
* { margin: 0; padding: 0; }
#block {
  border: 5px solid #27B717;
  width: 200px;
  height: 60px;
  background: #FFF;
  font-size: 14px;
  font-family: arial, verdana;
  margin: 500px;
  padding-top: 40px;
  font-weight: bold;
  text-align: center;
  visibility: hidden;
}
</style>
<script type="text/javascript">
var $ = function(el){ return document.getElementById(el); }
var visible = function(){
  for(i=0;i<arguments.length;i++){
    $(arguments[i]).style.visibility = ($(arguments[i]).style.visibility == 'visible') ? 'hidden' : 'visible';
  }
};
</script>
</head>
<body>
<img src="http://www.driedfruitguy.com/organic/images/banana1.jpg" height="100px" onclick="visible('block');"/>
<div id="block">
Peeled!
</div>
</body>
</html>

Thanks for your reply.
I think some codes may be missing here. I want when I click on an image, the image will change to another image, and open a box. Just like the www.ask.com. Thanks

**Nile** · 01-28-2009, 03:28 AM

I made a peal script like the one displayed on ask - do you want the style switcher one? If so, I'm pretty sure this will be good for you.

**newest** · 01-28-2009, 05:40 PM

Originally Posted by Nile

I made a peal script like the one displayed on ask - do you want the style switcher one? If so, I'm pretty sure this will be good for you.

Thank you very much. That is what I want. Thanks.

**Nile** · 01-28-2009, 10:28 PM

Ok, I'm glad to help you. If you want exactly what ask.com has - use my first script, and in the "box" div at the style switcher.

Your welcome.

**newest** · 01-28-2009, 10:51 PM

Thanks a lot

**amazingip** · 01-29-2009, 12:46 AM

This is the kind of “Peel” script that I want to know the code: http://adbux.org/
This is a cool effect, a real peel effect, not just a box. Anyone kindly has the correct codes? I’ll appreciate it a lot. Thanks in advance.

**Nile** · 01-29-2009, 01:02 PM

That uses flash animation, and an image... I can't tell you how to make that.

But you can "Try" flash and mess around with it to get that effect... Although flash can sometimes take years to learn.

**Medyman** · 01-29-2009, 11:47 PM

Originally Posted by Nile

Although flash can sometimes take years to learn.

That's not true. You can say that about anything. With the proper commitment, you can learn ActionScript in a reasonable time. It's no harder to learn that JavaScript.

In any case, this doesn't require much ActionScript at all.

If you want to just buy something or if you don't have Adobe Flash, Flashden has a couple of these that are pretty good. You can also Google for "page peel" or something similar and come up with some good tutorials.