Resim Haritaları

 

1.      Giriş & Dikdörtgensel Alanlar

2.      Dairesel Alanlar

3.      Çokgensel Alanlar

4.      Özet

9.1 Resim Haritalarına Giriş & Dikdörtgensel Alanlar

Resim haritaları ile şimdiye kadar pasif veya bağlantı resmi olarak kullandığımız resimleri çok daha etkin olarak kullanabiliriz. İsminden de tahmin edebileceğiniz gibi; resim haritaları, resimleri tıklanabilir bölgelere ayırabilmemize olanak sağlıyor. Klasik örnekler olarak Türkiye haritasının veya insan anatomisinin resimlerini düşünebilirsiniz. Ankara'ya veya karaciğere tıklamak sizi ilgili sayfalara götürecektir.

Bir resim üzerinde bir harita tanımlarken dikdörtgensel, dairesel ve çokgensel alanlar tanımlayabiliriz. Koordinat olarak da resimdeki piksellerin yatay (X) ve düşey (Y) koordinatlarını kullanıyoruz. Örnek olarak web sitemiz için üç tane grafik düğme tasarladığımızı ve bunları ayrı ayrı resimler olarak kullanmak yerine tek bir resim olarak kullanmak istediğimizi varsayalım. Bu durumda bir resim haritası tanımlamamız gerekiyor. Düğmelerimiz dikdörtgen şeklinde olduğundan dikdörtgensel alanlar kullanacağız.


ornek31.html

<HTML>

<HEAD>

<TITLE>Dikdörtgensel Alanlar</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<MAP NAME="harita1">

<AREA SHAPE=RECT COORDS="7,11,89,37"    HREF="servis.html" ALT="Servis">

<AREA SHAPE=RECT COORDS="101,11,183,37" HREF="tm10.html" ALT="TM 10">

<AREA SHAPE=RECT COORDS="196,11,276,37" HREF="cozum_hatti.html" ALT="Çözüm Hattı">

</MAP>

<CENTER>

<IMG SRC="menu_ust.gif" WIDTH=287 HEIGHT=49 USEMAP="#harita1" BORDER=0>

</CENTER>

</BODY>

</HTML>

örnek31'de ilk yaptığımız <MAP> işareti ile bir harita tanımlamak. NAME parametresi ile haritamıza mutlaka bir isim vermeliyiz. Çünkü aynı sayfada birden çok harita kullanabiliriz. Tanımladığımız haritayı hangi resimde kullanacaksak o resmin <IMG SRC=""> işaretinin arkasına USEMAP="#harita_ismi" parametresini eklemeliyiz. Niye BORDER=0 parametresini kullandığımıza gelince... Tıpkı daha önce bir bağlantı olarak kullandığımız resimlerde olduğu gibi resmin çevresinde bir çerçeve oluşmasını engellemek için sınır (border) genişliğini 0'a eşitlememiz gerekiyor.

