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:



Arahkan mouse kamu di bagian text area ini atau klik untuk melihat tulisan? Latar akan berganti gambar dan teks akan berubah warna jika browser anda mendukung script ini. Jangan lupa komentarnya Lela tunggu ya, makasih..

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

ZOOM TEXT

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"





















Learn more »