Keskustelu: Nettisivujen teko: PHP vs JAVA ja sivulla olevat menut

Heips

Teen sivua johon haluaisin saada sivu valikon. Valikossa tulisi olla eri otsikoita (yllätys yllätys) ja kun hiiri menee otsikon päälle niin tausta väri vaihtuu. onnistuuko tällaisen tekeminen PHP:llä vai pitääkö opetella Javaa??? Saan sen tehtyä (jos alan kikkailemaan) siten että jos on klikannut otsikkoa niin sen jälkeen väri vaihtuu, mutta entä jos ei vielä ole sitä klikannut. PHP:lla ei taida onnistua. En ole ainakaan mitään sellasta löytänyt millä ton sais tehtyä. Auttakaapa onnetonta... jos vastaus on Javalla niin laittakaa jotain kivoja ja helppoja java script ohje sivuja for dummies.

Juuu juu tiedän tiedän Java ei ole sama asia kuin java script :P

T: Cinen

PHP:llä ei onnistu mitenkään.

Javalla saattaa onnistua, mutta ei mitään järkeä.

CSS:llä onnistuu helposti. Katso näitä.

Havainnollistava esimerkki:
http://cgi.evtek.fi/~k0101030/css.html

Muuten hyvä, mutta pikkusen bugittaa firebirdillä :). Kuten Deewiant sanoikin, taitaa toimia vain IE:llä. Javalla onnistuu, muttei kannata, s0n hidas. Javascriptillä onnistuu.

Ei kannattaisi alkaa muita neuvomaan, jossei itsekkään handlaa juttuja :/ Kuten jo tuossa toisessa thradissa totesin, huono esimerkki CSS:n käytöstä. Ehkäpä joku voisi hieman valaista miten ko. ominaisuudet saa toteutettua standardin mukeisesti CSS:llä?

Kertoisin, jos keksisin, mitä tässä oikein tarkoitetaan. Tuollaista perinteistä linkin-taustaväri-vaihtuu-mouseoverissa?

Blaze kirjoitti:

Kertoisin, jos keksisin, mitä tässä oikein tarkoitetaan. Tuollaista perinteistä linkin-taustaväri-vaihtuu-mouseoverissa?

Juu sitäpä sitä

No vaikka tuo, että miten taulukon solun taustaväriä muutetaan, kun hiiri viedään solun päälle. Ja sitten nuo divit. En nyt tiedä miten ne bugaa muilla selaimilla, kun en pääse testaamaan. Mutta miten tuon esimerkin mukainen div-hässäkkä toteutetaan toimivasti? kolme diviä, "yläpalkki", "navipalkki", "sisältö".

Cinenille:

<div class="munnavipalkki">
    <a>linkki</a>
    <a>toinen linkki</a>
</div>

.munnavipalkki a{
    /* väri silloin, kun hiiren kursori on jossain muualla */
    background-color: #vanhaväri;
}

.munnavipalkki a:hover{
    /* väri silloin, kun hiiren kursori on linkin päällä */
    background-color: #uusväri;
}

ajv kirjoitti:

No vaikka tuo, että miten taulukon solun taustaväriä muutetaan, kun hiiri viedään solun päälle.

td:hover{
    background-color: #hienoväri;
}

Ei toimi IE:llä, koska se ei tue :hover -pseudoluokkaa mielivaltaisilla elementeillä (ainoastaan a:lla).

ajv kirjoitti:

Mutta miten tuon esimerkin mukainen div-hässäkkä toteutetaan toimivasti? kolme diviä, "yläpalkki", "navipalkki", "sisältö".

Katso se esimerkkini toisesta threadista. Siihen on helppo lisätä tuo yläpalkki lisäämällä koodin yhden divin ennen kumpaakaan niitä siellä ennestään olevia. Lisä-CSS:ää ei tarvi.

<ul id='navi'>
    <li><a href='#'>Lerssi</a></li>
    <li><a href='#'>Lerssi</a></li>
    <li><a href='#'>Lerssi</a></li>
</ul>

ul#navi a {
    display: block;
}

ul#navi a:link, ul#navi a:visited {
    background: #fff;
    color: #000;
}

ul#navi a:hover, ul#navi a:active {
    background: #c60;
    color: #fff;
}

Edit: Tuohon ei nyt tullut sitä taulukkoa, mutta samallatavoin toimii tuo vaikkapa sen taulukon solun sisällä. Eli linkille display: block, jolloin se "venyy" äitielementin mukaan.

Edit2: Ja jos haluaa linkkien olevan kuvia, jotka muuttuvat hiiren ollessa linkin päällä, niin css:llä onnistuu myös moinen. Yksi tapa on tehdä linkille taustakuva, jota vaihtaa sitten :hover:ssa. Toinen, ja parempi tapa on tehdä taustakuva, jossa on molemmat kuvan "vaiheet" ja taustakuvan paikkaa vain vaihdetaan. Tällöin ei tarvita JavaScriptiä, eikä varsinkaan turhia preloader-kikkoja, kun molemmat vaiheet ovat samassa kuvassa. Helppoa kuin maito :)

No morjens kylläpä tolla css.llä sivut taipuu. En ole sitä ennen käyttänyt, mutta nyt alko opiskelu. Kiitos kaikille.

Erityisesti toi kuvan vaihto kuulosti tosi hyvältä.

Testaan ja laitan infoa kuinka kävi :P