| Autor | Zpráva | ||
|---|---|---|---|
| Čekan Profil |
#1 · Zasláno: 20. 2. 2009, 21:31:06 · Upravil/a: Čekan
V inputu mohu mít předem nějaký text, např. "hledat v tomto fóru", který po kliknutí do políčka inputu zmizí a uživatel může zadat např. hledaný výraz.
Nebo také mohu mít na pozadí inputu obrázek (třeba Google to má jako jednu z možností v AdSense for Search) a po kliknutí do inputu tento obrázek zmizí, případně je nahrazem jiným. Tak nějak tuším, že se toto řeší javascripterm... Věděl by někdo konkrétně jak? |
||
| Mistr Profil |
#2 · Zasláno: 21. 2. 2009, 04:19:43
Čekan
Ve stránce http://www.jakpsatweb.cz/javascript/postupy.html v sekci nazvané Skripty reagující na událost. |
||
| Čekan Profil |
#3 · Zasláno: 21. 2. 2009, 08:43:52 · Upravil/a: Čekan
Ano, děkuji s tím textem je to jasné, už jsem to úspěšně vyzkoušel. Jen stále nevím (=neumím si to z toho obecného návodu odvodit) jak bych mohl provést nahrazení jednoho obrázku na pozadí inputu jiným.
|
||
| Mistr Profil |
#4 · Zasláno: 22. 2. 2009, 02:57:11 · Upravil/a: Mistr
Čekan
Pravděpodobně hledáš něco podobného vyhledávání ve stránce PC-guru.cz. Vyhledávání se provádí pomocí formuláře: <form action="http://www.google.cz/cse" id="cse-search-box"> <input type="hidden" name="cx" value="partner-pub-8453529582371782:ekwvkgu6fap" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="25" /> <input type="submit" name="sa" value="Hledat" /> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=cs"></script> Ten JavaScriptový kód má podobu: (function() { var f = document.getElementById('cse-search-box'); 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:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fen\x2Fimages\x2Fgoogle_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(); } } })();a zvýrazněná adresa odkazuje obrázek 
Při vědomí toho můžeš zplodit něco takovéhleho: <form id="formularik">
<textarea id="policko"></textarea>
</form>
<script type="text/javascript">
(function() { var f = document.getElementById('formularik'); if (!f) { f = document.getElementById('searchbox_demo'); } if (f && f.policko) { var q = f.q; var n = navigator; var l = location; if (n.platform == 'Win32') { policko.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;'; } var b = function() { if (policko.value == '') { policko.style.background = '#FFFFFF url(http://diskuse.jakpsatweb.cz/img/logo.gif) left no-repeat'; } }; var f = function() { policko.style.background = '#ffffff'; }; policko.onfocus = f; policko.onblur = b; if (!/[&?]policko=[^&]/.test(l.search)) { b(); } } })();
</script> |
||
| Čekan Profil |
#5 · Zasláno: 22. 2. 2009, 10:31:01 · Upravil/a: Čekan
Ano Google Search je příklad toho, že obrázek na pozadí po kliknutí zmizí. Není nahrazený jiným. Anebo to lze řešit tak, můžu mít pozadí dvě?
Jedno, které tam bude trvale (normálně přes css) a druhé, které tam bude přes JS a po kliknutí zmizí? To je totiž přesně popsaný cíl. To trvalé pozadí je jakýsi stínovaný border a to druhé je popis políčka ovšem jakými pěkným fontem, který předepsal grafik a my se tomu zadání snažíme vyhovět. |
||
|
Časová prodleva: 7 měsíců
|
|||
| auguro Profil * |
#6 · Zasláno: 26. 9. 2009, 21:20:03
Můžu si tam do políčka inputu vložit vlastní logo ? Poradíte jak ? Díky
|
||
|
Časová prodleva: 2 roky
|
|||
| auguro Profil * |
#7 · Zasláno: 15. 2. 2012, 10:23:01
Dobrý den,
vložil jsem tam tento script: <script type="text/javascript">
(function() { var f = document.getElementById('formularik'); if (!f) { f = document.getElementById('searchbox_demo'); } if (f && f.policko) { var q = f.q; var n = navigator; var l = location; if (n.platform == 'Win32') { policko.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;'; } var b = function() { if (policko.value == '') { policko.style.background = '#FFFFFF url( 404 Not Found) left no-repeat'; } }; var f = function() { policko.style.background = '#ffffff'; }; policko.onfocus = f; policko.onblur = b; if (!/[&?]policko=[^&]/.test(l.search)) { b(); } } })();
</script> |
||
|
Časová prodleva: 12 let
|
|||
0