July 13, 2024

Link Dengan Image Map

2 min read

Image Map adalah suatu gambar yang memiliki daerah tertentu yang dapat diberikan link.  Dalam satu gambar dapat mempunyai lebih dari 2 link. Dreamweaver  menyediakan tiga  image map yang dapat digunakan untuk membagi suatu gambar antara lain :

Rectangular Hotspot Tool, Area Link akan dibuat dengan bentuk kotak.

Oval Hotspot Tool, Area link akan dibuat dengan bentuk lingkaran.

Polygon Hotspot Tools, area link akan berbentuk poligon atau bentuk bebas.

Ingin tahu mari ikuti tutorial berikut ini :

Langkah 1

Buatlah file HTML baru, tambahkan sebuah gambar di dalamnya.

imagemap1

Langkah 2

Pilih salah satu tombol  image map pada panel Properties, misalnya pilih Oval Hotspot Tools.

imagemap2

Langkah 3

Pindahkan posisi pointer mouse yang bergambar +, ke dalam gambar yang akan di jadikan area hotspot untuk  membentuk area hotspot. Klik – perlahan dan geser pointer mouse sampai terbentuk area hotspot. Perhatikan hasil pembuatan  area hotspot seperti pada gambar. Pada gambar  jeruk ada 3 link terlihat, segitiga yang aktif dengan link ke file Jerukbali.html dan target=blank.

imagemap3

Langkah 4

Setelah membuat area hotspot, tampil kotak properti hotspot tersebut, tentukan link ke alamat halaman atau situs, target tampilan, dan memberikan keterangan untuk hotspot. Pada gambar  jeruk ada 3 link terlihat, segitiga (polygonal hotspot Tools) yang aktif dengan link ke file Jerukbali.html dan gambar jeruk ada 2 link segitiga dan oval.

imagemap4

Langkah 5

Untuk melakukan pengaturan area hotspot, dapat mengklik tombol pointer hotspot Tools. Selanjutnya, dapat memindahkan atau menggeser area hotspot atau mengatu besar-kecilnya dari area hotspot dengan cara menggeser handle pada area hotspot.

imagemap5

Masukan file tujuan saat area hotspot di klik, Gunakan ikon Browse to file atau Point to file untuk mencari file tujuan link. Simpan dokumen dengan nama hotspot.html, Tekan tombol  F12 untuk menampilkan pada jendela browse, kemudian klik salah satu area hotspot yang telah diberi link sehingga tampilan browser beralih pada halaman yang  Anda buat link.

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.