Menu mouse over zoom text

Dah lama ga posting ga ol,langsung down deh semua folow pada cabut ga apa apa deh,Langsung aja deh menu berikut adalah menu yang bila cursor mouse kita di atasnya maka huruf menu akan jadi besar tapi dengan penataan yang keren.. Berikut contohnya..
seperti biasa code2 disini gratis kq tinggal copas aja..maaf karena saya hanya memberi bahan saja,masalah merakit jadi sebuah web tanyakan pada ahlinya.. Tapi Jangan lupa commentnya. Ditunggu.. Ni codenya scriptny:

<style type="text/css"> html { overflow: hidden; } body { background: #222; } #menu { padding: 10px; background: #000; height: 300px; width: 400px; } #menu a { display:block; text-decoration:none; font-family: arial, helvetica, verdana, sans-serif; white-space: nowrap; } </style> <script type="text/javascript"><!-- // =============================================================== // -------- M6 menu ------ // script written by Gerard Ferrandez - Ge-1-doot - December 2005 // http://www.dhteumeuleu.com //this free from http://oce-modifblog.blogspot.com // =============================================================== // var P,T; var over = -1; /////////////// var fontSize = 38; var lensFX = 1; var num = true; var color = "#FFF"; var selected = "#F80"; /////////////// function zoom(s){ if(s!=over){ over = s; for(var i=0;i<T;i++){ P[i].style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px"; P[i].style.color=(i==s)?selected:color; } } } onload = function(){ P = document.getElementById("menu").getElementsByTagName("a"); T = P.length; for (var i=0;i<T;i++){ if(num){ x=i+"."; if(x.length<3)x="0"+x; P[i].innerHTML = x+P[i].innerHTML; } P[i].style.width = "100%"; P[i].onmouseover=new Function("zoom("+i+");"); } zoom(0); } //--> </script> </head> <body> <div id="menu"> <a href="../scripting">scripting</a> <a href="../javascript">javascript</a> <a href="../web">web</a> <a href="../dhtml">dhtml</a> <a href="/css">css</a> <a href="../ajax">ajax</a> <a href="../programming">programming</a> <a href="../design">design</a> <a href="../webdesign">webdesign</a> <a href="../html">html</a> <a href="../dom">dom</a> <a href="../webdev">webdev</a> <a href="../reference">reference</a> <a href="../tools">tools</a> <a href="../tutorial">tutorial</a> <a href="../xmlhttprequest">xmlhttprequest</a> <a href="/menu">menu</a> <a href=".../xml">xml</a> <a href=".../library">library</a> <a href="../development">development</a> </div> </body> </html>

selanjutnya...

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

selanjutnya...

Zoom image dengan FancyZoom

Kali ini membuat zoom gambar lagi,Sama seperti posting zoom image sebelumnya tapi yang sebelumnya onmouseover zoom image, kali on klik zoom image, Skala gambar otomatis akan membesar jika kita klik gambar,zoom ini juga menggunakan efek bayangan

liat contohnya di
www.cable.name, kang rohman

caranya

karena file scriptnya panjang download fancyzom.zip dibawah ini.. :

Instructions

Installing FancyZoom on your web pages .

Download the FancyZoom package, right here:

FancyZoom.zip (77,24 KB)

Jika sudah di download, silahkan di ekstrak terlebih dahulu dengan memakai software ekstraktor seperti winzip atau winrar. Nanti akan terdapat dua file script java :

 

 

Nanti akan ada file javascript yang nama nya : FancyZoom.js dan FancyZoomHTML.js.

Didalamnya fancyzoo.zip tadi juga ada folder images,didalam folder tersebut terdapat beberapa images yang berfungsi sebagai efek untuk fancyzoom.. Tetapi agar efek dapat bekerja kamu harus edit kedua script tersebut

contoh km upload gambar di
yahoo geocities
username nya eko editny menjadi seperti ini:

pada js
fancyzoom.js
cari tulisan
images/
kalo udah ketemu ganti dengan induk alamat hosting gambar contohnya

http://www.geocities.com/eko/

yang jelas itu adalah alamat gambar itu berkumpul tapi jika ada mengelopokan didalam folder images pada web yang di masukan jadi seperti ini

http://www.geocities.com/eko/images/

selanjutnya lalu edit script fancyzoomHTML.js
Yang dilakukan adalah mengedit alamat gambar sesuai nama gambar,

jika sudah selesai simpan file js

Tugas anda selanjutnya adalah mengupload file java tersebut ke server tempat anda biasa menyimpan file javascript, misalkan ke yahoo geocities atau yang lainnya. Setelah di upload, kemudian copy kedua alamat file tersebut, misalkan anda sudah mempunyai alamat sebagai berikut saya mempunyai username eko di yahoo geocities alamatnya dan kodenya menjadi:

http://www.geocities.com/eko/FancyZoom.js

http://www.geocities.com/eko/FancyZoomHTML.js

 

Dari alamat tersebut, kodenya jadi seperti ini :

<script src='http://www.geocities.com/eko/FancyZoom.js' type='text/javascript'></script>
<script src='http://www.geocities.com/eko/FancyZoomHTML.js' type='text/javascript'></script>

 

Kemudian masukan kode tersebut di atas kode </head> di dalam template blog anda Lengkapnya seperti berikut :

1. login ke blogger yang pastinya
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. nah kalo km takut terjadi yang kagak2,dari pada bingung,Klik tulisan Download template Lengkap. Agar mudah mengembalikan template seperti semula
5. Cari kode </head>
6. lalu paste yang kode
   

   <script src='http://www.geocities.com/eko/
   
   
   
   FancyZoom.js' type='text/javascript'></script>
   <script src='http://www.geocities.com/eko/FancyZoomHTML.js' type='text/javascript'></script>

   yang telah diganti alamat kamu karena alamat diatas hanya contoh, paste di atas kode </head>.
7. selanjutnya lalu cari code kode ini <body>
8. Hapus kode <body> lalu ganti dengan kode :

    

   <body onload="setupZoom()">

    

9. lalu SIMPAN TEMPLATE.

Lalu format penulisan gambar pada postingan seperti berikut ini

<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>

 

Atau sebagai contoh lengkap dengan alamat gambar seperti berikut ini

<a href="http://www.cabel.name/images-post/2008/02/mwsf-2.jpg"><img src="http://www.cabel.name/images-post/2008/02/mwsf-2.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-2" class="photo" /></a>

 

agar dapat efek zoom tentunya ukuran gambar harus tampil lebih kecil dari yang sebenarnya,agar gambar yang tampil bisa menjadi berukuran lebih kecil daripada ukuran aslinya yaitu Kode width="161" height="123" ganti menurut keinginan km.

script from :

www.fancyzoo.com

selanjutnya...