Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: JS: tekstin värin vaihtaminen

Sivun loppuun

JimProfit [08.07.2009 13:43:44]

#

Millaisia java scriptejä vaatisi html sivuille, että saisin tekstin värin muuttumaan toiseksi kun vien hiiren osoittimen tekstin päälle;

esim. teksti valikot muuttaa väriä kun asetan osoittimen sen valikon päälle.

MIB [08.07.2009 14:22:32]

#

<font onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='#330066'">Näin se väri vaihtuu</font>

Ja jos haluaa sen toisen värin jäävän, niin näin:

<font onmouseover="this.style.color='#FF0000'">Näin se väri vaihtuu</font>

JimProfit [08.07.2009 14:56:32]

#

ok.

No miten sitten jos minulla on monta kuvaa sivuilla, joiden pitäisi vaihtua eri kuvaksi, kun vien osoittimen niiden päälle. Millaista koodia toi vaatisi?

MIB [08.07.2009 15:10:59]

#

<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src="kuva1"
}
function mouseOut()
{
document.getElementById("b1").src="kuva2"
}
</script>

<img border="0" src="kuva1" id="b1" onmouseover="mouseOver()" onmouseout="mouseOut()">

JimProfit [08.07.2009 15:22:56]

#

joo, kyllä toi toimii yhden kuvan kanssa, mutta mulla tulee kahden kuvan kanssa ongelmia.
Tässä tapauksessa mulla on valikko minkä alla kulkee tietty kuva / viiva, mikä ilmestyy aina kun asetan osoittimen sen päälle.

En saa toimimaan tuota koodia usean kuvan / viivan kanssa.

Metabolix [08.07.2009 15:25:02]

#

Kopioi MIBin värinmuuttokoodi ja vaihda värin (style.color) vaihto kuvan osoitteen (src) vaihtoon. Lue lisäksi JS-opasta, jotta oppisit keksimään näin yksinkertaisen muutoksen ihan itse.

JimProfit [08.07.2009 16:00:35]

#

joo pitää lukea sitä opasta.

ratkaisu loytyi, kaikki toimii nyt.

Cornix [15.07.2009 00:49:27]

#

Jos tarkoituksena on ainoastaan muuttaa vaikkapa linkkien ulkonäköä, voi homman hoitaa myös CSS:llä:

HTML:
<a href="#" class="valikkolinkki">Linkkiteksti</a>

CSS:
.valikkolinkki /* normaalisti siniset valikkolinkit */
{
	color: #0000FF;
}

.valikkolinkki:hover /* valkoinen hiiren ollessa yllä */
{
	color: #FFFFFF;
}

Tuohon kuvien vaihtoon sinun kannattanee kumminkin käyttää sitä JS:ää.


Sivun alkuun

Vastaus

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

Tietoa sivustosta