This effect is billed as being similar to what happens to the picture when an old television set is turned off, so let's work that into our example.
Add the following elements to the
<body>
element of the template file:<div id="tv"> <div id="bg"></div> <div id="static"></div> </div>
Then, use the following simple script at the bottom of the page:
$("#tv").click(function() { $("#static").effect("clip"); });
Save this file as
clip.html
. The stylesheet for this example is as follows:#tv { width:300px; height:269px; position:relative; cursor:pointer; background:url(../img/tv.png) no-repeat 0 0; } #bg { width:220px; height:180px; position:absolute; left:42px; top:30px; z-index:-2; background-color:#000; } #static { width:216px; height:178px; position:absolute; left:44px; top:31px; z-index:-1; background:url(../img/static.gif) no-repeat 0 0; }