All post

Senin, 16 Februari 2009

Text zoom over mouse

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:

Lela 29 Juni 2009 pukul 13.33  

Tolong donk, gimana kalau buat zoom seperti: (http://www.paintinghere.com/painting/Leighton_Flaming_June_46.html) ini. Kabari saya kalau dah bisa. Makasih..

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Lela
Website : http://blogumulus.blogspot.com
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
ArtWork69 1 Juli 2009 pukul 14.09  

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.

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : ArtWork69
Website : https://www.blogger.com/profile/02692096397944770816
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
nHaeGeRhana 10 Juli 2010 pukul 12.40  

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???

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : nHaeGeRhana
Website : https://www.blogger.com/profile/10488074228904296784
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Admin 22 Desember 2010 pukul 14.38  

good articel,,, i like it

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Admin
Website : https://www.blogger.com/profile/15360848521833950986
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Ben de Lachryma 4 April 2011 pukul 03.10  

itu dicopy dibagian mana nya?
maap masih newbie

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Ben de Lachryma
Website : https://www.blogger.com/profile/06625802986895707862
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Fahri Tri Setio 3 Mei 2011 pukul 13.27  

kho saya ga bisa ya ??

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Fahri Tri Setio
Website : https://www.blogger.com/profile/17921627649734764061
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
obat kuat tradisional 19 Januari 2013 pukul 07.26  

infonya sangat bagus

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : obat kuat tradisional
Website : http://goo.gl/HlkSP
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
obat kista 19 Januari 2013 pukul 14.26  

kunjungan pagi semoga sukses selalu
http://goo.gl/sEj8E

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : obat kista
Website : http://goo.gl/sEj8E
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
obat jantung bocor 21 Januari 2013 pukul 08.58  

wah.. keren nih...
makasih infonya.. :D

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : obat jantung bocor
Website : http://goo.gl/SY1ls
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Obat TBC Tulang Tradisional 5 Februari 2013 pukul 15.17  

mantap

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Obat TBC Tulang Tradisional
Website : http://goo.gl/DS8zL
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Obat Kanker Payudara Yang Ampuh 15 Juni 2013 pukul 22.17  

kunjungan malam gan, salam bikers nih..

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Obat Kanker Payudara Yang Ampuh
Website : http://goo.gl/PocUV
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
obat penyakit kanker usus 19 Juni 2013 pukul 15.03  

siang gan. salam. Sudah lama tal berkunjung kesini lagi. Wah informasinya menarik2 nih.. Mantap..

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : obat penyakit kanker usus
Website : http://goo.gl/DOPuJ
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
obat diabetes 4 September 2013 pukul 14.02  

salam sehat, kunjungan siang nih, Artikelnya bermanfaat banget..

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : obat diabetes
Website : http://obatdiabettes.blogspot.com/
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Obat Tradisional Asam Lambung 9 Oktober 2013 pukul 09.34  

punten bapa kalou pingin info bagus gini gimnanya ya bapa ,, makasih bapa http://goo.gl/U2KZUA

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Obat Tradisional Asam Lambung
Website : http://goo.gl/U2KZUA
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
obat kanker hati 31 Januari 2014 pukul 10.11  

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

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : obat kanker hati
Website : http://obatkankerhatiampuh.blogspot.com/
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar