Double ImageSlicer - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Double ImageSlicer

The successor to ImageRunner! ImageSlicer slices your image into small stripes and rushes them from both sides of your browser-winow to their final position. The effect ist unique! No additional bandwidth needed. Very easy to configure.


Insert into <HEAD>
<script> <!-- Beginning of JavaScript - // CREDITS: // ImageSlicer by Urs Dudli and Peter Gehrig // Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.ch. // info@24fun.ch // 2/16/2000 // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a hyperlink to http://www.24fun.ch on the webpage // where this script will be running. // CONFIGURATION: // You need only one image besides the script. You don't have // to slice the image yourself! The script will do this job for you. // Configure the script as follows: // 1. Copy and paste the two script-blocks into your HTML-file: // The first script-block should be inside the head-section of your HTML-file. // The second script-block should be inside the body-section. // 2. Put your image in the same directory as the HTML-file . // 3. Insert onLoad="initiate()" right into the body-tag. // 4. Configure the variables below: // The width of your image (pixels) var imgwidth=200 // The height of your image (pixels) var imgheight=138 // The URL of the sliced image var imgurl="imageslicer2.jpg" // Final horizontal position of the image: distance to the left margin of the window (pixels) // IMPORTANT: // if you want to center the image in the middle of the browser-window then write -1. // If you want to put the image on a absolute position // then write the number (for instance 223). var x_finalpos=-1 // Final vertical position of the image: distance to the top margin of the window var y_finalpos=20 // Total number of slices var imgslices=16 // Speed of horizontal gliding var step=40 var pause=10 // Do not edit the variables below this line var x_rightspans=0 var x_leftspans=0 var marginright var marginleft var height_slice=Math.floor(imgheight/imgslices) var cliptop=0 var clipbottom=cliptop+height_slice var clipleft=0 var clipright=imgwidth var spannummer=0 var spannrbefore=0 function initiate() { if (x_finalpos==-1) { x_finalpos=Math.floor(document.body.clientWidth/2)-Math.floor(imgwidth/2) } if (document.all) { moveslices_IE() } } function moveslices_IE() { if (x_rightspans==0 \|\| x_leftspans==0) { if (x_rightspans==0) { for (i=0;i<=imgslices-1;i+=2) { var thisspan=eval("document.all.span"+i+".style") thisspan.posLeft-=step } if (thisspan.posLeft<=x_finalpos) { x_rightspans=1 for (i=0;i<=imgslices-1;i+=2) { var thisspan=eval("document.all.span"+i+".style") thisspan.posLeft=x_finalpos } } } if (x_leftspans==0) { for (i=1;i<=imgslices-1;i+=2) { var thisspan=eval("document.all.span"+i+".style") thisspan.posLeft+=step } if (thisspan.posLeft>=x_finalpos) { x_leftspans=1 for (i=1;i<=imgslices-1;i+=2) { var thisspan=eval("document.all.span"+i+".style") thisspan.posLeft=x_finalpos } } } var timer=setTimeout("moveslices_IE()",pause) } else { clearTimeout(timer) } } // - End of JavaScript - --> </script>

Insert into <BODY>
<body onLoad="initiate()"> <script> <!-- Beginning of JavaScript - for (i=0;i<=imgslices-1;i+=2) { marginright=document.body.clientWidth+50 document.write("<span id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginright+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>") document.write("<img src='"+imgurl+"'>") document.write("</span>") cliptop+=2height_slice clipbottom+=2height_slice } cliptop=height_slice clipbottom=2height_slice for (i=1;i<=imgslices-1;i+=2) { marginleft=-imgwidth-50 document.write("<span id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginleft+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>") document.write("<img src='"+imgurl+"'>") document.write("</span>") cliptop+=2height_slice clipbottom+=2*height_slice } // - End of JavaScript - --> </script>

Other Options