Full version: jsB@nk » Image » ImageScratcher: real scratching-effect onmouseover
URL: https://www.javascriptbank.com/imagescratcher.html
This rollover-script simulates an cool scratching-effect. Just move your mouse over the coverimage and a second image will appear from underneath (Netscape-users will see a simple imageswapping effect instead). Great for online-lotteries, draws, guessing games or just for fun. Easy to configure.
Full version: jsB@nk » Image » ImageScratcher: real scratching-effect onmouseover
URL: https://www.javascriptbank.com/imagescratcher.html
<STYLE>.spanstyle {LEFT: -5000px; POSITION: absolute}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT><!-- Beginning of JavaScript -// ImageScratcher// CONFIGURATION:// 1. Save this file with exception of the DIV-Block with the id 'deletethistext'. // 2.Put the image 'coverimage83.gif' and the image 'hiddenimage83.jpg' // into the same directory as the HTML-file. // 3.Configure the variables of the script-block in the head-section. // 4.The script-block in the body-section requires no configuration.// 5. Configure the variables below:// The width of your image (pixels)var imgwidth=160// The height of your image (pixels)var imgheight=240// The name of the coverimage and hidden image. var coverimage="photo3.jpg"var hiddenimage="photo4.jpg"// This block will preload your images. Do not edit this block.img1=new Image()img1.src=coverimageimg2=new Image()img2.src=hiddenimage// Add an URL to the hidden imagevar imgurl=new Array()urlhiddenimage="http://javascriptbank.com"// Final horizontal position of the image: distance to the left margin of the windowvar x_finalpos=195// Final vertical position of the image: distance to the top margin of the windowvar y_finalpos=20// Number of sliced cells. A high value will slow down the scratching-effect.var x_slices=8// Number of sliced rows. A high value will slow down the scratching-effect.var y_slices=8// Do not change the variables belowvar xy_slices=x_slices*y_slicesvar width_slice=Math.floor(imgwidth/x_slices)var height_slice=Math.floor(imgheight/y_slices)var cliptop=0var clipbottom=height_slicevar clipleft=0var clipright=width_slicevar spancounter=0function checkbrowser() {if (document.all) { initiate() }}function initiate() { spancounter=0 for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style")thisspan.posLeft=x_finalposthisspan.posTop=y_finalpos thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"clipleft+=width_slice clipright+=width_slice spancounter++} clipleft=0 clipright=width_slice cliptop+=height_slice clipbottom+=height_slice}for (i=0;i<=xy_slices-1;i++) {var thisspan=eval("span"+i)thisspan.innerHTML="<a href='#' onMouseOver='scratchimg("+i+")'><img src='"+coverimage+"' border='0'></a>"}}function scratchimg(thispartofimage) {var thisspan=eval("span"+thispartofimage)thisspan.innerHTML="<a href='"+urlhiddenimage+"' target='_blank'><img src='"+hiddenimage+"' border='0'></a>"}function scratchnn() {document.imgcontainer1.document.write("<a href='"+urlhiddenimage+"'><img src='"+hiddenimage+"' border='0' target='_blank'></a>")document.imgcontainer1.document.close()}// - End of JavaScript - --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=checkbrowser()><SCRIPT><!-- Beginning of JavaScript -if (document.all) {for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) { document.write("<div id='span"+spancounter+"' class='spanstyle' border='0'>") document.write("</div>")spancounter++}}}if (document.layers) {document.write("<div id='imgcontainer1' class='spanstyle'>")document.write("<a href='#' onMouseOver='scratchnn()'><img src='"+coverimage+"' border='0'></a></div>")document.close()document.imgcontainer1.left=x_finalposdocument.imgcontainer1.top=y_finalpos}// - End of JavaScript - --></SCRIPT></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->