Cara bikinnya ga' ribet ko':
Langkah 1.:
Letakin script gaya nie di bawah <head> :
<style>
textarea.imageOne{
background-color:000000;
background-image:url(blue_saturn.jpg);
color:00ff00;
}
textarea.imageTwo{
background-color:000000;
background-image:url(butterflies.jpg);
color:ff0000;
}
</style>
Ubah url image "blue_saturn.jpg" dan "butterflies.jpg" dengan url image Anda sendiri.
Langkah 2.:
Letakin text-area kayak di bawah nie ditempat yang kamu mau:
<textarea
rows="12" cols="74"
class="imageOne"
onMouseOver="this.className='imageTwo'"
onMouseOut="this.className='imageOne'">
.
.
.
Text kamu di sini
.
.
.
</textarea>
Background-color: 000000;. Background-color biasanya harus sama dengan gambar latar belakang warna, biar ga berlawanan warna dengan gambar itu sendiri. Saat dihighlight latar belakang seperti tidak berubah hanya gambar saja yang hilang.
Warna teks : ff0000; dan warna: 00ff00; yaitu teks warna merah dan hijau, itu digunakan untuk merubah warna pada saat mouse over.
Mungkin pada browser lain akan berbeda, misalnya IE, NS6, dll. Coba aja lah, ga' ada ruginya, yang penting komentar..
Menu Efek Mouse
Nie masih ada hubungannya dengan efek mouse. Karena itu, Lela gabungin aja di posting sini. Cuma fungsinya buat "Menu Link" yang keren, lain dari biasanya lah..
Silakan edit sesuka kamu kode di bawah ne semuanya gratis. Tinggal copy-paste aja. Kalau ada yang ngribetin pikiran nanya aja ke Lela.
<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
// edited by: http://blogumulus.blogspot.com on June, 30, 2009
// ===============================================================
//
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>
ZOOM TEXT
(Balik lagi ke sini ya, coz.. ini masih mau Lela sempurnakan. Siapa tahu ada hal lain yang bisa Lela tambahkan. Pastinya.., kode zoom text ini belum Lela pasang. Kecuali bila kamu mo nanya langsung ke Paman RagDoll, silakan..)
Whoa, cool... :)
BalasHapusI really mean it!
This is What I call as "COOL"!
I'm looking forward to having a time to apply this tips... If only I could apply it now... :(
I'll be coming later for sure for this tips..
Thanks you... :)
Lela sayang tu kan cm copy paste tulisan aq? Kq ga ada nama blog aq sih? Aq susah tau nyarinya,mang aq jg sering ngintip code org tp aq rubah total.nyari ide itu lho yg susah. Sama2 bantu dunk kl cm numpang copy kasi nama blog aq kek apa gt oke syg,.
BalasHapusKemaren kamu minta kode zoom image yang ada di
www.paintinghere.com/painting/leighton_flaming_june_46.html
Dah aq upload kl kurang bener km benerin yah? Km download aja di
http://www.geocities.com/ocewijaya/Zoom-lens.zip
Aq ga posting alnya panjang, tar aq jiplak aja tmpt km kl dah jadi gampang malah he2..
bukan cm BTO yg oke, tulisan Ning yg lain pun oke2. sorry gw kgk pux award u/ Ning. o k i award gw beri dlm mimpi aje or dlm bayangan aje yeh. gpp kan?
BalasHapusHmmm.... muantab benner infonya...!
BalasHapusoh iyha mbak.... kasih tau juga dunk tutorialnya tentang text zoomnya dunk......!
Please..... XD
Oh iyha... nih mo nanya lagi nih.....!
gimana sih cara buat translate blog seperti punya mba....!
Syukron.....!
Boleh aje text area n warna tulisanx berubah, tp tak bikin hati Ning jd brubah dr pengakuan or penyaksian awal.
BalasHapus"Kan ku kembalikan semua kenangan indah mu yang telah hilang..."
BalasHapusKomentar ini telah dihapus oleh penulis.
BalasHapusThx atas kunjungannya...!
BalasHapusudah dicoba sih...!
tapi baru beberapa minggu yang lalu...!
and sekarang belon nyampe lagi....!
Resiko....?
aq rasa sih ga da....!
coba aja....!
Mampir lagi.. Tenkyu..
BalasHapusLela ayang sowry yah browser q ga ngedukung, aku kan cm pake hp.. Jd q ga tau tu zoom ky gmn.. Ga bisa nyobanya maaf
BalasHapuswah,, keren tu jeng,, boleh nih dicoba,,
BalasHapusoiya, utk zoom mouse sprti yg ditanyakan sblmnya,,
di link : http://valid.tjp.hu/tjpzoom/
dan link : http://www.parallel.ua/
juga Blognya Paman RagDoll : http://oce-modifblog.blogspot.com/
seperti yg lela tampilkan di posting ini sbnrnya tdk terlalu sulit,,
saya jg sudah pernah mempraktekkannya,, tp belum sempat saya posting,,
mgkn scptnya akan saya coba posting jg, sbg request dr Jeng Lela,,
THanks to visit n comment nya,,
Ada AWARD buat kamu, Mohon diterima ya... :)
BalasHapusaku minat dengan background textera onmouse ini. tapi ngak pandai cara copy kodenya. gimana sih lela, bantuin aku.
BalasHapusSelalu ada yang baru disini,... aku coba dulu yah la... makasih.
BalasHapustrik bagus nich....
BalasHapuskucoba di blog ku ya... ning Lela...
insya allah berhasil