Provided by http://thexbanners.com 1. First create some small .gif images for the mouse trail (they need to be square 11x11) you don't need to create seperate images if the image is the same. The codes below assume the images are 11x11 pixels, explanation is provided below if you are using a different size. 2. First download the moustrail.js file: Click Here to download. Once you have download the file, you will need to set the number of images (nDots) you will have following the mouse +1; example you have 5 images, set nDots var to 6. There are also several other variables that can be modified, works best if you open the file with an HTML editor. If you are using an gif image that is not 11x11, you will need to modify the DOTSIZE accordingly. 3. Paste the following code into the HTML module, modify the location of the mousetrail.js if necessary. <script type="text/javascript">
/*****************************
* Provided by http://thexbanners.com
Create external Js in main page
******************************/
var p = parent.document;
var page = p.body;
var script = p.createElement('script');
script.src = '/Documents/mousetrail.js';
script.type = 'text/javascript';
page.appendChild(script); </script> 4. Copy the code below into notepad or an HTML editor for modification. Variables that need to be changed are image source, height/widht of the image, and number of images, add or remove <div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11;"> <img src="/images/image.gif" height="11" width="11" /></div> as needed, numbering the id="dot#" starting from 0. <div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11;"> <img src="/images/image1.gif" height="11" width="11" /> </div> <div id="dot1" style="position: absolute; visibility: hidden; height: 11; width: 11;"> <img src="/images/image2.gif" height="11" width="11" /> </div> <div id="dot2" style="position: absolute; visibility: hidden; height: 11; width: 11;"> <img src="/images/image3.gif" height="11" width="11" /> </div> <div id="dot3" style="position: absolute; visibility: hidden; height: 11; width: 11;"> <img src="/images/image4.gif" height="11" width="11" /> </div> <div id="dot4" style="position: absolute; visibility: hidden; height: 11; width: 11;"> <img src="/images/image5.gif" height="11" width="11" /> </div> <div id="dot5" style="position: absolute; visibility: hidden; height: 11; width: 11;"> <img src="/images/image6.gif" height="11" width="11" /> </div> <div id="dot6" style="position: absolute; visibility: hidden; height: 11; width: 11;"> <img src="/images/image7.gif" height="11" width="11" /> </div> 5. Once you have modified the code paste it directly into the page editor (not the HTML Module), once pasted you should notice your images vertically lined up on the page. It would be recommend to paste the code into 1x1 table, so you can easily remove the code if needed. |