Archive for category Javascript

HTML Rotator With Prototype & Scriptaculous Effect

Posted by Lukman in Javascript on December 23rd, 2007

Melanjutkan article HTML Rotator, yang ini akan lebih menarik karena diberi effect fade saat slidenya.

Untuk effect gunakan prototype.js dan Scriptaculous

Ok See code below :

<html>
<head><title>Cetek</title>
<style type="text/css">
img{
border:none;
}
</style>

<script src="js/scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">

var content = new Array('<img src="images/jseyes.gif">','<img src="images/icon_ots.png">','<img src="images/image1.png">');

var links = new Array('http://www.google.com','http://www.stillcetek.com','http://www.yahoo.com');

var contentStart = 0;
var contentCount = content.length;
var bannerSpeed  = 10;
var bannerDuration  = 5.0;

function bannerRotator() {
var bannerRotasi = document.getElementById("bannerRotasi");
contentStart++;
if (contentStart == contentCount) {
contentStart = 0;
}
if(document.all){
bannerRotasi.innerHTML = content[contentStart];
} else{
bannerRotasi.innerHTML = content[contentStart];
}
bannerRotasi.href=links[contentStart];

$('frame').hide();
Effect.Appear('frame',{duration:  bannerDuration});
setTimeout('bannerRotator()',bannerSpeed * 1000);
}

</script>
</head>
<body>
<div id="frame" background-color:#FF0055">
<a href="#" target="_blank" name="bannerRotasi" id="bannerRotasi"></a>
<script type  ="text/javascript">
bannerRotator()
</script>
</div>

</body>
</html>

1 Comment

HTML Rotator

Posted by Lukman in Javascript on December 23rd, 2007

Kode sederhana HTML rotator, bisa digunakan sebagai banner rotator iklan, slideshow fhotos, atau text rotator dengan format-format html. Nice.. get the code below:

<html>
<head><title>Cetek</title>
<style type="text/css">
img{
border:none;
}
</style>

<script type="text/javascript">var content = new Array('<b>Test Link1</b> Bold','Test Link2 <i> Format HTML</i>','<img src="images/link.gif">');

var links = new Array('http://www.google.com','http://www.stillcetek.com','http://www.yahoo.com');

var contentStart = 0;
var contentCount = content.length;
var bannerSpeed  = 10;

function bannerRotator() {
var bannerRotasi = document.getElementById("bannerRotasi");
contentStart++;
if (contentStart == contentCount) {
contentStart = 0;
}
if(document.all){
bannerRotasi.innerHTML = content[contentStart];
} else{
bannerRotasi.innerHTML = content[contentStart];
}

bannerRotasi.href=links[contentStart];
setTimeout('bannerRotator()',bannerSpeed * 1000);
}

</script>
</head>
<body>
<div id="frame" background-color:#FF0055">
<a href="#" target="_blank" name="bannerRotasi" id="bannerRotasi"></a>
<script type  ="text/javascript">
bannerRotator()
</script>

</div>
</body>
</html>

1 Comment