Image map adalah suatu gambar yang
terbagi-bagi dalam beberapa bagian tertentu dimana setiap bagian dihubungkan
dengan suatu link tertentu. Jika bagian tertentu dari gambar diklik, pemakai
akan dibawa ke link yang dihubungkan dengan bagian gambar tersebut.
Proses terjadinya link dengan image
map dimulai ketika pemakai menunjuk suatu
bagian tertentu dari image map.
Browser membaca posisi penunjuk mouse saat itu. Koordinat posisi mouse itu
dikirimkan ke web server dan kemudian web server mambaca map file gambar
tersebut untuk menentukan link yang sesuai dengan posisi saat itu.
Penulisannya :
<img src="PATH"
width="450" height="100" border="0"
usemap="#Map1">
<map name=”Map1” id=”Map1”>
<area shape="rect" coords="0,0,50,100"
href="#">
</map>
Perhatikan gambar dibawah ini,
menunjukan kondisi pertama dari koordinat awal sumbu x dan y. (dilihat dari
tampilan monitor)
coords
|
if
shape="rect" then
coords="left,top,right,bottom"
if shape="circ" then
coords="centerx,centery,radius"
if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn" |
href
|
URL
|
shape
|
rect
rectangle circ circle poly polygon |
target
|
_blank
_parent _self _top |
Where to open the target URL.
- _blank -
the target URL will open in a new window
- _self - the target URL will open
in the same frame as it was clicked
- _parent - the target URL will
open in the parent frameset
- _top - the target URL will open in the full body of
the window
Contoh Program :
<html>
<head>
<title> Image MAP </title>
</head>
<body>
<MAP name=”map1”>
<area shape="rect"
coords="50,0,200,50" href="orange.html" alt="orange" >
<area shape="rect"
coords="0,0,50,100" href="#" alt="yellow">
<area shape="rect"
coords="50,50, 200,100" href="#" alt="blue">
<area shape="poly"
coords="300,0, 350,0 ,450,100, 200,100" href="#"
alt="red">
<area shape="poly"
coords="200,0, 300,0 ,200,100" href="#" alt="purple">
</MAP>
<img src="PATH" USEMAP="#map1"
width="450" height="100" border="0">
</body>
</html>
|
Sobat menjelajahi web dengan
menggunakan browser yang mampu menampilkan frame. Anda pasti menemukan frame
disetiap web. Melalui frame jendela browser dibagi bagi menjadi beberapa bagian
di mana setiap frame mampu menampilkan beberapa informasi. Setiap link dalam
satu frame tidak hanya dapat memperbarui isinya, tetapi juga dapat digunakan
untuk memperbarui isi dari frame lain, di samping juga jendela browser.
Frame
digunakan untuk :
- Membuat
daftar isi pada suatu sisi frame sementara sisi frame yang lain untuk menampilkan isi.
- Membuat
suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame,
sedangkan sisi frame yang lain menampilkan isi dokumen
- Membuat
suatu dokumen Tanya jawab, dimana sisi frame yang satu berisi daftar
pertanyaan sedangkan sisi frame yang lain berisi jawabanya.
Dokumen frame tidak boleh berada
dalam elemen BODY. Dokumen frame menggunakan elemen FRAMESET. FRAMESET mempunyai dua buah atribut,
yaitu ROWS dan COLS. Atribut ROWS membagi jendela browser menjadi beberapa
baris frame. Sedangkan atribut COLS membagi jendela browser menjadi
beberapa kolom frame.FRAME>
Tag <FRAME> mendefinisikan
sebuah frame. Tag tersebut harus dalam elemen FRAMESET.
Tag
<FRAME> mempunyai enam atribut, yaitu SRC, NAME, MARGINWIDTH,
MARGINHEIGHT, SCROLLING dan NORESIZE.
Berikut
contohnya:
<FRAME
SRC=”url” NAME=”window_name” SCROLLING=”YES | NO | AUTO “ MARGINWIDTH=”value”
MARGINHEIGHT=”value” NORESIZE>
Contoh :
<html>
<head>
<title>Index Frame</title>
</head>
<frameset cols="*,*"
frameborder="NO" border="0"
framespacing="0">
<frame
src="link.html" name="leftFrame"
scrolling="YES" noresize>
<frame
src="link2.html" name="mainFrame">
</frameset>
<body>
</body>
</html>
|
Dari contoh diatas akan menghasilkan
frame dengan isi dari file link.html (1) dan link2.html (2)
Ok silahkan di kreasikan sendiri, semoga bermanfaat.....
Tidak ada komentar:
Posting Komentar