www.cihansalim.net
site içindeİnternet'te

  Mistik Resimler
  
Bu bölümün kurulmasının nedeni olan web'in sınır tanımazlığının bir başka örneğini de bu sayfada paylaşacağız.

tıklarsanız nasıl bir şey olduğunu yeni pencerede göreceksiniz
Buraya ya da resme tıklayarak açılacak pencerede yapacağımız şeyin bir örneğini görebilir, sadece meraktan göz gezdiriyorsanız da eğlenmiş olursunuz.

tıklayın, destekleyin:
Çoğu zaman bir şey gördüğümüzü sanırız, emin olmamın en iyi yolu gördüğümüzü paylaşmak, başkalarına göstermektir. E, o zaman sitenizi gelenleri böyle buhranlar içinde bırakmak için neyi bekliyorsunuz?
Halüsünasyonumsu ilüzyon olayını bir CSS (Cascading Style Sheets) yardımıyla hazırlıyoruz. clip ile resmin sadece belli bölümlerinde, farenin geçtiği alanlarda alternatif resmi ortaya çıkarıyoruz. Alternatif resmi yeşil olarak kullanıp ister burada olduğu gibi ışın rafine eden gözlükler kullanılıyormuş izlenimi verir, isterseniz güzel bir uyarlamayla iki resmi de aynı tonlarda kullanabilirsiniz.

Öncelikle işin script tarafı:

<SCRIPT language=JavaScript>
<!--

var divX,divY,swtDiv,showWidth,showHeight;
showWidth=100;
showHeight=80;

function initEvents() {
swtDiv=
document.getElementById?document.getElementById ("swtHidden"):document.all?document.all["swtHidden"]:null;
if (swtDiv) document.onmousemove=doMouse;
}
window.onload=initEvents;

function doMouse(arg) {
ev=arg?arg:event;
divX=(ev.pageX?ev.pageX:ev.clientX)-parseInt(swtDiv. style.left);
divY=(ev.pageY?ev.pageY:ev.clientY)-parseInt(swtDiv. style.top);
swtDiv.style.clip="rect("+(divY-showHeight/2)+" "+(divX+showWidth/2)+" "+(divY+showHeight/2)+" "+(divX-showWidth/2)+")";
}

function killMouse() {
swtDiv.style.clip="rect(0 0 0 0)";
}
//-->
</SCRIPT>

dikkat: eğer yukardaki kodları aynen alıp kopyalıyorsanız "swtDiv="in ardından gelen bölümün ve de "swtDiv.style.left" ile "swtDiv.style.top" diye başlayan satırların aralıksız olduğuna dikkat edin. Bendeniz sayfaya sığsın diye boşluk bıraktım.

İşte yukardaki bu script'i web sayfamızın <head> bölümü içine koyacağız.

Ardından <body> içine de resimleri şöyle yerleştirebiliriz:

<div style="top:80;left:20;position:absolute;">
<img src="image1.jpg" width=350 height=250></div>
<div style="top:80;left:20;position:absolute;clip:rect(0 0 0 0);" id="swtHidden">
<img src="image2.jpg" width=350 height=250>
</div>
Tabii image1 ve image2 isimlerini kendi dosyalarımızın ismiyle değiştireceğiz. Bu son bölümde ayrıca gözden kaçmaması gerekenler resimlerin boyutlarını ayarlamak. top: ve left: ise resimlerin sayfada nerede yer alacağını, tabii soldan ve tepeden ne kadar uzakta olacağını ayarlıyorlar. Eğer buradaki örnek gibi basit bir düzenek oluşturuyorsanız iki 'division'un sayıları eşit olmalı ama tabii ayarlar size kalmış.

Fikirlerinizi bekliyorum...

 


- İngilizceniz varsa size önerdiğim belli başlı tasarım siteleri şunlar:

- Builder.com (CNET'in popüler bölümü)
- GlassDog (Bu oldukça profesyonel)
- About.com (bu site derin ama hedefe varmak için biraz dolaşmanız lazım)
- Tips&Tricks
- Web Monkey (Tripod'un desteğiyle gün geçtikçe genişliyor)
- Web Techniques (Aylık yenilenen bir dergi mantığında)

- Ve en önemlisi Web'in bir anlamda 'sorumlusu' olan World Wide Web Konsorsiyumu yani W3'e ulaşmak da www.w3.org. Burada bu dile yeni eklenenleri, varolanlar hakkında açıklama ve değişiklikleri öğrenebilirsiniz.