Dreamweaver Dersleri

RESİM HARİTASI

Resimlerin faklı bölgelerinden farklı yerlere linkler vermek için resim haritası kullanırız.Örneğin bu sayede Türkiye haritasındaki tüm illere ayrı link verip kullanıcıları o ille ilgili sayfaya yönlendirebilirsiniz.
Resim haritası bir resim üzerinde ki belirli tanımlanmış etkin noktaları (hotspots) link olarak belirler. Etkin noktalar dikdörtgen veya yuvarlak olabileceği gibi düzensiz şekillerde olabilir.

Dikdörtgen etkin noktanın konumu iki noktayla tanımlanır: sol üst ve sağ alt köşeler. Her nokta resmin sol-üst köşesinden yatay ve dikey uzaklığını piksel cinsinden belirten bir sayı çiftiyle tanımlanır. Aşağıdaki örnekte etkin noktanın 0,0 sol üst köşesinin 50,50′de sağ alt köşesinin resmin sol üst köşesine olan uzaklığıdır.

<map name="haritaismi" id="haritaismi">
<area shape="rect" coords="0,0,50,50" href="index.htm" />
</map>

Yuvarlak etkin noktanın konumunu tanımlamak için üç tane koordinat kullanılır: iki tanesi (yatay ve dikey değerler) dairenin merkezini tanımlamak için, bir tanesi dairenin yarı çapı içindir.

<map name="haritaismi" id="haritaismi">
<area shape="circle" coords="100,110,50" href="index.htm" />
</map>

Çok köşeli etkin noktanın konumunu tanımlamak için şeklin tüm köşelerinin koordinatları kullanılır. Çok köşeli etkin noktalar tanımlanan noktaları birleştiren düz çizgilerden oluşur. Aşağıda beş köşeli bir etkin nokta için gereken kod verilmiştir

<map name="haritaismi" id="haritaismi">
<area shape="poly" coords="310,14,559,195,274,356,5,118,126,411" href="index.htm" />
</map>

Aşağıdaki resimde 4 tane geometrik şekilede link verilmiştir. <img> etiketine usemap="#haritaismi" eklendiğinde haritaismi adlı resim haritasına göre resim içerisinde linkler belirir.

<map name="Map" id="Map"> <area shape="rect" coords="20,158,170,210" href="#" /> <area shape="circle" coords="130,117,28" href="#" /> <area shape="poly" coords="97,27,96,40,157,95,164,90,160,27" href="#" /> <area shape="poly" coords="28,27" href="#" /> <area shape="poly" coords="21,110,83,111,84,27,26,25" href="#" /> </map>

Kaynak:http://www.bidb.odtu.edu.tr/index.php?go=ig&sub=html2