Home Dreamweaver Dersler Şişen Resim Galerisi Yapımı
Şişen Resim Galerisi Yapımı

Şişen Resim Galerisi Yapımı

969
21

Merhaba arkadaşlar bu yazımızda farklı bir resim galerisi(üzerine gelince şişen””) yapacağız . Sitenizde belki bu tarz bir resim galerisine ihtiyaç duyabilirsiniz. Bizde bu amaçla sizlere bu çalışmaları sunuyoruz. İnşallah yeterince yardımcı oluyoruzdur.

Bu resim galerisi internet explorerda kare şeklinde, diğer browserlarda ise yuvarlak şekilde gözüküyor. 🙂 Ama sonuçta çalışan bir resim galerisi. Çalışma prensibi ise mouse üzerine geldiğinde büyüme efekti gibi resmi ön plana çıkartması ve  istersenizde tıklandığında başka bir sayfaya yönlendirebiliyorsunuz. Her resmin altında kendisine ait title başlığı var, yani resimlerin altına yazı yazabiliyorsunuz. Kısacası güzel bir resim galerisi çalışması.

Size verereceğim rar dosyasında 7 adet dosya var bunlarda neler yapmanız gerekli onları anlatayım. İmages Klasöründe galerinin arka planında kullanılan resim bulunmaktadır” bu kısmı istediğiniz gibi değiştirebilirsiniz“. CSS klasöründe ise sayfalarda kullanılan css lerin değişikliklerini yapıyorsunuz” mesela yazı tipini değiştirebilirsiniz”. ASSETS klasörü sizin için en önemli olan klasör, bu klasörün içindeki resimleri galerinizde kullanacağınız resimlerle değiştiriyorsunuz. Sonrasında ise index.html ,index2.html , index3.html dosyalarından hangisini beğendiyseniz onu dreamweaver programında açarak düzenlemelere başlıyorsunuz. Ben bir kaç düzenleme hakkında sizi bilgilendirmek istiyorum.

Aşağıda gördüğünüz assets klasörünün içindeki resim dosyaları burdaki resimleri koyacağınız resimler ve uzantılarıyla birlikte değiştiriyorsunuz. Örnek : mesela omer.jpg dosyanız var aşağıdaki dosyayı şöyle düzenlemeniz gerekiyor.

 <a href=”#”><img src=”assets/omer.jpg” alt=”” /></a>    bu şekilde.

ŞUNU UNUTMAYIN; Resimlere Tıklandığında Herhangi bir Sayfaya gitmiyor. Sadece O resmi seçmiş oluyorsunuz.

<div>
<div>
<a href=”#”><img src=”assets/img1.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img2.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img3.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img4.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img5.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img6.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img7.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img8.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img9.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img10.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img11.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img12.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img13.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img14.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img15.jpg” alt=”” /></a>
</div>

SORULARINIZ OLURSA LÜTFEN YORUM KISMINDAN SORUNUZ.

Anlatım: Ömer BOZALAN

Kolay gelsin

DemoButton
 

hemen-indir-butonu

 

(969)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(21)

      1. üst yoruma bakın lütfen yaptım olmadı orjinal dosyanızdan sadece link verdim tıklandığında gitmiyor resim büyüyüp kalıyor emeğinize sayğım sonsuz ama yardıma ihtiyacım var :/

  1. Bu resimlerdeki üzerine gelince yuvarlak bir şekilde şişmesi “<img src=”assets" kodundaki ( assets) mi sağlıyor

  2. Harika bir düşünce ve tasarım kutlarım ancak bu söz konusu rar dosyası nerede
    teşekkürler

  3. ömer bey yardım edebilir misiniz? sorun nedir? neden linklere gitmiyor acaba bunu da açıklarsanız memnun olurum.

    1. Kerim arkadaşım söylediğiniz üzere birçok işlem gerçekleştirerek link verme işlemi denenmiştir. Lakin hiçbir sonuç alınamamıştır. Resme tıklanmasının neden resmi seçili hale getirebilmek içindir. Diğer türlü link verilememektedir. Anlatımdaki link verme işlemini de sizin sayenizde değiştirdik. Teşekkürler. İyi çalışmalar.

  4. ömer bey benim sitemde script kodu var ikinci script kodu ekledigimde hata veriyo onu nasıl yapabilirim ?

  5. Mehrhaba ocam ilk once ellerinize salik cox guzel olmus ama ocam video caliwmiyor olurmu linki yenileyesin

Senin Yorumların

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.