Cut & Paste Simple Image Trail

Home / Free JavaScripts / Mouse Cursor effects / Here

Cut & Paste Simple Image Trail

Credit: JavaScript Kit

Description: Use this script to add a simple image trail to your webpage. A single image follows the mouse around, and is configurable in the following ways:

Image trail can be set to disappear after x seconds (or always visible)
The trail's x and y offsets can be explicitly set. This allows you, for example, to set the trail to be further away from the mouse than by default.
Image trail automatically disappears when it's close to the document's horizontal and vertical edges, so no ugly browser scrollbars appears.

This script works in both IE4+ and NS6+. Enjoy!

Example: Move your cursor!

Directions

Step 1: Simply insert the below script into the <BODY> section of your page:

<script type="text/javascript"> /* Simple Image Trail script- By JavaScriptKit.com Visit http://www.javascriptkit.com for this script and more This notice must stay intact */ var trailimage=["test.gif", 100, 99] //image path, plus width and height var offsetfrommouse=[10,-20] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset var displayduration=0 //duration in seconds image should remain visible. 0 for always. if (document.getElementById || document.all) document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>') function gettrailobj(){ if (document.getElementById) return document.getElementById("trailimageid").style else if (document.all) return document.all.trailimagid.style } function truebody(){ return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function hidetrail(){ gettrailobj().visibility="hidden" document.onmousemove="" } function followmouse(e){ var xcoord=offsetfrommouse[0] var ycoord=offsetfrommouse[1] if (typeof e != "undefined"){ xcoord+=e.pageX ycoord+=e.pageY } else if (typeof window.event !="undefined"){ xcoord+=truebody().scrollLeft+event.clientX ycoord+=truebody().scrollTop+event.clientY } var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15 var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight) if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight) gettrailobj().display="none" else gettrailobj().display="" gettrailobj().left=xcoord+"px" gettrailobj().top=ycoord+"px" } document.onmousemove=followmouse if (displayduration>0) setTimeout("hidetrail()", displayduration*1000) </script> <p align="left">This free script provided by<br /> <a href="http://javascriptkit.com">JavaScript Kit</a></p>

Be sure to customize the three variables inside script.

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info