Stillcetek » Javascript http://www.stillcetek.com Blog Lukman Stillcetek, Delphi Tutorial, Php Tutorial, Article CSS, Mysql, Javascript Tutorial, MSSQL Server, Linux Ubuntu Fri, 23 Jul 2010 06:50:02 +0000 http://wordpress.org/?v=2.8 en hourly 1 HTML Rotator With Prototype & Scriptaculous Effect http://www.stillcetek.com/2007-12-23/html-rotator-with-prototype-scriptaculous-effect.html http://www.stillcetek.com/2007-12-23/html-rotator-with-prototype-scriptaculous-effect.html#comments Sun, 23 Dec 2007 04:03:34 +0000 Lukman http://www.stillcetek.com/2007-12-23/html-rotator-with-prototype-scriptaculous-effect.html 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>
]]> http://www.stillcetek.com/2007-12-23/html-rotator-with-prototype-scriptaculous-effect.html/feed 1 HTML Rotator http://www.stillcetek.com/2007-12-23/html-rotator.html http://www.stillcetek.com/2007-12-23/html-rotator.html#comments Sun, 23 Dec 2007 03:46:56 +0000 Lukman http://www.stillcetek.com/2007-12-23/html-rotator.html 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>
]]> http://www.stillcetek.com/2007-12-23/html-rotator.html/feed 1