Bir resim galerisi oluşturabilmek için öncelikle büyük resmi göstereceğimiz bir alana ihtiyacımız var.

Resim Galerisi

Bir resim galerisi oluşturabilmek için öncelikle büyük resmi göstereceğimiz bir alana ihtiyacımız var. Bu büyük resmin altında eşit piksellerde 4 ve/veya tercihe göre 5 küçük resim alanı oluşturmalıyız. Bunları oluşturduktan sonra küçük resimlerin bulunduğu div lerin mouseover ve mouseout özelliklerinden faydalanarak büyük resmin içeriğini değiştirmeliyiz. Buraya kadar herşey tamam. Peki ya resimlerin üzerine gelinmediğinde belli bir süre geçtikten sonra resmin kendisinin değişmesini nasıl sağlarız. Bunun için de Javascript in setTimeout özelliğini kullanırak bu işlemi otomatik olarak gerçekleştirmiş olacağız.

Aşağıda örnek javascript i kendi amaçlarınıza göre özelleştirebilirsiniz. Benim tercih ettiğim eklentiler aşağıdaki gibidir.

 

 

    var ThumbPicture = new Object();

    ThumbPicture.PicId = 0;

    ThumbPicture.MaxPic = 4;

    ThumbPicture.Wait = 0;

    ThumbPicture[0] = new Object();

    ThumbPicture[0].pLink = "url(Norm/Haber1.jpg)";

    ThumbPicture[0].tLink = "url(thumb/Haber1.jpg)";

    ThumbPicture[0].hLink = "Hastane.aspx";

    ThumbPicture[0].ToolTip = "Hastanelerimiz sitemizde çevrimiçi sizlerin sorularınızı bekliyor.";

    ThumbPicture[0].HaberId = 0;

    ThumbPicture[1] = new Object;

    ThumbPicture[1].pLink = "url(Norm/Hastane.jpg)";

    ThumbPicture[1].tLink = "url(thumb/Hastane.jpg)";

    ThumbPicture[1].hLink = "Doktor.aspx";

    ThumbPicture[1].ToolTip = "Doktorlarımız sitemizde çevrimiçi sizlerin sorularınızı bekliyor.";

    ThumbPicture[1].HaberId = 0;

    ThumbPicture[2] = new Object;

    ThumbPicture[2].pLink = "url(Norm/Doktor.jpg)";

    ThumbPicture[2].tLink = "url(thumb/Doktor.jpg)";

    ThumbPicture[2].hLink = "Ilac.aspx";

    ThumbPicture[2].ToolTip = "İlaç Firmaları sitemizde çevrimiçi sizlerin sorularını bekliyor.";

    ThumbPicture[2].HaberId = 0;

    ThumbPicture[3] = new Object;

    ThumbPicture[3].pLink = "url(Norm/Eczane.jpg)";

    ThumbPicture[3].tLink = "url(thumb/Eczane.jpg)";

    ThumbPicture[3].hLink = "Harita.aspx";

    ThumbPicture[3].ToolTip = "Tüm sağlık sektörü harita üzerinde";

    ThumbPicture[3].HaberId = 0;

Yukarıda Resimlerimiz ile ilgili javascript değişkenlerimizi tanımladık. Bunları bir xml dosyasından alabileceğimzi gibi c# page_load bölümünden Page.RegisterScriptBlock özelliği ile de bu değişkenlerin içeriğini koddan değiştirebiliriz. Küçük resimlerin mouse ile üzerine gelindiğinde çalışmasını istediğimiz fonksiyon un kodları ise :

 

    function FocusImage(value)

    {

        ThumbPicture.PicId = value;

        ThumbPicture.Wait=1;

        document.getElementById("BigPicture").style.backgroundImage = ThumbPicture[ThumbPicture.PicId].pLink;       

    }

