aa' Gue share juga y
[quote][align=center][b]floating slideshow picture[/b]

[/align][/quote]
masukan d tag body

[spoiler]
<BODY onLoad="runSlideShow()">
<!-- Edit the HTML: Set first image path and size //-->
<div id="FloatSlideShow" style="position:absolute;z-index:1000000">
<a href="http://www.codebrain.com" target=_new>
<img border=0 src="float1_trans.gif" name='SlideShow' width=200 height=200></a>
</div>
<!-- End of editable HTML //-->
<script>
// You *must* add onload="runSlideShow()" to the <body> tag
// of the page.
// In the section marked Edit the HTML, above, remember to
// set the path and size for the first image.
// =======================================
// Set the following variables
// =======================================
// Set slideShowSpeed (milliseconds):
var slideShowSpeed = 3000
// Duration of crossfade (seconds) for IE:
var crossFadeDuration = 3
// Set the positioning variables, below:
// Negative numbers are relative to right (whereX) or bottom (whereY)
// Positive numbers are relative to left (whereX) or (whereY) top
// Experiment with values to get positioning exact, and allow
// for the dimensions of the image in the positioning
var whereX = 140;
var whereY = -233;
// Specify the image files:
var Pic = new Array() // don't touch this!
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '[b]url gambar.gif[/b]'
Pic[1] = '[b]url gambar.gif[/b]'
Pic[2] = '[b]url gambar.gif[/b]'
Pic[3] = '[b]url gambar.gif[/b]'
Pic[4] = '[b]url gambar.gif[/b]'
// =======================================
// Do not edit *anything* below this line!
// =======================================
var nn=(navigator.appName.indexOf("Netscape")!=-1);
var t;var j=0;var p=Pic.length;var preLoad=new Array();
for (i=0;i<p;i++){preLoad[i]=new Image();preLoad[i].src = Pic[i];}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();}
if (document.all || document.getElementById){document.images.SlideShow.src = preLoad[j].src;}else{
document.FloatSlideShow.document.images["SlideShow"].src = preLoad[j].src;}
if (document.all){document.images.SlideShow.filters.blendTrans.Play();}
j=j+1;if (j>(p-1))j=0;t=setTimeout('runSlideShow()', slideShowSpeed);}
var dD=document,dH=dD.phpl,dB=dD.body,px=dD.layers?'':'px';
function floatSS(iX,iY,id){
var L=dD.getElementById?dD.getElementById(id)

D.all?dD.all[id]

D.layers[id];
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fss=function(){var pX, pY;
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY);
setTimeout(this.id+'O.Fss()',33);};return L;}
floatSS(whereX,whereY,'FloatSlideShow').Fss();
</script>
<!-- END FLOATING SLIDE SHOW CODE //-->
<!-- Script Size: 3.80 KB -->
[/spoiler]
[quote][align=center][b]scroller image[/b]

[/align][/quote]
masi taro dalam tag body [spoiler]<BODY onLoad="start()">
<div id="point1" STYLE="position:absolute;visibility:visible;">
<img src="[b]url gmbar[/b]" width=150 height=48 border=0>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var xPos = 20;
var step = 1;
var delay = 30;
var yPos = 0;
var height = 0;
var offset = 0;
var yon = 0;
var name = navigator.appName;
if (name == "Microsoft Internet Explorer") {
yPos = document.body.clientHeight;
point1.style.top = yPos;
}
else {
yPos = window.innerHeight;
document.point1.pageY = yPos;
document.point1.visibility = "hidden";
}
function changePos() {
if (yon == 0) {
yPos = yPos - step;
}
else {
yPos = yPos + step;
}
if (name == "Microsoft Internet Explorer") {
height = document.body.clientHeight;
offset = point1.offsetHeight;
}
else {
height = window.innerHeight;
offset = document.point1.clip.height;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - offset)) {
yon = 0;
yPos = (height - offset);
}
if (name == "Microsoft Internet Explorer") {
point1.style.left = xPos;
point1.style.top = yPos + document.body.scrollTop;
}
else {
document.point1.pageX = xPos;
document.point1.pageY = yPos + window.pageYOffset;
}
}
function start()
{
if (name != "Microsoft Internet Explorer") {
document.point1.visibility = "visible";
}
loopfunc();
}
function loopfunc()
{
changePos();
setTimeout('loopfunc()',delay);
}
// End -->
</script>
<!-- Script Size: 2.10 KB -->
[/spoiler]
[quote][align=center][b]Messagebox with Background Fade Effect[/b]

