Osaisko kukaan neuvoa miten noi hehkupainikkeet tehdään. Eli kun hiiri viedään paikkeen päälle sen väri vaihtuu tai ilmestyy jokin muu efekti siihen.
Kertokaas osoite jossa ko. asiata sais tietoa. Googlettamalla ei oikein löytynyt.
Vinkeistä kiitos.
Kertokaas osoite jossa ko. asiata sais tietoa. Googlettamalla ei oikein löytynyt.
Vinkeistä kiitos.
Vastaukset 2
Vanhimmat
CSS:llä siis.
Eli määritellään CSS:llä vaikka linkki tähän tyyliin:
Tässä siis määritellään linkin normaaliksi väriksi musta:
a:link
{
color: black;
}
Tässä määritellään, että kun hiiren osoitin on linkin päällä, niin linkin väri vaihdetaan punaiseksi:
a:hover
{
color: red;
}
Tietenkin sinun pitää tajuta mitä CSS oikein tarkoittaa voidaksesi soveltaa tätä ohjetta.
Alkuun pääse lukaisemalla vaikka tämän:
http://fi.wikipedia.org/wiki/CSS
Tässä toimiva esimerkki. Ensin tarvittavat tiedostot:
http://www.munsivut.net/index.html
http://www.munsivut.net/css/reg.css
http://www.munsivut.net/text/tiedot.png
http://www.munsivut.net/text/tiedot_v.png
http://www.munsivut.net/text/valokuvia.png
http://www.munsivut.net/text/valokuvia_v.png
http://www.munsivut.net/text/vieraskirja.png
http://www.munsivut.net/text/vieraskirja_v.png
Ja tässä tiedostojen sisältö:
-------------------- index.html ----------------------------------------
[
Tekniset tiedot |
Valokuvat |
Vieraskirja
]
-------------------- reg.css ----------------------------------------
/* ----------------------- Basic HTML Elements ---------------------- */
a {text-decoration : none;}
a:link {color : #006BFF;background : transparent;}
a:visited {color : #C400FF;background : transparent;}
a:hover {color : #000000;background : transparent;}
/* ----------------------- Menu ---------------------- */
#menu {
position: absolute;
left:0;
top:150px;
width:150px;
margin-right/* hide from IE5.0/Win */
: 2em;
margin-left: 5px;
text-indent: 0.5em;
padding:5px;
border:1px solid #036DF0;
line-height:1.5em;
z-index: 4;
}
#menu span {display : none;}
#menu a:hover {background : transparent;}
#menu a span{display : none;}
#menu .tiedot {
display : block;
background : transparent url(../text/tiedot.png) no-repeat;
background : transparent url(../text/tiedot_v.png) no-repeat;
height : 40px;
width : 150px;
margin-top : -5px;
}
#menu .valokuvia {
display : block;
background : transparent url(../text/valokuvia.png) no-repeat;
background : transparent url(../text/valokuvia_v.png) no-repeat;
height : 40px;
width : 150px;
margin-top : -5px;
}
#menu .vieraskirja {
display : block;
background : transparent url(../text/vieraskirja.png) no-repeat;
background : transparent url(../text/vieraskirja_v.png) no-repeat;
height : 40px;
width : 150px;
margin-top : -5px;
}
#menu a:hover .tiedot {background : transparent url(../text/tiedot.png) no-repeat;}
#menu a:hover .valokuvia {background : transparent url(../text/valokuvia.png) no-repeat;}
#menu a:hover .vieraskirja {background : transparent url(../text/vieraskirja.png) no-repeat;}
--------------------------------------------------------------------------------
Lisäksi pitää tietenkin tehdä kuvat. Kuvien koko on tässä tapauksessa 200*46px