| |
16/06/2007, 14:59
| #1 (permalink) |
| Üye Üyelik Tarihi: 04/2006
Mesaj: 20
|  resimle ilgili sorunum var
slm arkadaslar bir td hucresinin icine icine resim yukluyorum ve resmin uzerine mouse ile gelindiginde diger hucreleri bozmadan yan tarfata pencere icinde nasil gozterebilirim ? su linkteki resimlerin uzerine gelindiginde tam olarak ne demek istedigimi daha iyi anlayabilirsiniz http://www.hurriyetemlak.com/real_es...search=1&sc=20 tesekurler... |
|  |
|
16/06/2007, 21:26
| #2 (permalink) |
| Üye Üyelik Tarihi: 05/2007
Mesaj: 26
| 
Aşağıdaki kodun çalışan hali burada: http://vebgelistirme.googlepages.com/resimGoster.htm Kod:
<script type="text/javascript">
var el = document.createElement('div');
function resimGoster(resim,T) {
var table = document.getElementById('tableid');
el.style.position ="absolute"; // bunun absolute olması gerekiyor.
el.style.left = table.offsetLeft + 120 +"px"; // divin soldan uzaklığı
el.style.top = table.offsetLeft + T +"px"; // divin üstten uzaklığı
el.style.display = "block";
el.style.zIndex = "2"; // divin z-indexini büyük yapacağız ki önde görünsün.
el.innerHTML = "<img src="+resim.src+" style='width:200px; height:200px;' >" ;
document.body.appendChild(el); // divi body kısmına ekle.
}
function resimGizle() {
el.style.display = "none";
}
</script>
<style type="text/css">
body { margin:10px 10px 10px 10px; }
table { position:absolute; left:50px; top:50px;}
td { width:100px; height:100px;}
img { width:90px; height:90px; }
</style>
<body>
<table id="tableid">
<tr>
<td><img src="http://vebgelistirme.googlepages.com/lale.jpg" onmouseover="resimGoster(this,0)" onmouseout="resimGizle()"></td><td>Burası tablo hücresi</td><td>Burası tablo hücresi</td>
</tr><tr>
<td><img src="http://vebgelistirme.googlepages.com/istanbul2.jpg" onmouseover="resimGoster(this,100)" onmouseout="resimGizle()"></td><td>Burası tablo hücresi</td><td>Burası tablo hücresi</td>
</tr><tr>
<td><img src="http://vebgelistirme.googlepages.com/ebru.jpg" onmouseover="resimGoster(this,200)" onmouseout="resimGizle()"></td><td>Burası tablo hücresi</td><td>Burası tablo hücresi</td>
</tr>
</table>
|
|
| |
|
17/06/2007, 01:56
| #3 (permalink) |
| Bi Kendini Kurtaramayan  Üyelik Tarihi: 04/2007
Mesaj: 158
| ayshe tebrikler güzel bir örnek olmus.. Kodları inceleyince bendede olan bir sorunun olduğunu farkettim... Sorun şu html kodlaımız içindeki elementlerin style özellikleri düzenlenmeden left ve top değerlerini elde etmemiz mümkün değilmi acaba... Yani sunu solemek istiyorum. Senin kodlarda yazdığın fonksiyonun içinde üstten uzaklık değerini T olarak her her element için kendin belirlemissin... Acaba bir elementin üstten uzaklık değerini bulmamız mümkün değilmi??? Biraz karısık oldu sanırım sorum bu saatte anca bole napalım..
__________________ Ne olacak bu işin sonu Nereye kadar |
|
| |
|
17/06/2007, 14:02
| #4 (permalink) |
| Üye Üyelik Tarihi: 05/2007
Mesaj: 26
|
Kurtaran, Ben ilk önce tablo içindeki resmin sol ve üstten uzaklığını alarak yapmayı denedim. Ama mesaj kutusu "1" gösteriyordu. Ama soldan veya üstten uzaklığı 1 değildi. Belki tablonun solundan ve üstenden uzaklığı olabilir bu değer. Aynı elemana sitil ile left ve top özellikleri eklersem o zaman öğrenebiliyorum. Burada önemli bir husus da position:absolute yi kullanmak gerekiyor. Eğer position:relative yi kullanacaksan body için margin değeri belirlemen gerekir. Aksi halde bazı tarayıcılarda 8px lik kayma olacaktır. Kod:
<style type="text/css">
table{ border:2px solid blue;}
</style>
<body style="margin:10px 10px 10px 10px;">
<img src="http://vebgelistirme.googlepages.com/lale.jpg" onclick="alert(this.offsetTop); alert(this.offsetLeft); alert(this.style.left); alert(this.style.top)" alt="Bu resmin sitil özelliği yok.1. resim">
<img src="http://vebgelistirme.googlepages.com/lale.jpg" style="position:absolute; left:100px; top:100px;"onclick="alert(this.offsetTop); alert(this.offsetLeft); alert(this.style.left); alert(this.style.top)" alt="Bu resmin sitil özelliği var. 2. resim">
<table><tr><td>
<img src="http://vebgelistirme.googlepages.com/lale.jpg" onclick="alert(this.offsetTop); alert(this.offsetLeft); alert(this.style.left); alert(this.style.top)" alt="Bu resmin sitil özelliği var. 3. resim">
</td></tr></table>
<table><tr><td>
<img src="http://vebgelistirme.googlepages.com/lale.jpg" style="position:absolute; left:300px; top:200px;"onclick="alert(this.offsetTop); alert(this.offsetLeft); alert(this.style.left); alert(this.style.top)" alt="Bu resmin sitil özelliği yok. 4. resim">
</td></tr></table>
<img src="http://vebgelistirme.googlepages.com/lale.jpg" onclick="alert(this.offsetTop); alert(this.offsetLeft); alert(this.style.left); alert(this.style.top)" alt="Bu resmin sitil özelliği yok. 5. resim">
|
|
| |
|
21/06/2007, 11:06
| #5 (permalink) |
| Üye Üyelik Tarihi: 06/2007 Yer: Tokat
Mesaj: 11
| İlginc bi Js
Aslında bende resimleri sergileyebilmek için ve özellikle php asp den anlamadığım için ve sadece HTML ile site yaptığım için banada resimlerin üzerine tıklandığında diğer içerikleri bozmayan bi js gerekti. Aslında buldum. Ama karman çorman bişey. bu işin pratiğini siz ustalara bırakayım. Benim uzmanlık alanım değil. Bulduğum js ekte...
|
|
| |
|
21/06/2007, 11:46
| #6 (permalink) |
| Üye Üyelik Tarihi: 06/2007 Yer: Tokat
Mesaj: 11
|
en üstteki java yı inceledimde. bi eksiği var gibi. Üzerine geldiğimiz resimle açılan resim aynı. Onun için büyütüldüğünde resim bozuluyor. Ben web sitemde Tabiri caizse teşhir ettiğim resim ayrı detayını gösterdiğim resim ayrı. Küçük Resim 80*80, tıklandığında açılan ise yaklaşık 550*450 ebatında. Bana bu şekilde birşey lazım.
|
|
| |
|
21/06/2007, 13:13
| #7 (permalink) |
| Bi Kendini Kurtaramayan Üyelik Tarihi: 04/2007
Mesaj: 158
|
ayşe teşekkürler verdiğin ornek olayı tam anlamıyla acıklıyo sanırım... offsetTop kullanımını bilmiyordum tam ogrendiğim iyi oldu. unattended; sende ayşenin verdiği ilk ornekte linklerde verilen resim goster fonksiyonunun içine this yerine gostermek istediğin büyük resmin adresini yazarsan istediğin olur ...
__________________ Ne olacak bu işin sonu Nereye kadar |
|
| |
|
21/06/2007, 15:44
| #8 (permalink) |
| Üye Üyelik Tarihi: 06/2007 Yer: Tokat
Mesaj: 11
| Kurtaran
Onuda denedim. Ama 5 kb dosya ile 30-40 kb dosya web de içerik dolaşımı açısından fark ediyor. Birde ben küçük gösterdiğim resmi açıklamasız büyüğü açıklamalı olarak ayarladığımdan bu Js açıkçası benim işimi görmedi. Ama yinede teşekkürler  |
|
| |
|
21/06/2007, 15:46
| #9 (permalink) |
| Üye Üyelik Tarihi: 06/2007 Yer: Tokat
Mesaj: 11
|
Yukarıdaki Image Thumbnail Viewer.zip dosyasını bi incelerseniz. Güzel hazırlanmış. Ama çözemedim
|
|
| |
|
21/06/2007, 16:07
| #10 (permalink) |
| Üye Üyelik Tarihi: 05/2007
Mesaj: 26
|
En son olarak yaptığım kod: http://vebgelistirme.googlepages.com/resimGoster3.htm İlk kodda Kurtaran'ın belirttiği gibi değişiklik yaptım ve siteye ekledim. Nasıl çalıştığını görmek için aşağıdaki linki tıklaman gerekiyor. http://vebgelistirme.googlepages.com/resimGoster2.htm Kod:
<html><head><script type="text/javascript">
var el = document.createElement('div');
function resimGoster(resim,T) {
var table = document.getElementById('tableid');
el.style.position ="absolute"; // bunun absolute olması gerekiyor.
el.style.left = table.offsetLeft + 120 +"px"; // divin soldan uzaklığı
el.style.top = table.offsetLeft + T +"px"; // divin üstten uzaklığı
el.style.display = "block";
el.style.zIndex = "2"; // divin z-indexini büyük yapacağız ki önde görünsün.
el.innerHTML = "<img src="+resim+" style='width:550px; height:450px;' >" ;
document.body.appendChild(el); // divi body kısmına ekle.
}
function resimGizle() {
el.style.display = "none";
}
</script>
<style type="text/css">
body { margin:10px 10px 10px 10px; }
table { position:absolute; left:50px; top:50px;}
td { width:100px; height:100px;}
img { width:80px; height:80px; }
</style></head><body>
<table id="tableid">
<tbody><tr>
<td><img src="lale.jpg" onmouseover="resimGoster('kizkulesi.jpg',0)" onmouseout="resimGizle()"></td><td>Burası tablo hücresi</td><td>Burası tablo hücresi</td>
</tr><tr>
<td><img src="istanbul2.jpg" onmouseover="resimGoster('sultan-ahmet-cami.jpg',100)" onmouseout="resimGizle()"></td><td>Burası tablo hücresi</td><td>Burası tablo hücresi</td>
</tr><tr>
<td><img src="ebru.jpg" onmouseover="resimGoster('sultan-ahmet-cami-ici.jpg',200)" onmouseout="resimGizle()"></td><td>Burası tablo hücresi</td><td>Burası tablo hücresi</td>
</tr>
</tbody></table><div style="position: absolute; left: 170px; top: 50px; display: none; z-index: 2;"><img src="resimGoster_files/lale.jpg" style="width: 200px; height: 200px;"></div></body></html>
|
|
| |
 |
