Miznuci a zobrazujuci sa background v textboxe

max-m

Caute,
na stranky by som rad umietnil <input type="text" />. to samozrejme nie je problem

ide o to, ze by som chcel na pozadi tohto textboxu umiestnit obrazok s textom. nemam na mysli nieco ako background-image ale skor ako je napr.: na http://www.sprievodca.eu (ten google vyhladavac).

ked clovek klikne do pola, logo aj s textom zmiznu a ked nazada nijaky znak a textbox strati focus, znova sa obrazok aj text zobrazi.

viete mi poradit ako na to?

skusal som samozrejme aj googlit, no neviem pod aky keywordom by som to hladal(?)

DIK.

djsulo

aj to je background-image: http://www.google.com/coop/intl/sk/images/google_custom_search_watermark.gif, len ked je onfocus, tak obrazok odstranis.

max-m

takze povedzme, ze by som to dal ako klasicky background-image.

ak textbox ziska focus, obrazok zmizne a ak focus strati mali by nastat dve situacie:

1. ak uzivatel nevlozil ziadny text, obrazok sa znova zobrazi
2. ak uzivatel text zadal, obrazok sa uz neukaze

ako ale na to?

DIK.

djsulo

Kód:

onBlur="if (this.value == '') {this.style.background-image='obr.jpg';}

takto nejako, neskusal som

max-m

som to testol a bud som to spravil zle alebo to takto nepojde:

Kód:

<input type="text" onblur="if (this.value == '') {this.style.background-image='img/obrazok.gif';}" />

djsulo

Kód:

<input type="text" onblur="if (this.value == '') {this.style.background='url(http://www.google.com/coop/intl/sk/images/google_custom_search_watermark.gif)';}" />

max-m

testol som to (je to v podstate to iste ako co som uz skusal) no bez vysledku. skusam stale googlit, no zatial tiez bez vysledku...

djsulo

preto som ti to napisal, ze som to skusal na FF a mne to ide, tebe nie?

max-m

presne. neslo mi to (tiez mam FF).

pomocou googlu som to uz akurat rozbehol:

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta name="author" content="Martin" />
   <title>Bez nadpisu 1</title>
<style>
.imageOne {
   background:url(img/obrazok.gif);
   background-repeat:no-repeat;
   border:1px solid #666666;
}
.imageTwo {
   background:#FFFFFF;
   background-repeat:no-repeat;
   border:1px solid #666666;
}
</style>
</head>
<body>
<input type="text" class="imageOne" onfocus="this.className='imageTwo'" onblur="if (this.value == '') {this.className='imageOne';}" />
</body>
</html>

Miznuci a zobrazujuci sa background v textboxe

Miznuci a zobrazujuci sa background v textboxe

Podobné témy

win 7 miznuci kurzor mysi

program zobrazujuci teploty a info o hardvere

Kurzor v textboxe alebo po inom v inpute

background

background

Background

background-size??

background-attachment

Background-image

BackGround Sound

background+images

css - background-image

Full Width Background

background changer + pagination

Mnozenie background obrazku

Blender Background Image