Yukarıdaki script e göstermesini istediğimiz küçük resmin sıra numarasını (0,1,2,3) verdiğimizde büyük resmin bulunduğu yere resmi çağırmış olacak.  Şimdi ise belli sürelerde bu fonksiyonun tetiklenmesini sağlayalım. Bunu da aşağıdaki javascript kodunu yazarak gerçekleştirebiliriz.

 

    function Started() {

        document.getElementById("BigPicture").style.backgroundImage = ThumbPicture[ThumbPicture.PicId].pLink;

       

        ThumbPicture.PicId++;

        if (ThumbPicture.PicId==ThumbPicture.MaxPic)

            ThumbPicture.PicId=0;

        setTimeout('Animation()',5000);

//setTimout('bu alana gitmesini istediğiniz fonksiyonu yazın', bu bölüme ise mili saniye cinsinden süreyi girin);

    }

    function Animation()

    {

        if (ThumbPicture.Wait==1)

            return false;

       

        ThumbPicture.PicId++;

        if (ThumbPicture.PicId==ThumbPicture.MaxPic)

            ThumbPicture.PicId=0;

        setTimeout('Animation()',5000);

    }

Şimdi ise html kodlarımızı şekillendirelim. Öncelikle body de onload olayını Started fonksiyonuna göndermemiz gerekiyor. Böylelikle sayfamız yüklendiği anda belli bir süreyle resimlerin değişimini sağlayacaktır.

 

      <body  onload="Started();">

                    <div class="PictureField">

                        <div class="PictureTab">

                            <div id="BigPicture" class="BigPicture" onmouseover="ThumbPicture.Wait=1" onmouseout="ThumbPicture.Wait=0;setTimeout('Animation()',5000);">

                            </div>

                        </div>

                        <div id="ThumbPict0" onmouseover="FocusImage(0)" onmouseout="ThumbPicture.Wait=0;setTimeout('Animation()',5000);">

                           

                        </div>

                        <div id="ThumbPict1" onmouseover="FocusImage(1)" onmouseout="ThumbPicture.Wait=0;setTimeout('Animation()',5000);">

                           

                        </div>

                        <div id="ThumbPict2" onmouseover="FocusImage(2)" onmouseout="ThumbPicture.Wait=0;setTimeout('Animation()',5000);">

                           

                        </div>

                        <div id="ThumbPict3" onmouseover="FocusImage(3)" onmouseout="ThumbPicture.Wait=0;setTimeout('Animation()',5000);">

                        </div>

                    </div>

 

      </body>

 

İlgili Makaleler

