login  Naam:   Wachtwoord: 
Registreer je!
 Forum

plaatje in de zoekbox (Opgelost)

Offline wes - 20/09/2007 16:09
Avatar van wesPHP interesse Hallo,

Ik wil een zoekboxje maken met daarin een plaatje, net zoiets als bij http://code.google.com onder Search Google Code:

Wie weet hoe je zoiets kan maken?

9 antwoorden

Gesponsorde links
Offline JanW - 20/09/2007 16:25
Avatar van JanW Nieuw lid Hier gebruiken ze een stukje javascript voor:

Dit is een deel dat ik eruit heb kunnen halen:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. (function() { var f = document.getElementById('searchbox_015986126177484454297:pfmwlvdl42y'); if (!f) { f = document.getElementById('searchbox_demo'); } if (f && f.q) { var q = f.q; var n = navigator; var l = location; if (n.platform == 'Win32') { q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;'; } var b = function() { if (q.value == '') { q.style.background = '#FFFFFF url(http://google.com/coop/images/google_custom_search_watermark.gif) left no-repeat'; } }; var f = function() { q.style.background = '#ffffff'; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();
Offline marten - 20/09/2007 16:29
Avatar van marten Beheerder Je kan de input gewoon opmaken met css geef in de input een background mee.
Offline Orves - 20/09/2007 16:32 (laatste wijziging 20/09/2007 16:33)
Avatar van Orves Nieuw lid Het kan ook buiten het gebruik om van JS natuurlijk door gebruik te maken van CSS.
Om het plaatje vast als achtergrond te houden maak je een class aan voor de input bijvoorbeeld:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .search {
  2.  background: url(locatievanjeplaatje.png);
  3. }


Mocht je een icoontje aan het begin van je inputveld willen laten zien, bijvoorbeeld een vergrootglas en daarna de tekst willen laten beginnen dan doe je het volgende:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .search {
  2.  text-indent: 20px;
  3.  background: url(locatievanjeplaatje.png) no-repeat;
  4. }


Ik heb even het standaard formaat voor een icoontje genomen, namelijk 16px. Door een text-indent toe te voegen verschuif je de tekst als het ware. Let op dit is niet hetzelfde als margin en padding.

Bovenstaande is ook allemaal netjes via JS te regelen.
Offline mathiasB - 20/09/2007 17:00
Avatar van mathiasB HTML interesse Maar met css verdwijnt het plaatje niet. Of wel?
Offline Rens - 20/09/2007 17:25
Avatar van Rens Gouden medaille

Crew algemeen		 Verander met een onclick de class...
Offline wes - 20/09/2007 18:11 (laatste wijziging 20/09/2007 20:00)
Avatar van wes PHP interesse ik heb nu dit:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.  
  4. <title>input text</title>
  5.  
  7. .input {
  8. background-image: url('google_custom_search_watermark.gif');
  9. background-repeat: no-repeat;
  10. }
  12.  
  13. </head>
  14.  
  16.  
  17. <input type="text" class="input">
  18.  
  19. </body>
  20.  
  21. </html>


Maar hoe doe ik dat als je erop klikt dat de achtergrond dat weggaat?

Edit:

Niemand??
Offline jerone - 21/09/2007 00:38
Avatar van jerone JS gevorderde
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <input name="" type="text" id="keyboardInputInitiator0" style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url(http://google.com/coop/images/google_custom_search_watermark.gif) no-repeat scroll left center; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" onFocus="document.getElementById('keyboardInputInitiator0').style.background = ''" onBlur="document.getElementById('keyboardInputInitiator0').style.background = 'rgb(255, 255, 255) url(http://google.com/coop/images/google_custom_search_watermark.gif) no-repeat scroll left center'"/>
Offline zointer - 21/09/2007 09:56 (laatste wijziging 21/09/2007 10:02)
Avatar van zointer HTML gevorderde
wes schreef:
ik heb nu dit:

[..code..]

Maar hoe doe ik dat als je erop klikt dat de achtergrond dat weggaat?

Edit:

Niemand??

Zoals google:
Opslaan als zoekbox_.js
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. /*Aanpassen wat nodig is*/
  2. (function() 
  3.    { var f = document.getElementById('zoekbox'); 
  4.  
  5. if (f && f.q) 
  6.   { var q = f.q; var n = navigator; var l = location; 
  7. if (n.platform == 'Win32') 
  8.                      /*Je kan de border style meegeven, padding..... voor de tekstbox*/
  9.   { q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;'; 
  10.  } var b = function() 
  11.   { 
  12. if (q.value == '') 
  13.                       /*kleur aanpassen----Hier plaatst je de link naar UW afbeelding*/
  14.   { q.style.background = '#ffffff url(http://google.com/coop/images/google_custom_search_watermark.gif) left no-repeat'; 
  15.  } 
  16. }; var f = function() 
  17.                /*Achtergrondkleur aanpassen bij klik*/
  18.  { q.style.background = '#ffffff';
  19. }; q.onfocus = f; q.onblur = b;
  20.  
  21. if (!/[&?]q=[^&]/.test(l.search)) 
  22.  { 
  23.    b(); 
  24.  } } }
  25. )();

zoekbox zelf
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="zoek">
  2.  		  <!-- Aanpassen naar uw wensen-->
  3.   <form action="http://www.google.be/search" method="GET" name="zoekbox" id="zoekbox">
  4.   <div class="header">Google Zoeken:</div>
  5.      <input name="q" type="text" size="20" />
  6.           <input type="submit" name="sa" value="Google zoeken" /><br/>
  7. 		  <!-- hier link naar Javascript zoekbox_.js-->
  8.         <script type="text/javascript" src="zoekbox_.js"></script>
  9.    </form>
  10. </div>

[edit]Voorbeeld[/edit]
Offline wes - 21/09/2007 18:17
Avatar van wes PHP interesse bedankt,het werkt nu eindelijk 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.212s