Background Textarea Onmouse
Pernah mikir untuk membuat textarea dengan latar belakang sebuah gambar? Ditambah efek mouse over.. Saat mouse bergerak di atas textarea background akan berubah warna, begitu pula pada teks. Nah, selain buat copy-paste juga bisa sebagai hiasan pada blog, membuatanya cukup mudah. Liat contoh di bawah ini:
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..
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.Ga' usah segan-segan, ntar sesat di jalan. Lagian.., masa' sich nanya ma cewe' bisa njatuhin martabat?!
<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>
Jangan lupa posisi kode masing-masing. Pilah-pilah sendiri sesuai tata letaknya di template. Jika perlu, kunjungi sumber: Paman RagDoll atau pada yang lebih pakar dan dapetin kodenya duluan dari Lela, Mas Eko.
Buat zom text seperti di bawah ini:
(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..)
"KALO BELUM BISA JANGAN SAMPE NANGIS, APALAGI PAKE AIR MATA DARAH"
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..)
About the author
Admin
Duis sed tellus et tortor vestibulum gravida. Praesent elementum elit at tellus. Curabitur metus ipsum, luctus eu, malesuada ut, tincidunt sed, diam. Donec quis mi sed magna hendrerit accumsan.
![[Image]](http://i465.photobucket.com/albums/rr20/jakabanda/PBFavicon.gif)
15 komentar:
Whoa, cool... :)
I 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,.
Kemaren 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?
Hmmm.... muantab benner infonya...!
oh 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.
"Kan ku kembalikan semua kenangan indah mu yang telah hilang..."
Thx atas kunjungannya...!
udah dicoba sih...!
tapi baru beberapa minggu yang lalu...!
and sekarang belon nyampe lagi....!
Resiko....?
aq rasa sih ga da....!
coba aja....!
Mampir lagi.. Tenkyu..
Lela ayang sowry yah browser q ga ngedukung, aku kan cm pake hp.. Jd q ga tau tu zoom ky gmn.. Ga bisa nyobanya maaf
wah,, keren tu jeng,, boleh nih dicoba,,
oiya, 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... :)
aku minat dengan background textera onmouse ini. tapi ngak pandai cara copy kodenya. gimana sih lela, bantuin aku.
Selalu ada yang baru disini,... aku coba dulu yah la... makasih.
trik bagus nich....
kucoba di blog ku ya... ning Lela...
insya allah berhasil
Posting Komentar