Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Show and Hide Image With Effect

Show and Hide Image With Effect mampu meciptakan effect dengan mouseover dan mouseout serta cara KLIK pada mouse. Sekalipun hanya dengan sedikit javascript, effect yang mampu diciptakan sangat eksotis sekali.

Javascript Show and Hide Image With Effect

<script type="text/javascript">
/* gubhugreyot - bloggerstars1 */
function BGS_GR_blor(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 10);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
</script>

Cara menggunakan javascript:

  1. Simpan Javascript di bawah KODE ]]></b:skin>
  2. Gunakan KODE seperti di bawah ini pada saat melakukan posting.

  3. a. Show and Hide Image :

    <p style="text-align: center">
    <strong><a href="javascript:BGS_GR_blor('gambar', 100, 0, 200)">Hide</a> - <a href="javascript:BGS_GR_blor('gambar', 0, 100, 500)">Show</a></strong><br />
    <img src="http://img.theomegaproject.org/thumbs/2010/01/86.jpg" id="gambar" /></p>

    b. Show onmouseover :

    <img style="-moz-opacity: 0.5; filter: alpha(opacity=50); opacity: 0.5;" id="Gambar1" src="http://img.theomegaproject.org/thumbs/2010/01/176.jpg" onmouseover="BGS_GR_blor('Gambar1', 0, 100, 200)"/>

    c. Show Image on Click :

    <p style="text-align: center"><img style="-moz-opacity: 0.5; filter: alpha(opacity=50); opacity: 0.5;" src="http://img.theomegaproject.org/thumbs/2010/01/86.jpg" id="Gambar2"/><br/><a href="javascript:BGS_GR_blor('Gambar2', 0, 100, 200)">show</a>


  4. Jangan lupa untuk amankan template terlebih dahulu sebelum memasang javascript.
  5. Javascript Show and Hide Image ini bisa juga sampeyan download. Hasil download merupakan javascript dalam bentuk link yang sudah di upload di javascript hosting. Sampeyan tinggal letakkan di bawah kode ]]></b:skin> maka hanya tinggal melakukan posting saja dengan kode HTML-nya.


Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

3 komentar:

  1. ada demonya BOSSSS...............

    BalasHapus
  2. Bagus Gan infonya:
    http://sarahnetslawi.blogspot.com/
    http://umidansarah.blogspot.com/

    BalasHapus
  3. ga ada demonya, jadi ga ngerti deh........ demonya plis...

    BalasHapus

 
GR | Edited by | gubhug reyot