Image Pop Up Pada Jendela Baru

Pada script dibawah ini anda dapat menggunakan image popup, sehingga tidak harus menampilkan gambar yang dibutuhkan pada satu halaman. Melainkan dapat berupa link-link tersebut dapat memunculkan gambar yang dimaksud tanpa berpindah pada halaman lain.

Pada <head> isikan sebagai berikut :

<script type=”text/javascript”>

var popbackground=”lightskyblue” //backkoloooor untuk pop window
var windowtitle=”Image Window”  //pop up window

function detectexist(obj){
return (typeof obj !=”undefined”)
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){

function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}

getpos()
var winattributes=’width=’+popwidth+’,height=’+popheight+’,resizable=yes,left=’+leftpos+’,top=’+toppos
var bodyattribute=(popbackground.indexOf(“.”)!=-1)? ‘background=”‘+popbackground+'”‘ : ‘bgcolor=”‘+popbackground+'”‘
if (typeof jkpopwin==”undefined” || jkpopwin.closed)
jkpopwin=window.open(“”,””,winattributes)
else{
//getpos() //2 baris ini dapat kalian akftifkan untuk menyenterkan popup
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write(‘<html><title>’+windowtitle+'</title><body ‘+bodyattribute+’><img src=”‘+imgpath+'” style=”margin-bottom: 0.5em”><br />’+textdescription+'</body></html>’)
jkpopwin.document.close()
jkpopwin.focus()
}

</script>

Pada <body> anda tinggal memanggil script tersebut dengan :

<a href=”#” onClick=”jkpopimage(‘wildan.jpg’, 325, 445, ‘Ini bla bla.’); return false”>
Siiip</a>

OnClick dapat anda ganti dengan OnMouseOver

Dan silahkan anda gonta ganti size, image dan urlnya.

Sript diatas masih dapat dimodifikasi, bagaimana jika tidak harus membuka jendela baru?, link dapat diganti dengan gambar kecil sehingga pengunjung web tidak hanya membaca deskripsi gambar, tetapi dapat juga melihat gambar secara sederhana/kecil, sehingga jika rada penasaran dapat mengklik link yang bersangkutan. Slamat mencoba

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s