Image-Runner - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Image-Runner

New dynamic and unique way to give your pictures more visual impact when entering the scene. First the script slices your image. Then it rushes those slices into their final position form the right to the left. No additional bandwidth needed. Very easy to configure. Made for IE5x.


Insert into <HEAD>
<script> <!-- Beginning of JavaScript - // CREDITS: // Image-Runner 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/10/2000 // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a link 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-zone of your HTML-file. // The second script-block should be inside the body-zone. // 2. Put your image in the same directory as the HTML-file. // 3. Configure the variables below: // The width of your image (pixels) var imgwidth=502 // The height of your image (pixels) var imgheight=273 // The URL of the sliced image var imgurl="ny9200.jpg" // Final horizontal position of the image: distance to the left margin of the window var x_finalpos=5 // Final vertical position of the image: distance to the top margin of the window var y_finalpos=5 // Number of slices var imgslices=20 // Speed of slices var step=50 var pause=20 // Do not change the variables below var marginright var width_slice=Math.floor(imgwidth/imgslices) var cliptop=0 var clipbottom=imgheight var clipleft=0 var clipright=width_slice var spannummer=0 var spannrbefore=0 function initiate() { if (document.all) { moveslices_IE() } } function moveslices_IE() { var thisspan=eval("document.all.span"+spannummer+".style") if (thisspan.posLeft>x_finalpos-width_slice) { thisspan.posLeft-=step var timer=setTimeout("moveslices_IE()",pause) } else if (spannummer<imgslices-1) { clearTimeout(timer) thisspan.posLeft=x_finalpos spannummer++ var timer=setTimeout("moveslices_IE()",pause) } else { thisspan.posLeft=x_finalpos clearTimeout(timer) } } // - End of JavaScript - --> </script>

Insert into <BODY>
<body onLoad="initiate()"> <script> <!-- Beginning of JavaScript - for (i=0;i<=imgslices-1;i++) { marginright=screen.width+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>") clipleft+=width_slice clipright+=width_slice } // - End of JavaScript - --> </script>

Other Options