Harita tanımlarken <MAP> ve </MAP> işaretleri arasında kalan bölüme, kaç tıklanabilir alana ihtiyaç varsa o kadar <AREA> işareti eklememiz gerekiyor. SHAPE parametresi tanımlanan alanın tipini belirlemek için kullanılıyor ki şimdilik sadece dikdörtgensel (RECT) alanlar tanımlıyoruz. COORDS parametresi de tanımladığımız alanın koordinatlarını belirlemek için kullanılıyor. Koordinatlar dikdörtgensel alanlar için sırasıyla sol üst köşenin x, y koordinatları ile yine sırasıyla sağ alt köşenin x, y koordinatlarına karşılık geliyor. Tanımlayacağınız alanların koordinatlarını bulmak için herhangi bir görüntü işlem programı kullanabilirsiniz (örneğin web sitemizden ücretsiz bir resim gösterici ve basit bir görüntü işlem programı olan IrfanView'ü bu amaç için çekebilirsiniz.

HREF parametresi tanıdık gelecektir. Rahatlıkla tahmin edebileceğiniz gibi; bir alan üstüne tıklandığında hangi sayfaya gidileceğini bu parametre belirliyor. ALT parametresi ile ise tanımlı bir alanın üstüne fare imlecini getirip kısa bir süre beklerseniz çıkacak yazıyı seçebilirsiniz.

9.2 Dairesel ALanlar

Dairesel alanlar tanımlamak için önce SHAPE parametresinin değerini CIRCLE yapmalıyız. Koordinatları ise sırasıyla dairenin merkezinin x ve y koordinatları ve dairenin yarıçapı şeklinde yazmalıyız. Örneğin örneğimizdeki resimde üstünde Servis yazan sarı düğmenin merkezinin koordinatları x:107, y:38 iken yarıçapı da 32.

ornek32.html

<HTML>

<HEAD>

<TITLE>Dairesel Alanlar</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<MAP NAME="harita2">

<AREA SHAPE=CIRCLE COORDS="35,80,26"  HREF="tm10.html" ALT="TM 10">

<AREA SHAPE=CIRCLE COORDS="107,38,32" HREF="servis.html" ALT="Servis">

<AREA SHAPE=CIRCLE COORDS="188,73,37" HREF="cozum_hatti.html" ALT="Çözüm Hattı">

</MAP>

<CENTER>

<IMG SRC="menu_yuvarlak.gif" WIDTH=228 HEIGHT=115 USEMAP="#harita2" BORDER=0>

</CENTER>

</BODY>

</HTML>

9.3 Çokgensel Alanlar

Şimdiye kadar basit dikdörtgensel ve dairesel alanlar tanımladık. Daha karmaşık şekiller için ise çokgensel alanları kullanabiliriz. Çokgensel alanlarda istediğimiz kadar koordinat girebiliriz. Bir çokgen tanımlamak noktaları birleştirmekten başka birşey değil aslında. Bir başlangıç noktası seçip bu nokta dahil tüm noktaların x, y koordinatlarını sırasıyla yazıyoruz. Koordinatlarını yazdığımız her yeni nokta bir önceki noktayla birleştiriliyor; koordinatlarını son yazdığımız nokta da başlangıç noktamızla birleştiriliyor. Hepsi bu kadar.

Çokgensel bir alan tanımlamak için ilk iş olarak SHAPE parametresinin değerini POLY yapmamız gerekiyor. Sonra da koordinatları sırasıyla yazıyoruz. Liste 33'teki dünya kadar koordinat size korkutucu gelebilir; gerçekten de çok fazlalar. Aslında bu kadar koordinatın tüm yaptığı yandaki resimdeki son derece mutlu gözüken ördek ve havlusunun çevresini tanımlamak. Tabi tanımlama işlemi sırasında çok daha az nokta kullanıp sadece havlunun sınırlarını belirleyebilirdik ya da kabaca bir dikdörtgensel alan tanımlayabilirdik; ama örnek örnektir 8). Özellikle de bu satırların yazarı koordinat çıkarma hammaliyesini hazır bir programa yaptırdıysa ;) Karmaşık harita tanımlamaları için Internet üzerinde ücretsiz olarak bulabileceğiniz MapMaker adlı programı kullanabilirsiniz ya da Photoshop 5.5'in yanında gelen ImageReady 2.0 gibi pahalı ama pek çok başka güçlü özelliğe sahip programları da tercih edebilirsiniz.

ornek33.html

<HTML>

<HEAD>

<TITLE>Çokgensel Alanlar</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<MAP NAME="harita3">

<AREA SHAPE=POLY COORDS="248,144, 263,142, 279,139, 292,137, 299,146, 291,160, 342,179, 327,220, 334,226, 322,241, 312,250, 272,350, 191,312, 178,300, 152,299, 125,280, 178,197, 167,170, 182,152, 196,155, 201,163, 220,134" HREF="surpriz.html" ALT="Sürpriz!">

</MAP>

<CENTER>

<IMG SRC="getaway.jpg" WIDTH=500 HEIGHT=494 USEMAP="#harita3" BORDER=0>

</CENTER>

</BODY>

</HTML>

Not: Harita tanımlamalarında tüm alan tiplerini (dikdörtgensel, dairesel ve çokgensel) karışık olarak bir arada kullanabilirsiniz.

9.4 Resim Haritaları Bölüm Özeti

*       Resim haritaları ile resimler üzerinde dikdörtgensel, dairesel ve çokgensel alanlar tanımlayabileceğimizi ve bu alanların birer bağlantı olarak iş gördüğünü öğrendik.

*         Bir haritadaki alan tanımlamalarının <MAP> ve </MAP> işaretleri arasında kalan <AREA> işaretleriyle yapıldığını gördük.

*        <AREA> işaretinin arkasına gelen SHAPE parametresinin değeri RECT olduğunda dikdörtgensel alanlar tanımlayabileceğimizi öğrendik.

*         COORDS parametresiyle ise tanımlayacağımız alanın koordinatlarını belirleyebileceğimizi gördük. Koordinatları sırasıyla sol üst köşenin x,y ve sağ alt köşenin x,y koordinatları şeklinde yazmamız gerektiğini gördük.

*        HREF parametresiyle tanımlanan alana tıklandığında hangi sayfaya gidileceğini belirleyebileceğimizi gördük.

*        Son olarak ALT parametresini kullanarak, fare imleci tanımlanan alan üzerindeyken, alan hakkında açıklayıcı bir yazı görüntüleyebileceğimizi öğrendik.

*         Dairesel alan tanımlarken SHAPE parametresinin değerinin CIRCLE olması gerektiğini ve COORDS parametresinin de sırasıyla dairenin merkezinin x,y koordinatları ile yarıçap değerlerini içermesi gerektiğini gördük.

*         Çokgensel alan tanımlamalarında SHAPE parametresinin değerinin POLY olması gerektiğini, COORDS parametresinin ise sırasıyla çokgeni oluşturan her noktanın x ve y koordinatlarını içermesi gerektiğini öğrendik.

Ana Sayfaya Dön