[/align][/quote]
masi masukan dalam tag body y [spoiler]<SCRIPT>
// CREDITS:
// Messagebox with fadeing Background
// By Peter Gehrig
// Copyright (c) 2004 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at
http://www.freewebknowledge.com/jscodes.php
// set your messages. Add as many as you like (you may add additional HTML-tags)
var text=new Array()
text[0]="[b]Thank you for visiting[/b]"
text[1]="[b]i love you[/b]"
text[2]="[b]Also we invite you to test the speed of your Browser. <b>Just click here.</b>[/b]"
// set the corresponding links
// If you don't want to link a message just add a "#" instead of an URL
var textlink=new Array()
textlink[0]="[b]
http://theftalk.com/?r=98473[/b] "
textlink[1]="#"
textlink[2]="[b]
http://profiles.friendster.com/comments.php?uid=55094706[/b]"
// set the corresponding targets
// Acceptable values are "_blank", "_self", "_top" or the name of any frame
var texttarget=new Array()
texttarget[0]="_blank"
texttarget[1]="_self"
texttarget[2]="_top"
// set the font of the messages
var textfont="[b]Arial[/b]"
// set the font-color of the messages
var textfontcolor="[b]#FFFFFF[/b]"
// set the rollover-fontcolor of the messages
var textfontcolorrollover="[b]#FF0000[/b]"
// set the font-size of the messages (CSS-values)
var textfontsize=9
// set the font-size for Netscape 4x (HTML-values)
var textfontsizeHTML=2
// set the font backgroundcolor of the textbox
var textbgcolor="[b]#000000[/b]"
// set the textweight (normal or bold)
var textweight="[b]normal[/b]"
// set the fontstyle (normal or italic)
var textitalic="[b]normal[/b]"
// set the width of the textbox (pixels)
var textwidth=240
// set the height of the textbox (pixels)
var textheight=60
// set the pause (seconds)
var textpause=2
// set the width of the border
var textborder=2
// set the color of the border
var textbordercolor="[b]#FF0000[/b]"
// set the horizontal alignment of the messages (center, left, right)
var textalign="center"
// set the vertival alignment of the messages (middle, top, bottom)
var textvalign="middle"
// do not edit below this line
var textdecoration="none"
var textweightA="<b>"
var textweightB="</b>"
var textitalicA=""
var textitalicB=""
var transparency=100
var transparencystep=2
var x_pos=0
var y_pos=0
var i_text=0
var textsplit=""
var i_textsplit=0
var i_mark=0
var tickercontent
var pausefade=30
textpause*=1000
var oneloopfinished=false
var browserinfos=navigator.userAgent
var ie=document.all&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)
var browserok=ie||ns4||ns6||opera
function changecontent() {
getcontent()
i_text++
if (i_text>=text.length) {i_text=0}
if (ie) {
ticker.innerHTML=content
fadeout()
}
if (opera || ns6) {
document.getElementById('ticker').innerHTML=content
var texttimer=setTimeout("changecontent()",2*textpause)
}
if (ns4) {
document.roof.document.ticker.document.write(content)
document.roof.document.ticker.document.close()
var texttimer=setTimeout("changecontent()",textpause)
}
}
function fadein() {
if (transparency<100){
transparency+=transparencystep
if (ie) {
document.all.tickerbg.filters.alpha.opacity=transparency
}
var fadetimer=setTimeout("fadein()",pausefade)
}
else {
clearTimeout(fadetimer)
setTimeout("changecontent()",1000)
}
}
function fadeout() {
if (transparency>0){
transparency-=transparencystep
if (ie) {
document.all.tickerbg.filters.alpha.opacity=transparency
}
if (ns6) {
document.getElementById('tickerbg').style.MozOpacity=transparency/100
}
var fadetimer=setTimeout("fadeout()",pausefade)
}
else {
clearTimeout(fadetimer)
setTimeout("fadein()",textpause)
}
}
getcontent()
function getcontent() {
if (ie || opera) {
var tablewidth=textwidth-2*textborder
var tableheight=textheight-2*textborder
}
else {
var tablewidth=textwidth
var tableheight=textheight
}
if (ie || ns6) {
var padding=parseInt(textborder)+3
content="<table width="+tablewidth+" height="+tableheight+" cellpadding="+padding+" cellspacing=0 border=0><tr valign="+textvalign+"><td align="+textalign+">"
content+="<a href=\""+textlink[i_text]+"\" target=\""+texttarget[i_text]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\" onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
content+=text[i_text]
content+="</a></td></tr></table>"
}
else {
content="<table width="+tablewidth+" height="+tableheight+" cellpadding="+textborder+" cellspacing=0><tr valign="+textvalign+"><td align="+textalign+">"
content+="<a href=\""+textlink[i_text]+"\" target=\""+texttarget[i_text]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\">"
content+=text[i_text]
content+="</a></td></tr></table>"
framecontent="<table width="+tablewidth+" height="+tableheight+" cellpadding=0 cellspacing=0 border="+textborder+"><tr><td>"
framecontent+="<font color=\""+textbgcolor+"\">"
framecontent+="."
framecontent+="</font>"
framecontent+="</td></tr></table>"
}
}
if (ie || ns6 || opera) {
if (ns6) {
textwidth-=2*textborder
textheight-=2*textborder
}
document.write("<div id=\"roof\" style=\"position:relative;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textbgcolor+";\">")
if (!opera && !ns6 ) {
document.write("<div id=\"tickerbg\" style=\"position:absolute;top:"+-textborder+"px;left:"+-textborder+"px;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+";border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textfontcolor+";overflow:hidden\;filter:alpha(opacity=100)\">")
document.write("</div>")
}
document.write("<div id=\"ticker\" style=\"position:absolute;top:"+-textborder+"px;left:"+-textborder+"px;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+";border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;overflow:hidden\;\">")
document.write("</div></div>")
window.onload=changecontent
}
else if (ns4) {
document.write("<ilayer name=\"roof\" width="+textwidth+" height="+textheight+">")
document.write("<layer name=\"tickerframe\" width="+textwidth+" height="+textheight+" top=0 left=0 bgcolor="+textbgcolor+">")
document.write(framecontent)
document.write("</layer>")
document.write("<layer name=\"ticker\" width="+textwidth+" height="+textheight+" top=0 left=0>")
document.write()
document.write("</layer>")
document.write("</ilayer>")
window.onload=changecontent
}
</script>[/spoiler]
edit yang [b]bold[/b] sesuka hati