Bu yazıya 4 yorum yapılmış.

  • Who needs eyeballs, you need BUSINESS -

    My name’s Eric and I just came across your website - yazilimuzmanlari.com - in the search results. Here’s what that means to me… Your SEO’s working. You’re getting eyeballs – mine at least. Your content’s pretty good, wouldn’t change a thing. BUT… Eyeballs don’t pay the bills. CUSTOMERS do. And studies show that 7 out of 10 visitors to a site like yazilimuzmanlari.com will drop by, take a gander, and then head for the hills without doing anything else. It’s like they never were even there. You can fix this. You can make it super-simple for them to raise their hand, say, “okay, let’s talk” without requiring them to even pull their cell phone from their pocket… thanks to Talk With Web Visitor. Talk With Web Visitor is a software widget that sits on your site, ready and waiting to capture any visitor’s Name, Email address and Phone Number. It lets you know immediately – so you can talk to that lead immediately… without delay… BEFORE they head for those hills. CLICK HERE http://talkwithcustomer.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works. Now it’s also true that when reaching out to hot leads, you MUST act fast – the difference between contacting someone within 5 minutes versus 30 minutes later is huge – like 100 times better! That’s what makes our new SMS Text With Lead feature so powerful… you’ve got their phone number, so now you can start a text message (SMS) conversation with them… so even if they don’t take you up on your offer right away, you continue to text them new offers, new content, and new reasons to do business with you. This could change everything for you and your business. CLICK HERE http://talkwithcustomer.com to learn more about everything Talk With Web Visitor can do and start turing eyeballs into money. Eric PS: Talk With Web Visitor offers a FREE 14 days trial – you could be converting up to 100x more leads immediately! It even includes International Long Distance Calling. Paying customers are out there waiting. Starting connecting today by CLICKING HERE http://talkwithcustomer.com to try Talk With Web Visitor now. If you'd like to unsubscribe click here http://talkwithcustomer.com/unsubscribe.aspx?d=yazilimuzmanlari.com

  • Who needs eyeballs, you need BUSINESS -

    My name’s Eric and I just came across your website - yazilimuzmanlari.com - in the search results. Here’s what that means to me… Your SEO’s working. You’re getting eyeballs – mine at least. Your content’s pretty good, wouldn’t change a thing. BUT… Eyeballs don’t pay the bills. CUSTOMERS do. And studies show that 7 out of 10 visitors to a site like yazilimuzmanlari.com will drop by, take a gander, and then head for the hills without doing anything else. It’s like they never were even there. You can fix this. You can make it super-simple for them to raise their hand, say, “okay, let’s talk” without requiring them to even pull their cell phone from their pocket… thanks to Talk With Web Visitor. Talk With Web Visitor is a software widget that sits on your site, ready and waiting to capture any visitor’s Name, Email address and Phone Number. It lets you know immediately – so you can talk to that lead immediately… without delay… BEFORE they head for those hills. CLICK HERE https://talkwithwebvisitors.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works. Now it’s also true that when reaching out to hot leads, you MUST act fast – the difference between contacting someone within 5 minutes versus 30 minutes later is huge – like 100 times better! That’s what makes our new SMS Text With Lead feature so powerful… you’ve got their phone number, so now you can start a text message (SMS) conversation with them… so even if they don’t take you up on your offer right away, you continue to text them new offers, new content, and new reasons to do business with you. This could change everything for you and your business. CLICK HERE https://talkwithwebvisitors.com to learn more about everything Talk With Web Visitor can do and start turing eyeballs into money. Eric PS: Talk With Web Visitor offers a FREE 14 days trial – you could be converting up to 100x more leads immediately! It even includes International Long Distance Calling. Paying customers are out there waiting. Starting connecting today by CLICKING HERE https://talkwithwebvisitors.com to try Talk With Web Visitor now. If you'd like to unsubscribe click here http://talkwithwebvisitors.com/unsubscribe.aspx?d=yazilimuzmanlari.com

  • Try this, get more leads -

    Hi, my name is Eric and I’m betting you’d like your website yazilimuzmanlari.com to generate more leads. Here’s how: Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. It signals you as soon as they say they’re interested – so that you can talk to that lead while they’re still there at yazilimuzmanlari.com. Talk With Web Visitor – CLICK HERE http://talkwithcustomer.com for a live demo now. And now that you’ve got their phone number, our new SMS Text With Lead feature enables you to start a text (SMS) conversation – answer questions, provide more info, and close a deal that way. If they don’t take you up on your offer then, just follow up with text messages for new offers, content links, even just “how you doing?” notes to build a relationship. CLICK HERE http://talkwithcustomer.com to discover what Talk With Web Visitor can do for your business. The difference between contacting someone within 5 minutes versus a half-hour means you could be converting up to 100X more leads today! Try Talk With Web Visitor and get more leads now. Eric PS: The studies show 7 out of 10 visitors don’t hang around – you can’t afford to lose them! Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling. You have customers waiting to talk with you right now… don’t keep them waiting. CLICK HERE http://talkwithcustomer.com to try Talk With Web Visitor now. If you'd like to unsubscribe click here http://talkwithcustomer.com/unsubscribe.aspx?d=yazilimuzmanlari.com

  • Try this, get more leads -

    Hi, my name is Eric and I’m betting you’d like your website yazilimuzmanlari.com to generate more leads. Here’s how: Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. It signals you as soon as they say they’re interested – so that you can talk to that lead while they’re still there at yazilimuzmanlari.com. Talk With Web Visitor – CLICK HERE http://talkwithcustomer.com for a live demo now. And now that you’ve got their phone number, our new SMS Text With Lead feature enables you to start a text (SMS) conversation – answer questions, provide more info, and close a deal that way. If they don’t take you up on your offer then, just follow up with text messages for new offers, content links, even just “how you doing?” notes to build a relationship. CLICK HERE http://talkwithcustomer.com to discover what Talk With Web Visitor can do for your business. The difference between contacting someone within 5 minutes versus a half-hour means you could be converting up to 100X more leads today! Try Talk With Web Visitor and get more leads now. Eric PS: The studies show 7 out of 10 visitors don’t hang around – you can’t afford to lose them! Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling. You have customers waiting to talk with you right now… don’t keep them waiting. CLICK HERE http://talkwithcustomer.com to try Talk With Web Visitor now. If you'd like to unsubscribe click here http://talkwithcustomer.com/unsubscribe.aspx?d=yazilimuzmanlari.com

Yorum Gönder