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.

     

    Reply With Quote Alıntı yap
  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.
    Reply With Quote Alıntı yap
  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. "Sen olursan boş bardak , sana olur koyan çok su. a.g."
    Reply With Quote Alıntı yap
  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Ü
    Reply With Quote Alıntı yap
  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

    Reply With Quote Alıntı yap
  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|
    Reply With Quote Alıntı yap
  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... :)
    Reply With Quote Alıntı yap
  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/

    :|
    Reply With Quote Alıntı yap
  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

    Reply With Quote Alıntı yap
  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... :)
    Reply With Quote Alıntı yap
  11. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Abizittin
    Abizittin's avatar
    Kayıt Tarihi: 19/Haziran/2008
    Erkek

    http://www.eburhan.com/css-ile-zarif-arama-kutulari-hazirlamak/

    Reply With Quote Alıntı yap
Toplam Hit: 5441 Toplam Mesaj: 13