[quote][align=center][b]geser image with komen[/b]

[/align][/quote]
lagi2 dalam tag body [spoiler]<!-- CODE FOR GUM SLIDESHOW STARTS HERE -->
<!-- Set the width and height of the slideshow inside the table below. Make sure to set the height of the table about 30 (pixels) higher than the actual height of your images. That ensures that there is enough room for your comments -->
<table width=400 height=90><tr><td>
<script>
// CREDITS:
// Gum Slideshow 3.11
// By Peter Gehrig
// Copyright (c) 2004 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at
http://www.freewebknowledge.com/jscodes.php
var slideurl=new Array()
var slidecomment=new Array()
var slidelink=new Array()
var slidetarget=new Array()
///////////////////////////////////////////////////////////////////////////
// EDIT-ZONE STARTS HERE
//////////////////////////////////////////////////////////////////////////
// Set the URLs of your slides (images)
slideurl[0]="[b]url images[/b]"
slideurl[1]="[b]url images[/b]"
slideurl[2]="[b]url images[/b]"
slideurl[3]="[b]url images[/b]"
// Add a link for each slide
// If you don't want to link a slide type "#" instead (see middle-sample below)
slidelink[0]="http://www.freewebknowledge.com"
slidelink[1]="[b]
http://theftalk.com/?r=98473[/b]"
slidelink[2]="[b]
http://profiles.friendster.com/comments.php?uid=55094706[/b]"
slidelink[3]="[b]
http://profiles.friendster.com/55094706[/b]"
// Add a target for each link
// Allowed values are: "_blank", "_top", "_parent", "_self" or the name of a frame
slidetarget[0]="_blank"
slidetarget[1]="_blank"
slidetarget[2]="_top"
// Add a comment for each slide
slidecomment[0]="[b]teguh ganteng[/b]"
slidecomment[1]="[b]teguh ganteng[/b]"
slidecomment[2]="[b]teguh ganteng[/b]"
slidecomment[3]="[b]teguh ganteng[/b]"
// Set the font for the comments
var slidefont="Arial"
// Set the fontcolor for the comments
var slidefontcolor="white"
// Set the fontsize for the comments (HTML-values ranging form 1 - 6)
var slidefontsize=5
// Set the width of the pictures (pixels)
var slidewidth=400
// Set the height of the pictures (pixels)
var slideheight=60
// Set the pause between the pictures (seconds)
var pause=3
///////////////////////////////////////////////////////////////////////////
// EDIT-ZONE ENDS HERE
//////////////////////////////////////////////////////////////////////////
var preloadedimages=new Array()
for (i=0;i<slideurl.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=slideurl[i]
}
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0
var imgpreload=new Array()
for (i=0;i<=slideurl.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=slideurl[i]
}
var pos_left=0
var pos_top=0
var speed=20
var step=10
var i_loop=0
var i_image1=0
var i_image2=1
var i_space=""
var all_space=""
var max_space=20
var content=""
var i_slide=0
pause*=1000
function stretchimage() {
if (i_loop<=slidewidth) {
if (ie) {
imgcontainer1.innerHTML="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a>"
document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop
imgcontainer2.innerHTML="<a href='"+slidelink[i_image2]+"' target='"+slidetarget[i_image2]+"'><img width='"+(slidewidth-i_loop)+"' height='"+slideheight+"' src='"+slideurl[i_image2]+"' border='0'></a>"
}
if (ns6) {
document.getElementById('imgcontainer1').innerHTML="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a>"
document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer1').style.left)+i_loop
document.getElementById('imgcontainer2').innerHTML="<a href='"+slidelink[i_image2]+"' target='"+slidetarget[i_image2]+"'><img width='"+(slidewidth-i_loop)+"' height='"+slideheight+"' src='"+slideurl[i_image2]+"' border='0'></a>"
}
i_loop=i_loop+step
var timer=setTimeout("stretchimage()",speed)
}
else {
clearTimeout(timer)
var imgcontent="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a><br><font face='"+slidefont+"' size="+slidefontsize+" color='"+slidefontcolor+"'>"+slidecomment[i_image1]+"</font>"
if (ie) {
imgcontainer1.innerHTML=imgcontent
document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop
imgcontainer2.innerHTML=""
}
if (ns6) {
document.getElementById('imgcontainer1').innerHTML=imgcontent
document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer1').style.left)+i_loop
document.getElementById('imgcontainer2').innerHTML=""
}
changeimage()
}
}
function changeimage() {
i_loop=0
i_image1++
if (i_image1>slideurl.length-1) {i_image1=0}
i_image2=i_image1-1
if (i_image2>slideurl.length-1) {i_image2=0}
if (i_image2<0) {i_image2=slideurl.length-1}
if (ie) {
document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft
}
if (ns6) {
document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer2').style.left)
}
var timer=setTimeout("stretchimage()",pause)
}
function simpleslideshow() {
i_slide++
if (i_slide>=slideurl.length) {i_slide=0}
document.slideimage.src=preloadedimages[i_slide].src
simpleslideshowcomment()
var fadetimer=setTimeout("simpleslideshow()",pause)
}
function simpleslideshowcomment() {
if (i_space>=0){
all_space=""
content=""
for (i=0;i<i_space;i++) {
all_space+=" "
}
for (i=0;i<slidecomment[i_slide].length;i++) {
var thisletter=slidecomment[i_slide].substring(i,i+1)
thisletter=thisletter+all_space
content+=thisletter
}
window.status=content
i_space--
var fadetimer=setTimeout("simpleslideshowcomment()",20)
}
else {
clearTimeout(fadetimer)
i_space=max_space
}
}
function simpleslideshowjump() {
if (slidetarget[i_slide]=="_self") {
document.location.href=slidelink[i_slide]
}
else if (slidetarget[i_slide]=="_blank") {
codepopup=window.open(slidelink[i_slide], "code", "status=yes,location=yes,toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,width=780,height=580,top=10,left=10");
}
else if (slidetarget[i_slide]=="_top") {
top.location.href=slidelink[i_slide]
}
else if (slidetarget[i_slide]=="_parent") {
parent.location.href=slidelink[i_slide]
}
else {
var jumpto=eval("parent."+slidetarget[i_slide])
jumpto.location.href=slidelink[i_slide]
}
}
if (ie || ns6) {
var slideh=slideheight+30
document.write("<div style=\"position:relative;width:"+slidewidth+"px;height:"+slideh+"px;overflow:hidden\">")
document.write("<div id=\"imgcontainer1\" style=\"position:absolute;width:"+slidewidth+"px;height:"+slideh+"px;top:0px;left:0px\"><img src=\""+slideurl[0]+"\"></div>")
document.write("<div id=\"imgcontainer2\" style=\"position:absolute;width:"+slidewidth+"px;height:"+slideh+"px;top:0px;left:0px\"><img src=\""+slideurl[1]+"\"></div>")
document.write("</div>")
window.onload=stretchimage
}
else {
document.write("<a href=\"javascript:simpleslideshowjump()\"><img name=\"slideimage\" src=\""+slideurl[0]+"\" border=0></a>")
window.onload=simpleslideshow
}
</script>[/spoiler]
edit yang bold
[quote][align=center][b]zoom image[/b]

[/align][/quote]
[spoiler]<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var ival, imgname, total, steps, maxx, maxy, currentx, currenty, dx, dy;
function zoomImg(imgname, total, steps, maxx, maxy) {
// convert the total from seconds to miliseconds
total = total * 1000;
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
// work out how much we need to increase the image by each step
// devide image sizes by number of steps to get the amount we need to change each step
stepx = maxx / steps;
stepy = maxy / steps;
// devide the total time (in ms) by the number of steps to get the interval time
inttime = total / steps;
// set the interval to increase the size of the image by the required pixels
functionRef = "resizeImg('"+imgname+"', "+stepx+", "+stepy+", "+maxx+", "+maxy+")";
ival = setInterval(functionRef, inttime);
}
function resizeImg(imgname, dx, dy, maxx, maxy) {
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
if ((currentx<maxx-dx) && (currenty<maxy-dy)) {
objref.height = currenty + dy;
objref.width = currentx + dx;
}
else {
clearInterval(ival);
objref.height = maxy;
objref.width = maxx;
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY onLoad="zoomImg('test', 10, 150, 300, 200)">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<div align="center"><img src="[b]url pic[/b]" name="test" id="test" height="2" width="3"></div>
<!-- Script Size: 2.24 KB -->[/spoiler]
sorry, gue gak cantumin preview tapi uda gue coba keren2 n berjalan dengan mulus kok,kalau gak percaya coba aja
Last edited by teguh0203 (2008-07-27 09:19:10)