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.

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>



3. Jangan lupa untuk amankan template terlebih dahulu sebelum memasang javascript.
4. 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 «