Keskustelu: Nettisivujen teko: Vaihtuva submit-painikkeen taustaväri

Danae [28.11.2007 20:04:18]

Minun pitäisi tehdä nettisivulle pyöreäkulmainen submit-painike, jonka taustaväri muuttuisi tummemmaksi ja teksti mustasta valkoiseksi kun hiiri on napin päällä ja klikkauksen pitäisi muuttaa taustaväri vielä tummemmaksi.

Minulla on hyvin hatara käsitys siitä miten tällaisen saisin aikaiseksi. Ajattelin laittaa napin taustaksi pyöreäkulmaisen suorakulmion kuvan, ja javascriptin onmouseover, onmouseout ja onclikc-tapahtumien avulla taustakuvaa muutettaisi. Onko tällainen idea mistään kotoisin? Toisaalta, sivujen pitäisi toimia laajalla käyttäjäkunnalla, eli en voi taata että javascriptit on kaikkien selaimessa sallittu, niin tekisin tämän mielelläni jollain muulla tavalla.

Jos javascriptissä pysytään, niin löysin tällaisen koodin:

<FORM>
<INPUT TYPE="button" value="Green/Yellow"
onMouseOut="document.bgColor='Green'"
onMouseOver="document.bgColor='Yellow'"
</FORM>

Senhän pitäisi muuttaa koko sivun taustaväriä, mutta minun Firefoxini ei suostu tekemään mitään. Javascriptit on sallittu.

Pieniä vihjeitä olisi mukava saada, niin saisin hommaa eteenpäin.

temu92 [28.11.2007 21:39:39]

Mielummin teet css:llä ainakin sen hiiren päälle laittamisen.

<input type="button" value="Nappi" class="nappula" />

sitten css

.nappula { background-color: #FFAA00; color: #000; }
.nappula:hover { background-color: #BB6600; color: #FFF }

Siitä sitten soveltamaan. Pyöreäkulmaseen sun pitää sitten käyttää kuvia.

EDIT: En oo testannu, toimii jos toimii

kayttaja-2791 [28.11.2007 22:14:39]

temu92 kirjoitti:

EDIT: En oo testannu, toimii jos toimii

IE6:lla ei toimi, muilla moderneilla selaimilla kylläkin pitäisi toimia.

Merri [29.11.2007 03:39:52]

IE tykkää purkasta.

<html><head>
	<title>Hei</title>
	<style type="text/css">
input { background : red; }
input:hover,a:hover input { background : darkgreen; }
	</style>
</head><body>
	<h1>input-testi</h1>
	<p><!--[if IE]><a href="#"><![endif]--><input type="submit" value="Hailaittaa!" /><!--[if IE]></a><![endif]--></p>
</body></html>

Linkki näkyy siis vain IE:lle.

Danae [03.12.2007 17:37:12]

Kiitoksia kaikille, sain halutunlaisen napin tehtyä. IE6:lla en päässyt sitä vielä testaamaan, mutta IE7 toimii melko nätisti. Firefoxilla sain toimimaan input:activella klikkauksen myötä vielä tummemmaksi muuttuvan taustan, mitä IE ei enää jaksanut ymmärtää.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku