Trik Jquery sekarang adalah cara menempatkan tampilan Gambar Di Depan Object Flash, caranya cukup sederhana yaitu cuma menjalan trik CSS menggunakan script Jquery, jadi menerapkan script CSS melalui script Jquery. Berikut ini kita perhatikan contoh scriptnya :
//area gambar
<div id="imgs">
<img src="http://cdn3-www.playstationlifestyle.net/assets/uploads/2014/07/mortalkombatxscreenshot4.jpg"/>
</div>
//area flash
<div id="content">
<div id="games">
<embed width="800" height="512" base="http://external.kongregate-games.com/gamez/0022/3733/live/" src="http://external.kongregate-games.com/gamez/0022/3733/live/embeddable_223733.swf" type="application/x-shockwave-flash"></embed>
</div>
</div>
//jquery script
<script>
$("#imgs").css({"position":"absolute","left":"100px","top":"150px","z-index":"1"});
$("#content").append($("#imgs"));
</script>
keterangan :
"z-index":"1" // posisi gambar di depan object
"z-index":"-1" // posisi gambar di belakang object
Contoh lainnya berikut ini bila gambar tersebut di klik akan menuju ke url lain :
<div id="imgs">
<a href="javascript:void(0)"><img src="http://cdn3-www.playstationlifestyle.net/assets/uploads/2014/07/mortalkombatxscreenshot4.jpg"/></a>
</div>
<div id="content">
<div id="games">
<embed width="800" height="512" base="http://external.kongregate-games.com/gamez/0022/3733/live/" src="http://external.kongregate-games.com/gamez/0022/3733/live/embeddable_223733.swf" type="application/x-shockwave-flash"></embed>
</div>
</div>
<script>
$("#imgs").css({"position":"absolute","left":"100px","top":"150px","z-index":"1"});
$("#content").append($("#imgs"));
$("#imgs").click(function() {
window.open('http://www.trikalfanetcell.com/','_blank');
$("#imgs").remove();
});
</script>
Hasilnya seperti gambar ini :
Smoga menjadi inspirasi ................
ConversionConversion EmoticonEmoticon