folder Tahribat.com Forumları
linefolder Html - CSS - XML - JavaScript - Ajax
linefolder İnput İçine Resim Koyma (Arama Kutucuğuna Büyüteç Ekleme)



İnput İçine Resim Koyma (Arama Kutucuğuna Büyüteç Ekleme)

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Ayro
    Ayro's avatar
    Kayıt Tarihi: 08/Ağustos/2005
    Erkek

    http://www.apple.com/

    sağ üstte güzel bir arama kutusu mevcut.Bir tane büyüteç birtanede çarpı koymuşlar.

    background ile ilgili şöyle birşey var : http://paste.org/pastebin/view/38261

    --

    kısacası, facebookta'ta olduğu gibi input içine nasıl resim konulabilir ? 

    Background ile ayarlama yapmayacağım fakat.O tamam.BEnim istediğim aktif birşey olsun.Tıklanabilsin ; javascript çalıştırayım.

     

  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    FCN
    FCN's avatar
    Kayıt Tarihi: 28/Eylül/2007
    Erkek
    tasarımcı değilim ama sanırım inputun içinde değil onlar .
    resim input resim olarak yapılmış arkafonda aynı olunca beyaz fonla sağdan soldan kavis vermişlr. inputun içinde gibi duruyor.
  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    hipokondriyak
    hipokondriyak's avatar
    Kayıt Tarihi: 02/Temmuz/2007
    Erkek

    input içinde değil text areanın önünde bbuyutec


    Homo sapiens, yaşamak için, diğer canlıların yaşamasına muhtaç; obligat parazit türüdür.
  4. KısayolKısayol reportŞikayet pmÖzel Mesaj
    ndmylmz
    ndmylmz's avatar
    Kayıt Tarihi: 01/Ocak/2010
    Erkek

    ikiside resim sadece hocam input içinde değil yanındalar jquery focus fonksiyonu ile yaptırıyorlar..


    Sistemi de kapattım ama PHP konusunda hala yardımcı olurum // Boş gezenin boş kalfası - Öğrenci - YTÜ
  5. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Ayro
    Ayro's avatar
    Kayıt Tarihi: 08/Ağustos/2005
    Erkek

    hayda gerçektende öyleymiş kaçırdım :/ teşekkürler

  6. KısayolKısayol reportŞikayet pmÖzel Mesaj
    wert
    wert's avatar
    Kayıt Tarihi: 19/Eylül/2005
    Erkek
    hazır konusu açılmışken şu resimleri dataya nasıl çeviriyoruz :|

    |sadece aptalların başarısı ders notu ile ölçülür|
  7. KısayolKısayol reportŞikayet pmÖzel Mesaj
    sezeruludag
    sezeruludag's avatar
    Kayıt Tarihi: 22/Ağustos/2011
    Erkek

    Yapması Biraz Karışık Fakat Kolay Zor Değildir.

    Öncelikle bir örnek gösterim onu yap

    http://www.iconfinder.com/icondetails/51535/26/magnifyingglass_search_zoom_icon

    buradan icon'u indir daha sonra bir div aç genişliğini ve yükseliğini kendin belirle ardından içerisine resimi ekle resim mümkünse PNG olsun :) sonra bunun align ayarını "LEFT" yap resimle ilgili işimiz bitti :) textfield nesnesini al bütün border özelliklerini sıfırla boyutunuda resim ile aynı yap yüksekliğini yani sonra oluşturduğun "DİV"'e 1 px border ver istediğin oldu :) kendi yaptığım örneğin kodlarını atayım :)

     

    <style type="text/css">
    #search {
    	padding: 3px;
    	width: 200px;
    	border: thin solid #CCC;
    }
    .textfield {
    	text-decoration: none;
    	background-color: #FFF;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	border-top-color: #FFF;
    	border-right-color: #FFF;
    	border-bottom-color: #FFF;
    	border-left-color: #FFF;
    	width: 167px;
    	height: 26px;
    }
    .images {
    	margin-right: 5px;
    }
    </style>

    CSS'kodu bu şekilde  #search'u DİV için ver .textfield text nesenesi için images ise resim için

     

    <div id="search">
    <img src="1315742690_magnifyingglass.png" width="26" height="26" align="left" class="images" />
    
    <label for="textfield"></label>
    <input name="textfield" type="text" class="textfield" id="textfield" />
    </div>
    Buda Div ve nesnelerin kodu İcon Finder'dan indir Büyüteç icon'nunu PNG olarak dene :)


    Hatasız Kod Olmaz... :)
  8. KısayolKısayol reportŞikayet pmÖzel Mesaj
    pesimistzombie
    pesimistzombie's avatar
    Kayıt Tarihi: 14/Haziran/2006
    Erkek

    ne gerek var o kadar dive? :/

    http://cssbeauty.com/skillshare/discussion/2471/input-field-with-icon-or-background-image/


    :|
  9. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Ayro
    Ayro's avatar
    Kayıt Tarihi: 08/Ağustos/2005
    Erkek

    pesimistzombie bunu yazdı:
    -----------------------------

    ne gerek var o kadar dive? :/

    http://cssbeauty.com/skillshare/discussion/2471/input-field-with-icon-or-background-image/


    -----------------------------

     

    abi büyütece tıkladımı araması gerek . arkaplana eklemek o yüzden problem;

    bu arada apple'ında input içinde.İnput değerlerine baktığınızda sol tarafa padding atmış adamlar resim için

    sezeruludag sağol hocam bakıyorum şimdi

  10. KısayolKısayol reportŞikayet pmÖzel Mesaj
    sezeruludag
    sezeruludag's avatar
    Kayıt Tarihi: 22/Ağustos/2011
    Erkek

    Tercih Meselesi :) Öylede olabilir  ben bu şekilde kullanıyordum :) Sağ tarafta button için :)


    Hatasız Kod Olmaz... :)
  11. KısayolKısayol reportŞikayet pmÖzel Mesaj
Toplam Hit: 4701 Toplam Mesaj: 13