| Bookmarks |
| Seçenekler | |
| |
Benzer Konular | ||||
| Konu | Konuyu açana göre | Forum | Cevap | En Son Mesaj |
| div ile ilgili sorunum var? | maxmann | Web Tasarım | 5 | 10/02/2007 01:04 |
| mod_rewrite ile ilgili bir sorunum | n0fx | PHP | 0 | 12/11/2006 04:16 |
| FTP ile ilgili bir sorunum var | Drag_1O | Web Tasarım | 4 | 10/08/2006 21:13 |
| Dll ile ilgili sorunum!! | writeLine | Pascal / Delphi / Delphi.NET | 6 | 29/03/2006 05:49 |
| Reklamlar & Desteklenenler | |
| Hassas Valf | Hassas Kaplama | Antalyamız | Gazete | Ticari Bilişim | Hakan Müştak | Rüya Tabirleri | Kadın | Hastalıklar | Cepte msn ve e-posta | Webmaster | Antalya Aupair | Turkish Property Antalya | Forum | Chat | Perde | Adsl | Araba | bolindir.com | guncelle.com | livescore | Web Tasarım | evden eve nakliyat | forum | evden eve | sohbet | Resimcim| Kalifiye İnsan Kaynakları | Web Tasarım | Oyun | Yusuf KOÇ | Akın Yorulmaz | şiir | UFO | Web Tasarım | Oyunlar | Canlı Tv | |
