MySpaza - How To



PHP / JavaScript HTML Rotator (Banner Rotator)
html rotator rotate images banner adverts php javascript mysql

Added: 2008-04-13 20:27:25

I recently had the need to rotate some text in a cms site, I used this script, based on a PHP array and some Javascript functions, for the CMS I adapted the script to use a mysql_fetch_array to get the results, in the following script I have shown a php array()

<script language="JavaScript1.2">
/*
Rotating HTML Block using PHP and JavaScript - Based on a Modified version of JavaScript by Narayan Chand Thakur "
http://ncthakur.itgo.com/"
PHP aspect developed by R.Sussex -
http://myspaza.co.uk and http://designbysilverside.co.uk
This may be used freely as long as this message is intact.
*/
<?
// first create some PHP variables for script config

 // delay in seconds
 $delay = 3;

 // create an array of html (Note: this could also be done by using a mysql_fetch_array();
 $html = array('<h1>HTML Block 1</h1>',
     '<a href="
http://myspaza.co.uk">A Html Link</a>',
     '<img src="
http://myspaza.co.uk/img/myspaza_how_to_logo.gif" alt="MySpaza Logo" />',
     '<h1>HTML Block 4</h1>');

?>


 var delay =<? print $delay; ?>*1000;
 var item=new Array()
<?
// loop throug $html[] to get values
 $i=0;
 $count=count($html);
 while($i<$count) {
// create the javascript variables
 
 // create content and add some slashes so javascript doesnt complain
 $content = addslashes($html[$i]);
 
 print 'item['.$i.']="'.$content.'"
 ';
 
$i++;
} ?>

 var current=0
 
 var ns6=document.getElementById&&!document.all

 function changeItem(){
  if(document.layers){
   document.layer1.document.write(item[current])
   document.layer1.document.close()
  }
  if(ns6)document.getElementById("div1").innerHTML=item[current]
  {
   if(document.all){
    div1.innerHTML=item[current]
   }
  }
   if (current==<?=$count; ?>) current=0
   else current++
   setTimeout("changeItem()",delay)
 }

 window.onload=changeItem

</script>

<layer id="layer1" left="210" top="250"></layer>
<div id="div1" style="height:200px;">
</div>

Download Source File

Hope you find this useful, my server is running PHP5 however this script will do just fine on PHP4.

Please feel free to make any comments below, or contact me if you need any assistance.




Add a comment to this post
Email confirmation is required for each post

Name:
Email:
Comment:
 

Comments from other users:




Copyright MySpaza.Co.Uk - 2008