Jumat, 30 Juli 2010

Fun With HTML Area

Postingan kali ini mirip-mirip dengan teknik snippets. Dimana kita akan menggunakan satu gambar yang bisa merekrut semua link yg ada :D (gitu kali yak keterangan yg cucok) ;)) Biasanya kan satu gambar dengan satu link :-/ nah sekarang bagaimana beberapa link hanya satu gambar 8->> Hal yg perlu diketahui bila ingin menggunakan trik ini, sobat harus sudah yakin dengan gambar dan link yg akan di buatkan menjadi map.

Dengan kata lain map ini kita sebut saja area atau daerah. Cara ini sebenarnya sudah ada sih di webnya si W3 (*) Contoh...
shareblogspotgooglewordpressGimana, itu gambarnya satu tapi ada 3 buah link yg dimana sudah sesuai dengan design gambar b-) :-bd

<img src="http://your-picture-link.gif" alt="" usemap="#UNIQUE-ID" />
<map name="UNIQUE-ID">
<area shape="rect" coords="0,0,82,126" alt="" href="http://www.blahblehbloh.com" target="_blank"/>
<area shape="circle" coords="90,58,3" alt="" href="http://www.blahblehbloh.com" target="_blank">
<area shape="circle" coords="124,58,8" alt="" href="http://www.blahblehbloh.com" target="_blank">
</map>
Hal yg perlu diperhatikan dalam menggunakannya yaitu:
  1. UNIQUE-ID
  2. UniqueID ini bebas terserah saja mau diisikan dengan kata apa. Harus sesuai dengan contoh diatas itu nanti memanggil UniqueId.
  3. Shape
  4. Ini kode kesesuaian dalam desain gambar. (nanti tabel keterangan)
  5. Coords
  6. Ini jarak (koordinat) dari satu area.
Disini Beben si bloglang hanya mau berbagi keterangan 2 atributnya saja yah :D ;)) :">
AttributeNilaiKeterangan
coordscoordinatesMenentukan koordinat suatu area.
hrefURLMenentukan URL tujuan link di suatu area.
nohrefnohrefMenentukan bahwa suatu area tidak memiliki link terkait.
shapedefault
rect
circle
poly
Menentukan bentuk suatu area.
target_blank
_parent
_self
_top
Menentukan mana untuk membuka halaman yang terhubung ditetapkan dalam atribut href.

Nilai coordsKeterangan
x1, y1, x2, y2Jika bentuk atribut diatur ke "rect", itu menentukan koordinat sudut kiri atas dan sudut kanan bawah persegi panjang.
x,y,radiusJika bentuk atribut diatur ke "lingkaran", itu menentukan koordinat pusat lingkaran dan jari-jari.
x1, y1, x2, y2, .., xn, ynJika bentuk atribut diatur ke "poli", itu menentukan koordinat tepi poligon. Jika koordinat pertama dan terakhir pasangan tidak sama, browser harus menambahkan koordinat terakhir pasangan untuk menutup poligon.
Selamat berkreatifitas, sok sekarang buat tombol button share, save, atau bookmark dengan metode itu :) atau sobat malah bisa lebih briliant dalam hal kreatifitas b-) See you :-h
Source: w3schools.

Tidak ada komentar:

Posting Komentar