Tutorial : Tekan Gambar Keluar Ayat

Assalamualaikum...

Hai korang. Mai bersemangat nak buat tutorial pulak malam-malam pukul 11.13 malam pada hari Jumaat ni :D  OK so, apa tuto kita malam ni?  Oh yea, kalau kita klik gambar tu, nanti dia terus muncul ayat. Macam ni :

Nampak tak gambar "CLICK ME" tu? Hehe.. kalau korang klik je gambar tu...

...terus dia jadi macam ni!! Hehe.. Tak percaya? Klik lah sendiri ;P 

Jadi, korang nak tau tak macam mana Mai buat? Senang je.. mula-mula, korang buatla basic nya,  Sign in > Design > Layout > Add Gadget [Edit HTML].

1. Korang copy code yang warna kuning kat bawah ni ye! [p/s: Pastikan masa nak copy tu, korang tekan CTRL + C serentak tau!]

<script language="javascript" type="text/javascript">


function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onclick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<center><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSJFMhOhm3dJUZtUtne48N5hLq6hPZ46TG-isT_E5FyrEeRKZCwv9K8Kt7c"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">

TULIS MESEJ ANDA DI SINI</div></div>

2. Kalau korang dah copy, korang bolehlah paste dekat Edit HTML tadi!!  

3. Nampak tak tulisan , "TULIS MESEJ ANDA DI SINI" yang Mai warnakan biru cair tu? Okey, korang bolehlah tulis mesej yang korang nak kalau sesiapa klik gambar tu!! ^_^ 

4. Yang Mai ada warnakan warna merah tu pulak , korang letak la URL gambar korang daripada Google. ^_^ 

4. Save dan tengok hasilnya. 

Dah buat tu , jangan diam je. Beritahu okey? Thanks! :D

~Love, Mai~