: Css ile Resim Haritası Oluşturma ( imagemap )
Android Oyun Hilesi

Css ile Resim Haritası Oluşturma ( imagemap )

Savaş Can Altun
5 sene önce

Bu dersimizde Css ile üsteki gibi bir İmageMap yapıcağız aslında eskiden bu sistem daha cok html ile kullanılırdı ama css ile daha hoş olduğundan css de anlatıyorum.

HTML kodumuz :

Css Kodumuz :

Kodları Tek Tek anlatımla yazıyorum.

Aşağıdaki kodda her bir haritalanacak nesne bir link olduğu için her birine tek tek atamaktansa genel bir tanım ile tüm linkleri mutlak konumlandırıyoruz ve kenar çizgisini tanımlıyoruz.

Her bir haritalanacak eleman için genişlik yüksek tanımını yapıyor ve kapsayıcı elemana göre konumunu belirliyoruz. Ayrıca haritalanan elemanların açıklamaları için konumu tanımı ve görünüm tanımlarını yapıyoruz.

ayrıca resimdekine benzesin diye kenarlığını oval laştırıyoruz.

Amacımız Flickr tipi bir resim haritası oluşturmak olduğu için, iki kenar çizgisi tanımı yapmak için iki adet etiketi yazdık ve bunlara dış(.dis) ve iç(.ic) sınıfları tanımladık.

Fare haritalanan alanların üzerine gelince çıkacak bilgilendirme alanının yerini belirliyoruz.

Tüm resmin üzerine gelindiğinde ve haritalanan alanların üzerine gelindiğinde kenar çizgi renklerini değiştirerek farklı bir görünüm kazandırıyoruz.

İşlemimiz bu kadar : ) bir sonraki dersimizde görüşmek üzere..

 

Bu Yazıyı Paylaş : Css ile Resim Haritası Oluşturma ( imagemap ) kutladı yazısını paylaş Css ile Resim Haritası Oluşturma ( imagemap ) yazısını paylaş
Yazar: Hakkında
Uzun bir süredir web işleri ile uraşan freelance calışan bir yazılımcı. www.savascanaltun.com ve www.saltun.net 'in kurucu ve geliştirici. freelance iş vermek için iletişim kısmından ulaşa bilirsiniz referanslarım ve uzmanlık alanlarım için üst menüden portfolyo kısmına tıklayınız.
Benzer Yazılar
Merhaba arkadaşlar gecenin 01:00'inde sizin'de sitenize eklemeniz için güzel bir animasyon buldum sizinle paylaşmak istedim. Sitemin şuan...
Gün geçtikçe gelişen teknoloji sayesinde artık html5 ile oyunlarda yapılmaya başladığını söylemiştik. şimdi  7 den 70'e coğunuzu...
Merhaba arkadaşlar bu makalemde istek üzerine <meta> etiketlerini anlatacağım. fazla zor sayılmaz html genel temel etiketlerinden biri...
nofollow link nedir biraz ondan bahsedelim arkadaşlar. Basitce "nofollow"'link'i açıklayalım. nofollow'linkler arama motorlarının izlen...
Yorumlar
    Css ile Resim Haritası Oluşturma ( imagemap ) Hakkında Yorum Yaz
Sponsorumuz
#
Sponsor Reklamlar
 Reklam Alanı
 Reklam Alanı
 Reklam Alanı
 Reklam Alanı
 Reklam Alanı
 Reklam Alanı
 Reklam Alanı
 Reklam Alanı
 Reklam Alanı
 Reklam Alanı
 Reklam Alanı
 Reklam Alanı
Son Yazılar
Kategoriler
Sponsorumuz
#
Etiketler


Sosyal Ağlarda Ben.

Tavsiye Linkler

Google Sıra Bulucu

Yandex.Metrica
Copyright © 2013. Tüm Hakları saklıdır. Sitemizdeki yazı, resim ve haberlerin her hakkı saklıdır. İzinsiz ve kaynak gösterilmeden kullanılamaz.