RotaFota Help Manual : Copy for Web

RotaFota makes it very easy for you to include your RotaFota images within your web pages. If you are able to edit the HTML of your webpages then this option will produce the simple snippet you'll need to paste in.

This facility can be accessed from Step 5. First upload then click the Copy to Clipboard button and then click the Copy for Webpage button.

Step 5 arrow Copy to clipboard button arrow Copy for web button

Having pressed the Copy for Webpage button you will have the HTML snippet on the clipboard, ready to paste into your webpage editor.

The snippet will look like this:

<img id='my-rotafota' src='http://www.my-isp/my-name/rotafota/my-rotafota/image.jpg' width='400' height='331' border='0'>
<script language='JavaScript' src='http://www.my-isp/my-name/rotafota/rotafota.js' type='text/javascript'></script>
<script language='JavaScript' type='text/javascript'>
	AddRotaFota('my-rotafota', 'http://www.my-isp/my-name/rotafota/my-rotafota/image_', 17, 100, 0, '.jpg');
</script>

You can see it consists of a simple <img> tag and two <script> tags. You should paste the HTML snippet wherever you want your RotaFota image to appear on your web page.

For those that are interested, here's what each part means:

The <img> tag

The <img> is entirely standard, but with the addition of an id='name-rotafota'. This name will match the name you gave when you saved the RotaFota image. The id is required for the Javascript know which image to work on.

The src='http://...' will be set to the initial image at the webspace location to which you uploaded the RotaFota image. When the webpage is viewed, this initial image is shown before the rest of the image set is loaded in the background by the rotafota.js Javascript. Because the rotafota.js loads the other images in the background, your webpage will display just as quickly as if there was just the one image, and your image will be ready to rotate straight away - even before all the images have finished downloading.

The rotafota.js Javascript

The first <script> tag references the rotafota.js Javascript which does all the clever stuff to make your RotaFota image rotate. The rotafota.js is included in the files uploaded to your webspace, and the web address will be pre-set accordingly in the HTML snippet.

You must only include the rotafota.js once per webpage. So, if you are putting more than one RotaFota image on your webpage then leave this <script> off for the second and subsequent images. There is a checkbox on the Copy to Clipboard window to assist with this.

The AddRotaFota() method

The second <script> tag is the Javascript to activate the <img> into a fully functioning RotaFota image. This consists of a single AddRotaFota() statement which has some pre-filled out parameters. You don't need to change any of these parameters, but if you'd like to know what they do then read on:

  1. The id of the image to work on. This must match the id in the <img> tag.
  2. The internet path and filestem for the image set.
  3. The number of images in the image set.
  4. The auto-rotation interval in milliseconds. Zero indicates no auto-rotation. When a non-zero value is given the RotaFota image will spin automatically when the webpage is viewed. The user can still click and drag to control it themselves. A value of 100 gives a good animation effect.
  5. The start image out of the image set. This will normally be zero to match the initial image in the <img> tag.
  6. The image set file suffix. Normally .jpg for JPEG images.

The last three parameters are optional. Frequently, only the first three parameters are needed.




Next Page: Copy for Ebay™

Related Topics: