Buat zom text seperti dibawah ini
Codenya di bawah ini
<html>
<head>
<style type="text/css">
body {margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;
font-size: 12px;
font-family: arial;
font-weight: normal;
color: #666;
}
.word {
cursor: pointer;
color: #666;
position: absolute;
z-index: 1;
}
.word_over {
cursor: pointer;
color: #FFF;
position: absolute;
z-index: 1;
}
.word_zoom {
position: absolute;
font-weight: bold;
z-index: 0;
}
</style>
<script type="text/javascript"><!--
// ====================================================
// script: Gerard Ferrandez - Ge-1-doot - June 2005
// http://www.dhteumeuleu.com/
// ====================================================
window.onerror = new Function("return true");
document.onselectstart = new Function("return false");
var object = new Array();
var margin = 20;
var K = 0;
function CObj(N,x,y,txt){
this.obj = document.createElement("span");
this.obj.innerHTML = txt;
this.obj.className = "word";
this.obj.onmouseover = new Function("this.className='word_over',object["+N+"].izoom();");
document.getElementById("sp").appendChild(this.obj);
this.obj.style.left = x;
this.obj.style.top = y;
this.obz = 0;
this.x = x;
this.y = y;
this.x0 = x;
this.y0 = y;
this.fs = 12;
this.c = 0;
this.px = txt.length * .02;
this.py = .04;
this.zoom = function () {
with(this){
fs *= 1.08;
c = 512 - fs * 2;
x -= fs * px;
y -= fs * py;
with(obz.style){
left = x;
top = y;
fontSize = Math.round(fs);
color = "RGB("+Math.round(c*.5)+","+Math.round(c*.5)+","+Math.round(c)+")";
}
if(c<8){
document.getElementById("sp").removeChild(obz);
obj.className="word";
x = x0;
y = y0;
fs = 12;
obz = 0;
K--;
} else setTimeout("object["+N+"].zoom();",16);
}
}
this.izoom = function () {
with(this){
if(K<20){
if(obz == 0){
obz = document.createElement("span");
obz.className = "word_zoom";
obz.innerHTML = txt;
obz.style.left = x-1;
obz.style.top = y;
document.getElementById("sp").appendChild(obz);
zoom();
K++;
}
} else setTimeout("object["+N+"].izoom();",128);
}
}
}
function fontWidth(word){
// arial font
var S = "a68b68c68d68e68f31g68h68i31j31k68l31m108n68o68p68q68r39s68t39u68v50w90x68y68z68A90B90C90D90E90F78G98H90I28J59K90L68M108N90O98P90Q98R90S90T68U90V90W130X68Y90Z68'30.42!29?68-41/41=72";
var l = word.length;
var s = 0;
var x = 0;
var c = 0;
for(i=0;i<l;i++){
c = word.charAt(i);
x = S.indexOf(c);
if(c>="0" && c<="9")s+=69;
else if(x>=0)s+=parseInt(S.substring(x+1,x+4));
else s+=68;
}
return s/10;
}
onload = function(){
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
T = [
"window html head title document absolute",
"new function txt return position justify",
"false var object Array this x y px py",
"parent length span body get Element By Id",
"div create Element RGB class Name inner HTML",
"if append Child zoom overflow hidden with",
"style left top font Size color false Math",
"onerror cursor font Weight obj round parent",
"get Elements By Tag Name font Size background",
"#000000 remove Child script set Timeout run",
"for zIndex width height on mouse over return true"
];
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
x = 0;
y = 0;
k = 0;
for(j in T){
Tx = T[j].split(" ");
// justify
xt = 0;
for(i in Tx){
txt = Tx[i];
xt += fontWidth(txt);
}
if(Tx.length)sP = (-2*margin + parseInt(document.getElementById("sp").style.width) - xt) / (Tx.length-1); else sP = 0;
// insert word
for(i in Tx){
txt = Tx[i];
if(txt) {
object[k] = new CObj(k, margin+x, margin+y, txt);
x += (fontWidth(txt)+sP);
k++;
}
}
y += 18;
x = 0;
}
}
//-->
</script>
</head>
<body>
<div style="position:absolute;left:50%;top:50%">
<div id="sp" style="position:absolute;width:300;height:240;left:-150;top:-120;overflow:hidden;background:#111;cursor:pointer">
</div>
</div>
</body></html>
warna biru adalah text yang akan muncul
15 komentar:
Tolong donk, gimana kalau buat zoom seperti: (http://www.paintinghere.com/painting/Leighton_Flaming_June_46.html) ini. Kabari saya kalau dah bisa. Makasih..
Mas Eko, balik lagi donk ke Lela. Udah disebut tuh namanya sekaligus link bannernya udah Lela pajang di tempat yang sip. Makasih..
Emm.., jangan lupa ajarin Lela bikin zoom lukisan.
Makasih uploud-nya dah suxes. Boleh dicopy "view-source"nya.
toloooooong..
aduh2..gara2 copy paste html di atas semua yg warna merah dan biru..blog gw jadi kacauu..pliiis URGENT..helo..huhu..www.ceuceumeo.blogspot.com
yg judul label (fight-Bosaaaan dgn FB, YM, BBM..)jadi berubah warna sama tampilannya ...pliis..gmn???
good articel,,, i like it
itu dicopy dibagian mana nya?
maap masih newbie
kho saya ga bisa ya ??
infonya sangat bagus
kunjungan pagi semoga sukses selalu
http://goo.gl/sEj8E
wah.. keren nih...
makasih infonya.. :D
mantap
kunjungan malam gan, salam bikers nih..
siang gan. salam. Sudah lama tal berkunjung kesini lagi. Wah informasinya menarik2 nih.. Mantap..
salam sehat, kunjungan siang nih, Artikelnya bermanfaat banget..
punten bapa kalou pingin info bagus gini gimnanya ya bapa ,, makasih bapa http://goo.gl/U2KZUA
Hai kawan, lama tak mengunjungi blog ini. Wah makin rame aja kayaknya.. Semoga selalu ada dalam keadaan sehat yah kawan.. Saya coba baca satu persatu nih.. :D
Posting Komentar