| | |
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.
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.
Ç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...
|
|
